Color Converter

How to use: step by step

1. 1
   Enter a color
   Type a HEX value like #6366F1, or adjust the RGB, HSL, HSV, or CMYK sliders. All formats update simultaneously.
2. 2
   Use the color picker
   Click the small color swatch below the preview to open your browser's native color picker for a visual selection.
3. 3
   Read the converted values
   Every format panel updates in real time. The preview swatch at the top shows the exact color you are working with.
4. 4
   Check WCAG contrast
   The Contrast Ratio section shows AA and AAA compliance against white and black backgrounds: essential for accessible UI design.
5. 5
   Copy any format
   Click the Copy button next to any format (HEX, RGB, HSL, etc.) to copy that specific value to your clipboard.

Frequently Asked Questions

How do I convert HEX to RGB?

Type or paste your HEX color (e.g. #FF5733) into the HEX input field. The RGB, HSL, HSV, and CMYK values all update instantly. The RGB value is displayed as rgb(255, 87, 51).

What is the difference between HSL and HSV?

Both use Hue (H) and Saturation (S). HSL uses Lightness (L), where 0% is black, 50% is the pure color, and 100% is white. HSV uses Value (V), where 0% is black and 100% is the full brightness of the color. HSL is more intuitive for web design; HSV is common in image editing applications.

What is CMYK and when would I need it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used for print. If you are handing off colors to a print designer or specifying brand colors for printed materials, you need CMYK values, not RGB or HEX.

What are WCAG AA and AAA contrast ratios?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text. This tool checks your color against both white and black backgrounds.

Can I enter a color name like 'coral' or 'teal'?

Not directly, but the tool will show the nearest named CSS color when your color is close to a named one. For named input, enter the HEX or RGB value for that named color.

Why does my HEX color not update all the other fields?

The HEX input requires a valid 6-digit hex string starting with #, for example #RRGGBB. Partial or invalid hex codes are ignored until the string is complete and valid.

Does this tool support alpha (transparency) values?

Currently the tool works with fully opaque colors. If you need rgba() or hsla() output, take the RGB or HSL values shown and add your desired alpha channel manually.

Is the color data processed on a server?

No. All color math runs client-side in JavaScript. No data is sent to any server.