About the Color Converter
Paste a color in any common CSS format — #1d4ed8, #fff, #1d4ed8cc, rgb(29, 78, 216), rgba(…) or hsl(224, 76%, 48%) — or pick one with the color picker, and see it converted to HEX, RGB, HSL, HSV/HSB and CMYK at once, each with a copy button.
The converter also checks the color’s contrast ratio against white and black backgrounds and tells you whether it passes the WCAG AA and AAA accessibility levels for normal and large text. A row of tints and shades helps you build hover states and palettes from the same base color.
How to use the Color Converter
- Type or paste a color into “Color value (HEX, RGB or HSL)”, or use “Or pick a color”.
- Copy the format you need from the “Formats” list.
- Check the “Contrast” cards to see whether text in this color passes WCAG AA or AAA on white or black.
- Click any swatch under “Tints & shades” to load that lighter or darker variant.
Frequently asked questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For example #1d4ed8 is 1d = 29, 4e = 78 and d8 = 216, so rgb(29, 78, 216). The converter does this for you as you type.
What is the difference between HSL and HSV (HSB)?
Both describe a color by hue and saturation. HSL adds lightness, where 100% is always white; HSV (also called HSB) adds value or brightness, where 100% is the most vivid version of the color. CSS uses HSL, while design tools like Photoshop and Figma show HSB.
What contrast ratio do I need for accessible text?
WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px, or about 18.66px bold). Level AAA requires 7:1 and 4.5:1.
Are the CMYK values exact for printing?
No. They use the standard mathematical conversion without a printer color profile, which is fine as a starting point. For accurate print colors, convert in your design software using the profile your printer recommends.