Color Converter

The colour models

HEX and RGB

Hexadecimal and functional notation are two spellings of the same sRGB values, both specified in CSS Color 4.

Hexadecimal and functional notation are two spellings of the same sRGB values, both specified in CSS Color 4.

The same thing written differently. Both describe how much red, green, and blue light to mix, each from 0 to 255; #ff8800 is simply rgb(255, 136, 0) in base 16. Hex is compact and dominates stylesheets, while rgb() is easier to manipulate in code. An eight-digit hex adds an alpha channel, so #ff880080 is the same orange at 50% opacity.

HSL

Hue, saturation, lightness — the model to reach for when adjusting a colour rather than specifying one. Hue is an angle on the colour wheel, so rotating it gives a different colour of the same intensity; changing only lightness gives you a palette that hangs together. Building a set of related shades is far easier here than in hex.

HSV

Hue, saturation, value. Similar to HSL but with a different top end: at full value you get the pure hue, whereas at full lightness in HSL you get white. This is the model behind most colour pickers in graphics software.

CMYK

Cyan, magenta, yellow, and key (black) — a subtractive model for ink on paper rather than light on a screen. The conversion here is the straightforward arithmetic one; genuine print work uses ICC colour profiles that account for the specific press and paper, so treat this as an approximation rather than a proof.

Contrast and accessibility

The ratios here are computed as WCAG 2.2 defines them: relative luminance of each colour, from the sRGB channel values linearised by the transfer function in IEC 61966-2-1, then (L1 + 0.05) / (L2 + 0.05). It is deliberately not a perceptual difference — two colours can look very different and still fail, which is why checking rather than judging by eye is the point.

The ratios here are computed as WCAG 2.2 defines them: relative luminance of each colour, from the sRGB channel values linearised by the transfer function in IEC 61966-2-1, then (L1 + 0.05) / (L2 + 0.05). It is deliberately not a perceptual difference — two colours can look very different and still fail, which is why checking rather than judging by eye is the point.

The contrast ratio compares the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for black on white. WCAG 2.1 sets the thresholds:

• AArequires 4.5:1 for normal text and 3:1 for large text. This is the level most legislation and procurement rules reference.
• AAArequires 7:1 for normal text and 4.5:1 for large text.
• Large textmeans at least 18pt, or 14pt when bold — bigger glyphs stay legible at lower contrast.

Note that luminance is not the same as perceived brightness: pure yellow and pure blue can look equally vivid while having wildly different luminance. That is why a ratio is measured rather than eyeballed.

Common uses

• Translating a design handoff.Designers work in HSL or HSV; stylesheets want hex. Converting between them is the most frequent reason to open a tool like this.
• Checking a brand colour is usable.Many brand palettes fail AA on white. Knowing the number before you ship is cheaper than a remediation later.
• Building a palette.Generate shades and tints from one base colour for hover states, borders, and backgrounds.
• Preparing print artwork.Get an approximate CMYK breakdown of a screen colour before sending it to a printer.
• Decoding a colour from a screenshot or config file.Paste an unfamiliar value and see it every other way.

Things that trip people up

• Three-digit hex is shorthand, not a different colour.#f80 expands to #ff8800 by doubling each digit — which is why not every six-digit colour has a three-digit form.
• Alpha is not contrast-safe.A semi-transparent colour's real contrast depends on whatever sits behind it, so a ratio computed from the colour alone can be optimistic.
• CMYK cannot represent every screen colour.Vivid greens and oranges that glow on a monitor sit outside the printable gamut and will come back duller.
• Rounding is lossy.Converting hex to HSL and back can shift a channel by one, because HSL values are rounded to whole numbers for readability.
• Contrast is directionless.The ratio between foreground and background is the same whichever way round you put them, so swapping them does not change whether the pair passes.