Color Converter

The Color Converter translates colors between HEX, RGB, HSL, and HSB (also known as HSV) formats. It is essential for web developers and designers who need to switch between CSS color notations, design tool values, and Tailwind CSS utility classes.

Enter a color in any supported format or use the native color picker. All other representations update in real time. The tool also suggests the closest Tailwind CSS color class when a match is found — try our Tailwind Playground to preview classes live. For creating CSS gradients with your colors, use the Gradient Generator.

The Contrast Ratio section calculates the WCAG 2.1 contrast ratio between your chosen color and a configurable background color. It shows a live preview and reports the accessibility level — AAA (7:1), AA (4.5:1), AA Large (3:1), or Fail. This helps ensure your color choices meet accessibility standards.

The Palette Generator creates color harmonies based on color theory: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and split-complementary. Click any swatch to copy its hex value.

All processing happens client-side. Your colors are never sent to any server. Explore all CSS named colors with detailed explanations, or generate box shadows and text shadows using your chosen color values.

1. Select an input mode: HEX, RGB, HSL, HSB, or Picker.
2. Enter a color value. All other formats update automatically.
3. View the color preview swatch and copy any format using the copy icon.
4. In the Contrast Ratio section, set a background color to check WCAG accessibility compliance.
5. Use the Palette Generator to explore color harmonies. Click a swatch to copy its hex value.
6. Press Ctrl+Shift+C to copy the HEX value.