How to convert a color
- Pick a color, or type it as HEX (#0071e3), RGB, HSL or CMYK.
- Every format appears at once. Click Copy next to the one you need.
- Scroll down for matching palettes, lighter and darker versions, and a contrast check for text.
How it works
All formats are calculated from the same RGB value, so they always agree. HSL and HSV describe a color as hue, saturation and lightness or brightness, which makes it easy to create harmonies: complementary colors sit 180° apart on the color wheel, triadic ones 120° apart. Tints and shades keep the hue and saturation and move only the lightness.
The contrast checker uses the WCAG 2 formula for relative luminance, the same one accessibility audits use.
A worked example
Our brand blue #0071e3 is rgb(0, 113, 227), hsl(210, 100%, 44.5%) and roughly cmyk(100%, 50%, 0%, 11%). Against white it reaches a contrast of 4.70:1, just above the 4.5:1 that WCAG level AA asks for normal text.
The classic grey #767676 on white gives 4.54:1 and passes; one step lighter, #777777, gives 4.48:1 and fails. That’s why designers check instead of guessing. Bright orange #ff9f0a on white is only 2.06:1, fine for a large icon but not for body text.
When to use it
Turning a brand color from a style guide into CSS, Android or print values. Building a small palette for slides, a website or a logo. Checking that button text is readable before you publish. Finding a darker shade for hover states.
To put the colors on a QR code, use QR Code Generator. For text on an image, Meme Generator has its own color options.
Limits
- CMYK values are a simple mathematical conversion, not a print-profile conversion. For professional printing, ask your printer for their profile.
- Colors are sRGB. Wide-gamut colors (Display P3) are clipped to sRGB.
- Contrast checks text color against a flat background; text over photos needs a separate check.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each as a hexadecimal number: #0071e3 → 00, 71, e3 → 0, 113, 227. The tool does it as you type.
What contrast ratio do I need?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA asks for 7:1.
Is the CMYK value print-ready?
It’s a good starting point, but real print colors depend on paper and ink profiles. Ask your print shop for a proof for brand-critical colors.
Which format should I use in CSS?
Any of them works. HEX is the most common; hsl() is handy when you want to adjust lightness by hand.