Color Converter

A color in code is just a number, but it gets written several different ways. HEX packs red, green, and blue into a single six-digit string like #3498db. RGB spells the same three channels out as rgb(52, 152, 219). HSL instead describes the color the way you think about it — hue (the shade), saturation (how vivid), and lightness (how bright).

This tool starts from a single color and gives you every representation at once: the exact HEX, the rgb() and hsl() strings you can paste into CSS, and a color preview. It also reports the WCAG 2.x contrast ratio against a second color you choose, so you can verify that text on a background passes accessibility thresholds before you ship it.

Finally, it generates a small working palette — the complementary color (across the color wheel, 180° apart) and two analogous colors (thirty degrees to either side). These are classic starting points for a design.

Everything runs in your browser. Nothing is uploaded, stored, or transmitted — the Privacy Policy promise holds.

Converting between color spaces:

HEX → RGB: each pair of hex digits is one channel. Reading #RRGGBB, red = RR, green = GG, blue = BB, each 0-255. For a three-digit shorthand like #rgb, each digit is doubled: #349 becomes #334499.

RGB → HSL: normalize each channel to 0-1. Max and min give the lightness L = (max+min)/2. If max equals min the color is gray — saturation is 0 and hue is undefined. Otherwise saturation S adjusts with lightness, and hue is computed by which channel is the max:

• max = red: H = 60° × ((G − B)/(max − min)) • max = green: H = 60° × ((B − R)/(max − min) + 2) • max = blue: H = 60° × ((R − G)/(max − min) + 4)

Negative hues wrap to 0-360 by adding 360.

WCAG 2.x contrast ratio — per WCAG 2.2 Understanding SC 1.4.3 (Contrast Minimum):

1. Convert each RGB channel to sRGB-linear-ish 'relative luminance'. For a channel value c in 0-255, cSrgb = c/255, then: cSrgb ≤ 0.04045 → cLin = cSrgb/12.92 cSrgb > 0.04045 → cLin = ((cSrgb + 0.055)/1.055)^2.4 2. L = 0.2126·R + 0.7152·G + 0.0722·B. 3. ratio = (L1 + 0.05)/(L2 + 0.05), where L1 is the lighter of the two and L2 the darker, so the result is always 1-21.

Pass thresholds: AA normal text ≥ 4.5, AA large text ≥ 3, AAA normal text ≥ 7, AAA large text ≥ 4.5. The values are not rounded — 4.49 fails the 4.5 threshold. This tool shows the ratio to two decimals and marks which levels it passes.