Color Converter
Convert between HEX, RGB, HSL, and CMYK with WCAG contrast checking and tint variations.
All formats
#10b981rgb(16, 185, 129)hsl(160, 84%, 39%)cmyk(91%, 0%, 30%, 27%)WCAG Contrast
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Tints & Shades
About this tool
A complete color toolkit. Type any color in HEX, RGB, or HSL and instantly see all four common formats. Includes a native color picker, WCAG AA/AAA contrast checking against white and black backgrounds, and a tints-and-shades palette.
How to use it
Quick steps to get the most out of this utility.
- 1
Pick or type a color
Use the color picker, or type a HEX, RGB, or HSL value directly.
- 2
See all formats
Every common color format updates in real time. Click Copy on any row.
- 3
Check contrast
See whether the color passes WCAG AA and AAA accessibility ratings on white and black backgrounds.
- 4
Build a palette
Use the auto-generated tints and shades to design lighter and darker variants.
Color models in plain English
HEX is just RGB written as a six-digit hex number. #10b981 means red=0x10, green=0xb9, blue=0x81. Compact, but hard to manipulate by hand.
RGB uses three values from 0–255 for red, green, blue. Same data as HEX, just decimal. Adding an alpha channel turns it into RGBA.
HSL describes the same color using hue (0–360°), saturation (%), and lightness (%). It maps much more closely to how humans think about color: “a vibrant, slightly darker blue” is a specific HSL adjustment, while in HEX it requires conversion math.
CMYK uses four ink percentages (cyan, magenta, yellow, key/black). It's the print world's native color space. Note that CMYK has a smaller gamut than RGB — neon colors that glow on screen often flatten when printed.
Frequently asked questions
What WCAG ratings should I aim for?+
WCAG AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. AA is the typical legal minimum for accessibility compliance.
When should I use HSL instead of HEX?+
HSL (hue, saturation, lightness) is much easier for humans to reason about. Want a slightly lighter blue? Increase the lightness. Want a less saturated version? Drop the saturation. HEX requires guessing the new RGB values.
What is CMYK for?+
CMYK is the color model used for print (cyan, magenta, yellow, key/black). Designers preparing materials for print need to know roughly how their on-screen RGB color will translate. Note: exact CMYK conversion depends on the printer profile, so this is an approximation.
Why does my HEX look different on print?+
Screens emit light (additive RGB), printers absorb light (subtractive CMYK). Some bright RGB colors simply cannot be reproduced in print. For print work, design in CMYK from the start when possible.
Keep exploring
More utilities and reading from Toolisk.