Home › Text & Developer Tools › Color Converter (HEX, RGB, HSL)

Color Converter (HEX, RGB, HSL)

Paste any CSS color - #hex, rgb(), hsl() or a name - to convert between HEX, RGB, HSL, HSV and CMYK, check WCAG contrast against white and black, and get its complement.

HEX, RGB, HSL and friends

The same color has several spellings in CSS. HEX like #2563eb is three pairs of hexadecimal digits for red, green and blue from 00 to ff; #25e is shorthand for #2255ee, and an 8-digit form adds alpha. RGB writes the same three channels in decimal, rgb(37, 99, 235). HSL describes hue as an angle on the color wheel (0 red, 120 green, 240 blue), saturation and lightness as percentages: hsl(221, 83%, 53%). HSL is the most useful for design work - to make a lighter tint of a brand color you raise L, to mute it you lower S, and the hue stays put. HSV/HSB is what Photoshop and Figma color pickers show; it shares hue with HSL but measures brightness differently. CMYK is shown as a naive conversion for reference; real print output depends on the ICC profile and ink, so treat it as a starting point only.

Conversions between HEX, RGB and HSL are exact except for rounding: HSL is displayed to whole numbers, so a round trip can shift a channel by 1, which is invisible in practice.

How WCAG contrast is computed

WCAG 2 defines relative luminance to approximate perceived brightness: each channel is divided by 255, linearized (values at or below 0.03928 are divided by 12.92, others follow ((v + 0.055) / 1.055)^2.4), then weighted 0.2126 R + 0.7152 G + 0.0722 B to give L between 0 (black) and 1 (white). The contrast ratio between two colors is (L_lighter + 0.05) / (L_darker + 0.05), from 1:1 up to 21:1 for black on white.

For the default #2563eb, L is about 0.153, so white text scores (1.05) / (0.203) = 5.17:1 and black text scores (0.203) / (0.05) = 4.06:1. White passes AA for normal text; black passes only the 3:1 threshold for large text. The Success Criteria are 1.4.3 (AA: 4.5:1 for normal text, 3:1 for large text) and 1.4.6 (AAA: 7:1 and 4.5:1). Large text means at least 18pt (24px) regular or 14pt (about 18.7px) bold. Icons and input borders need 3:1 under 1.4.11. Light gray on white is the most common failure - #999 on white is only 2.85:1.

Complementary colors

The complement sits directly opposite on the hue wheel, 180 degrees away, with the same saturation and lightness. For the blue above (hue 221) that is an orange at hue 41. Complements give maximum contrast in hue, which is great for a call-to-action button against a brand background, though pure complements at full saturation can vibrate; drop the saturation or lightness of one of them for a calmer pair. Everything is computed in your browser and the swatches above update as you type.

Frequently asked questions

Which named colors are supported?

About 40 common names: the 16 basic CSS colors (black, white, red, lime, blue, yellow, aqua, fuchsia, silver, gray, maroon, olive, green, purple, teal, navy) plus orange, pink, brown, gold, indigo, violet, coral, crimson, tomato, salmon, khaki, turquoise, skyblue, beige, ivory, tan and chocolate. For anything else, paste the hex value.

Is 4.5:1 a legal requirement?

WCAG 2.1 AA is referenced by Section 508 for US federal sites, by the ADA Title II rule for state and local government web content, and by the European Accessibility Act. For private sites it is the de facto standard courts and auditors use, and it measurably helps low-vision and outdoor readers.

What about colors with transparency?

Alpha is ignored - #rrggbbaa and rgba() are treated as opaque. Real contrast depends on what the transparent color is composited over, so check the final flattened color instead.

Why does HSL round-trip give a slightly different hex?

Hue, saturation and lightness are rounded to integers for display. Converting the rounded values back can move a channel by one unit, an imperceptible difference. Use the RGB or HEX value when you need the exact original.

Related tools