Color Converter
Convert colors between HEX, RGB, HSL, HSV/HSB, and CMYK — drag a slider, pick a swatch, or type a value in any format and the rest update instantly.
RGB
HSL
HSV / HSB
CMYK
Nearest CSS Named Color
WCAG Contrast Checker
How to Convert a Color
- Pick a color using the color swatch/picker, drag any RGB, HSL, HSV, or CMYK slider, or type a value directly into a field.
- Watch every other format update automatically — HEX, RGB, HSL, HSV/HSB, and CMYK all stay in sync no matter which one you edit.
- Adjust the Alpha slider or type an 8-digit HEX code to add transparency — the checkerboard swatch shows exactly how see-through the color is.
- Check the Nearest CSS Named Color match and the WCAG Contrast Checker to see the closest named keyword and whether the color is readable on white or black.
- Click "Copy HEX," "Copy rgb()," "Copy hsl()," "Copy rgba()," or "Copy CMYK" to copy a ready-to-use color string to your clipboard.
Frequently Asked Questions
What color formats does this tool support?
HEX (3, 6, or 8-digit with alpha), RGB, HSL, HSV/HSB, and CMYK — edit a value in any one of these formats and the rest recalculate instantly using exact color-space math.
Why do my RGB and HSL values sometimes look slightly different after converting?
HSL and RGB use different math models, so converting from RGB to HSL and back can introduce tiny rounding differences of about ±1 — this is normal and won't be visible to the eye.
Does the HEX field accept 3-character shorthand codes?
Yes, shorthand HEX codes like #06c are automatically expanded to their full 6-character form (#0066cc) before conversion.
Does the HEX field support transparency with an alpha channel?
Yes — enter an 8-digit HEX code (e.g., #2563ebff) to set both color and alpha at once, or drag the Alpha slider separately. The swatch preview shows transparency against a checkerboard background, and the HEX field automatically switches to 8 digits whenever alpha is below 100%.
Can I adjust colors by dragging sliders instead of typing numbers?
Yes — every RGB, HSL, HSV/HSB, and CMYK value has a drag-to-adjust slider next to its number field, so you can fine-tune a color visually while watching the live swatch update in real time.
Can I use the copied rgb() and hsl() values directly in CSS?
Yes — the Copy HEX, Copy RGB, Copy HSL, and Copy RGBA buttons all generate valid CSS color syntax, like rgb(37, 99, 235) or rgba(37, 99, 235, 0.5), that you can paste straight into a stylesheet.
Is the CMYK output valid CSS syntax?
No — CSS doesn't have broad support for a cmyk() color function, so the CMYK values here are provided for print and graphic design workflows, not for pasting into a stylesheet. Use the HEX, RGB, or HSL/RGBA values for CSS.
What does the "Nearest CSS Named Color" match show?
It compares your current color's RGB values against all 140+ standard CSS named colors (like royalblue or tomato) and shows the closest one by Euclidean distance, along with whether it's an exact match — useful for finding a readable keyword name for a color you picked visually.
How is the WCAG contrast ratio calculated?
Using the official WCAG relative luminance formula, which linearizes and weights the red, green, and blue channels before comparing your color's luminance against pure white and pure black. The tool shows both ratios and flags whether they meet the WCAG AA (4.5:1 normal text, 3:1 large text) and AAA (7:1 normal text, 4.5:1 large text) thresholds.
What happens if I type an invalid HEX code?
Invalid HEX input — anything that isn't 3, 6, or 8 valid hexadecimal characters — is ignored, and the other fields won't update until you enter a valid code.