Free Color Code Converter — HEX, RGB, HSL, CMYK & Color Schemes

HEX (#RRGGBB) represents colors as hexadecimal values for red, green and blue channels. It's the most common format in web development. RGB uses decimal values from 0–255 for each channel and is more readable. HSL (Hue, Saturation, Lightness) represents color as its hue angle (0–360°), saturation (0–100%) and lightness (0–100%). HSL is the most intuitive for humans because adjusting saturation or lightness doesn't require understanding RGB arithmetic.

Both HSL and HSV use Hue and Saturation, but differ in the third component. HSL uses Lightness — 50% is a pure color, 0% is black and 100% is white. HSV uses Value (Brightness) — 100% is a pure color and 0% is black. HSL is preferred for CSS. HSV is more common in image editing tools like Photoshop because it better matches how artists intuitively think about color.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in color printing. Use CMYK for anything physically printed — business cards, brochures, packaging. Web and screen designs use RGB. Note that CMYK has a smaller gamut than RGB, so some bright screen colors cannot be perfectly reproduced in print.

WCAG contrast ratio measures how distinct a text color is from its background, on a scale of 1:1 (identical) to 21:1 (black on white). WCAG 2.1 requires Level AA — at least 4.5:1 for normal text and 3:1 for large text. Level AAA — at least 7:1 for normal text. Poor contrast makes text illegible for people with low vision or color blindness — roughly 8% of men have some form of color blindness.

A tint is a color mixed with white — increasing HSL lightness toward 100%. A shade is a color mixed with black — decreasing lightness toward 0%. The tool generates 10 tints and 10 shades by incrementally adjusting HSL lightness, giving you a complete palette suitable for design systems and CSS variable sets.