About these color formats
HEX and RGB are the standard formats for screens and CSS - HEX is compact (#3B82F6), RGB is explicit about each channel (0-255). HSL (hue, saturation, lightness) and HSV (hue, saturation, value/brightness) describe color more the way people think about it - easier for picking a shade or a tint of the same hue. CMYK (cyan, magenta, yellow, key/black) is for print, where color is created by mixing ink rather than emitting light.
What the Color Converter does
The Color Converter shows one color in five notations at once: HEX, RGB, HSL, HSV and CMYK. Type a hex code, enter RGB values, drag the sliders or choose one of the 148 named CSS colors, and every format updates immediately.
Each line has its own Copy button and is written in CSS-ready syntax, such as rgb(59, 130, 246) or hsl(217, 91%, 60%). The conversion runs entirely in your browser.
When to use it
- Moving a brand color from a design file in HEX into CSS, Android or iOS code that expects RGB or HSL.
- Making a lighter or darker shade of the same hue by changing only the lightness in HSL.
- Checking that text on a color stays readable with the Color Contrast Checker.
- Building a color palette for a design system and documenting each color in every notation developers might need.
Worked example
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Common questions about the Color Converter
Why does CMYK only approximate print colors?
Screens mix light and printers mix ink, and every printer and paper behaves differently. The CMYK values are a mathematical conversion, so ask your print shop for a profile-based value when exact color matters.
What is the difference between HSL and HSV?
Both start with hue and saturation. HSL uses lightness, where 100% is always white, while HSV uses value or brightness, where 100% is the most vivid version of the color. Design tools often use HSV; CSS uses HSL.
Does it support transparency?
Opacity is not part of these five formats here. In CSS, add it as a fourth value, for example rgb(59 130 246 / 50%), or as two extra hex digits, #3B82F680.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.