Color Converter & Contrast Checker

Convert a color between HEX, RGB, and HSL — and check whether two colors have enough contrast for real people to read.

A watercolor palette with red, yellow, blue and brown paint wells — Color in the physical world — on screen it is the same idea in HEX, RGB and HSL, checked against WCAG contrast ratios.

Convert a color

HEX color Six hex digits, with or without the #, or three digits like #fff.

Result

HEX: #2563EB
RGB: rgb(37, 99, 235)
HSL: hsl(221, 83%, 53%)

Or start from RGB

Red (0–255) Green (0–255) Blue (0–255)

HSL: Hue 221° · Saturation 83% · Lightness 53%

Check WCAG contrast

Text (foreground) color Background color

Contrast ratio: 5.17:1
WCAG verdict: Passes AA for normal text; passes AAA for large text only

Sample text in these colors — can you read this comfortably?

Three ways to write the same color

A color on screen is always a mix of red, green, and blue light, but people write that mix down in three different notations, and each one is convenient for a different job. HEX is the shorthand designers and CSS use most: #2563EB is six hex digits, two per channel, so 25 is the red channel (37 in decimal), 63 is green (99), and EB is blue (235). RGB says the same thing in plain decimal numbers: rgb(37, 99, 235). HSL describes the color the way a human thinks about it: hue is the position on the color wheel in degrees (221° is a blue), saturation is how vivid it is (83% is strong), and lightness is how bright it is (53% is mid-range). HSL is the best notation for adjusting a color — raise the lightness to make a tint, lower it for a shade — because the change you want maps directly onto one number.

Converting between them is exact arithmetic, not guesswork. HEX to RGB is a base-16 conversion of each pair of digits. RGB to HSL finds the largest and smallest channel, takes their average as lightness, and derives hue from which channel is largest and how far apart the channels are.

Contrast is a separate question from conversion, and it is the one that affects real users. The Web Content Accessibility Guidelines (WCAG) measure how distinguishable text is from its background as a ratio from 1:1 (identical colors, invisible text) to 21:1 (black on white, the maximum). The ratio comes from the relative luminance of each color — a weighted measure of how bright it looks to the human eye, where green counts far more than blue because human vision is most sensitive to green. The formula first converts each channel from the screen’s gamma-encoded values to linear light, then combines them with weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.

The thresholds are simple to remember. For normal body text, WCAG 2.x AA — the level most organizations and laws aim for — requires a ratio of at least 4.5:1. Large text (18pt or larger, or 14pt bold and larger) needs only 3:1 at AA, because bigger letters are easier to read. AAA, the strictest level, requires 7:1 for normal text and 4.5:1 for large text. The full guide, Accessible Color Contrast: A Practical WCAG Guide, explains luminance, the thresholds, and how to repair a failing palette.

Worked example

Maximum contrast. Black #000000 has a relative luminance of 0, and white #FFFFFF has a luminance of 1. The ratio is (1 + 0.05) ÷ (0 + 0.05) = 1.05 ÷ 0.05 = 21.00:1. Nothing can score higher, and black on white passes AAA for any text size.

A real brand blue. Take #2563EB — a common Tailwind-style blue — on a white background. Its channels are rgb(37, 99, 235), which converts to hsl(221, 83%, 53%). Its relative luminance is about 0.1532. The contrast ratio against white is (1 + 0.05) ÷ (0.1532 + 0.05) = 1.05 ÷ 0.2032 = 5.17:1. That passes AA for normal text (it clears 4.5:1) but not AAA (it falls short of 7:1), and it passes AAA for large text. So #2563EB is a safe choice for body text on white, but if you need AAA — for example, for a government or healthcare site — you would darken it, for instance to #1D4ED8, and check again.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

They are three notations for the same color. HEX is compact and common in CSS. RGB gives the red, green, and blue channels as decimal numbers. HSL describes hue, saturation, and lightness, which makes it the easiest to adjust by hand.

What contrast ratio do I actually need?

For most websites, aim for WCAG AA: 4.5:1 for normal text and 3:1 for large text. AAA (7:1 for normal text) is stricter and worth aiming for on sites where readability is critical, but AA is the widely accepted legal and practical standard.

Does contrast matter for icons and buttons, or only text?

It matters for both. WCAG also requires a 3:1 ratio for user-interface components and meaningful graphics against adjacent colors — so a button outline or an icon should be checked too, not just the text inside it.

Why does gray text on white fail so often?

Because gray is close to white in luminance, so the ratio is small. A medium gray like #9CA3AF on white scores only about 2.5:1. Darken it toward #4B5563 or darker and the ratio climbs past 4.5:1.

Note: Contrast ratios here follow the WCAG 2.x relative-luminance formula. They measure text legibility, not taste — a passing combination can still look bad, and a failing one can still look stylish. Check both.