Color Converter

About Color Converter

A color is a single point in a three-dimensional space, but representation varies by context. CSS uses #FF5733 (HEX) or rgb(255, 87, 51). Designers think in HSL or HSV (hue, saturation, lightness / value). Print workflows use CMYK (cyan, magenta, yellow, key). Each representation encodes the same color; the Color Converter lets you enter in any of these forms and see the others plus a WCAG-compliant contrast ratio.

HEX & RGB

HEX is a hexadecimal representation of the three RGB components. #FF5733 is FF (255) for red, 57 (87) for green, 33 (51) for blue. The 3-digit shorthand #F53 expands to #FF5533 (each digit is doubled). CSS supports both forms, plus the 8-digit #RRGGBBAA form where the trailing two digits encode alpha. RGB is the raw byte values, used in CSS color functions and in any code that manipulates pixel data.

HSL

HSL (hue, saturation, lightness) is the most intuitive representation for designers. Hue is the position on the color wheel, in degrees (0 = red, 120 = green, 240 = blue). Saturation is the intensity, from 0% (gray) to 100% (full color). Lightness is the brightness, from 0% (black) to 100% (white). The same logical color can be reached by tweaking any of the three: bumping the lightness gives a tint, lowering the saturation gives a tone, shifting the hue gives an analogous color.

HSV

HSV (hue, saturation, value) is similar to HSL but uses value (the brightness of the dominant channel) instead of lightness. The two representations diverge: a yellow at 50% lightness has the same RGB value as a yellow at 100% value, but the intermediate colors are different. HSV is popular in color pickers because adjusting the value slider feels intuitive (it moves the color toward black without changing hue or saturation). HSL is more common in CSS because the lightness curve is closer to how the eye perceives brightness.

CMYK

CMYK (cyan, magenta, yellow, key) is the subtractive color model used in print. The K (key) channel represents black; it is necessary because combining cyan, magenta, and yellow at 100% produces a muddy brown rather than a true black. CMYK has a smaller gamut than RGB: some RGB colors (especially bright blues and greens) cannot be reproduced in print and are rendered as their closest CMYK approximation. The Color Converter uses the simple CMYK formula (no ICC profile), which is sufficient for previewing but not for press-ready output.

WCAG 2.1 Contrast Ratio

The Web Content Accessibility Guidelines define a contrast ratio between two colors that quantifies how readable they are when one is used as text and the other as background. The ratio is computed from the relative luminance of each color, which is the linearized RGB value scaled to a perceptual brightness curve. The result is a number between 1 (no contrast, like white on white) and 21 (maximum contrast, black on white).

• AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).
• AAA (highest): 7:1 for normal text, 4.5:1 for large text.

The threshold is based on research into how readable text is for users with low vision or color vision deficiencies. Designing for AAA produces the most accessible content; failing WCAG does not necessarily mean a site is unusable, but it does mean some users will struggle. The Color Converter shows the ratio against white and black, which are the two most common background choices.

Frequently Asked Questions