Color Converter
HEX, RGB and HSL of the same color at once, with the contrast against black and white.
Updated
Hex of 3, 4, 6 or 8 digits, rgb(), rgba(), hsl() or hsla(). Both the comma syntax and the newer space syntax work.
The system picker only speaks 6-digit hex, so it drops any alpha you typed above.
This colour
#c04a26
- HEX
- #c04a26
- RGB
- rgb(192, 74, 38)
- HSL
- hsl(14.03, 66.96%, 45.1%)
WCAG 2.2 contrast
- Against black
- 4.25:1
- Against white
- 4.94:1
large text only (3:1), fails AA body
passes AA for body text (4.5:1)
Of the two, white is the more readable text colour on top of this one.
Contrast is symmetric, so each ratio holds whether this colour is the text or the background. AA needs 4.5:1 for body text and 3:1 for large text, which WCAG 2.2 defines as 18.66px bold or 24px regular and above. The ratio uses the relative-luminance formula, so a translucent colour is composited onto the reference colour first.
In short
What contrast ratio does text need to pass WCAG AA?
WCAG 2.2 asks for 4.5 to 1 on body text and 3 to 1 on large text, which it defines as 18.66px bold or 24px regular and up. White on black is the ceiling at exactly 21 to 1. The grey #767676 on white is 4.54 to 1 and just clears the body line; #777777 drops to 4.48 and fails.
The ratio is symmetric, so it says nothing about which of the two colours is the text and which is the background.
How to use the color converter
Type or paste a colour and every format updates as you go. The native colour picker below the field is there for choosing rather than typing, and clicking a swatch fills the field for you. Nothing is uploaded and the conversion runs entirely in this page.
The alpha channel survives the trip. An 8-digit hex such as #FF575780 keeps its transparency through RGB and HSL and back, and the contrast figures composite the colour onto black or onto white first, because a translucent colour has no contrast of its own until you know what sits behind it.
4.5:1
WCAG AA, body text
success criterion 1.4.3
3:1
WCAG AA, large text
18.66px bold or 24px regular
21:1
The maximum possible
pure white against pure black
A hex colour is not a code that has to be looked up. It is three pairs of base-16 digits, one per channel, each running 00 to FF, which is 0 to 255 in decimal. C0 is 12 times 16 plus 0, so 192. That is the entire translation from hex to RGB.
- HEX
- compact, copy-paste friendly, the CSS default
- RGB
- the raw channel values, easiest to reason about in code
- HSL
- lets you nudge one axis at a time
- Alpha
- available in all three: #RRGGBBAA, rgba(), hsla()
They describe the same colour. None of them describes how bright it looks.
Hex is just base 16 with a shorter name
The same channel value written in binary, octal, decimal and any base up to 36, with the digits grouped so you can read them.
Open the base converter →The contrast figure is not brightness averaged across the channels. Each channel is first linearised out of the sRGB transfer curve, then weighted: green counts for 0.7152, red for 0.2126 and blue for only 0.0722. Skipping the linearisation is the mistake that makes homemade contrast checkers disagree with real ones.
Do
- Test the exact pair you ship, background colour included, not an approximation.
- Darken or lighten a failing colour before you reach for a different hue.
- Treat 4.5 to 1 as the floor for body copy and 3 to 1 for large headings.
- Composite a translucent colour onto its real backdrop before measuring.
- Give links a second signal besides colour, such as an underline.
Don't
- Judge readability from how a swatch looks on your own calibrated screen.
- Assume two colours at the same HSL lightness are equally readable.
- Average the three channels and call the result brightness.
- Measure body text against the page colour when it sits on a card.
- Round an HSL value to whole percentages and expect the colour back.
Contrast ratios against white and against black for a set of reference colours, with the WCAG 2.2 level each one reaches as text on a white background.
| Colour | Against white | Against black | As text on white |
|---|---|---|---|
| #000000 black | 21.00:1 | 1.00:1 | AA and AAA body |
| #1A1A19 near black | 17.42:1 | 1.21:1 | AA and AAA body |
| #0000FF pure blue | 8.59:1 | 2.44:1 | AA and AAA body |
| #595959 | 7.00:1 | 3.00:1 | AA and AAA body |
| #6E6E6E | 5.10:1 | 4.12:1 | AA body |
| #767676 | 4.54:1 | 4.62:1 | AA body, only just |
| #777777 | 4.48:1 | 4.69:1 | Large text only |
| #808080 mid grey | 3.95:1 | 5.32:1 | Large text only |
| #949494 | 3.03:1 | 6.92:1 | Large text only |
| #FFFF00 pure yellow | 1.07:1 | 19.56:1 | Fails at every size |
| #FFFFFF white | 1.00:1 | 21.00:1 | Fails at every size |
Why two colours at the same lightness look nothing alike
HSL lightness is defined as the average of the largest and the smallest of the three channels. That is a geometric fact about the numbers, not a statement about vision, and the eye does not weigh red, green and blue anything like equally.
Relative luminance does weigh them, and the weights are lopsided: green carries 0.7152 of the total, red 0.2126 and blue only 0.0722. A colour made mostly of green is far brighter to the eye than the same lightness value made of blue.
- hsl(60, 100%, 50%)
- #FFFF00, luminance 0.9278
- hsl(240, 100%, 50%)
- #0000FF, luminance 0.0722
- Yellow against white
- 1.07:1, fails everything
- Blue against white
- 8.59:1, passes AAA
- Same L, contrast apart by
- 8 to 1
Both colours report 100 percent saturation and 50 percent lightness. One is nearly invisible on a white page and the other is comfortable body text. This is the single best reason to check a ratio rather than trusting an HSL value.
The practical consequence is that a colour ramp built by stepping HSL lightness evenly does not produce evenly readable steps. If the ramp has to carry text, check the ratio at each stop rather than assuming the arithmetic did it for you.
How to read the contrast figures this tool shows
The tool reports two numbers: the colour against black and the colour against white. Contrast is symmetric, so each figure holds in both directions. A colour at 8.59 to 1 against white works as dark text on a white page and as a white-text background equally.
Multiply the two and you get roughly 21, the whole range, which is why a colour almost never passes strongly against both. Something in the comfortable middle, like #767676 at 4.54 against white and 4.62 against black, is scraping past on each side rather than excelling on either.
None of this transfers to a dark theme by inverting. A dark theme has its own background, its own tints and its own set of failures, and the only reliable approach is to measure both themes against the surfaces each one actually uses.
The formula, worked line by line
Two conversions run on this page and they are very different in character. Hex to RGB is a change of base and nothing else. RGB to HSL is a change of coordinates that keeps the colour identical while describing it with three different axes.
The contrast figure is the interesting one, because it is the only number here that models the eye. It runs each channel back through the sRGB transfer curve to get a linear light value, weights the three by how much the eye responds to them, and compares the results.
hex pair to decimal: C0 = (12 x 16) + 0 = 192
channel scaled: cs = c8 / 255
linearised: c = cs / 12.92, when cs <= 0.04045
linearised: c = ((cs + 0.055) / 1.055)^2.4, otherwise
relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B
contrast = (L(lighter) + 0.05) / (L(darker) + 0.05)
HSL lightness = (max channel + min channel) / 2- Hex to decimal
- 76 = (7 x 16) + 6 = 118, on all three channels
- Scaled
- 118 / 255 = 0.46275, above the 0.04045 knee
- Linearised
- ((0.46275 + 0.055) / 1.055)^2.4 = 0.18127
- Luminance
- all channels equal, so L = 0.18127
- Against white
- (1 + 0.05) / (0.18127 + 0.05)
- Contrast ratio
- 4.54:1
That clears the 4.5 to 1 body-text threshold by four hundredths. Change the colour to #777777, one step lighter, and the same arithmetic gives 4.48 to 1, which does not. The margin between passing and failing at this end of the scale is a single hex digit.
The 0.05 that appears twice in the contrast formula is not a fudge. It models the light a real screen reflects even when it is displaying black, which is why the ratio tops out at 21 to 1 rather than running to infinity when one of the two colours has zero luminance.
The exponent of 2.4 and the 0.055 offset come from the sRGB standard, not from WCAG. Together they undo the encoding curve that makes 8-bit colour look smooth to the eye, and undoing it is exactly what turns a stored value back into a quantity of light.
HSL round trips exactly through this tool because the percentages are printed to two decimal places. There are 256 levels per channel and only 101 whole percentage points of lightness, so a whole-number hsl() value cannot describe every colour: #123456 written as hsl(210, 65%, 20%) reads back as #123354.
Questions people ask
Sources
Where the constants and formulas on this page come from. Each line names the figure it backs.
The 4.5 to 1 contrast floor for normal text and 3 to 1 for large text, and the 3 to 1 requirement for user interface components and graphical objects.
Web Content Accessibility Guidelines (WCAG) 2.2 — W3C, 2024
Relative luminance is 0.2126R plus 0.7152G plus 0.0722B after linearising each channel out of the sRGB transfer curve.
Understanding Success Criterion 1.4.3: Contrast (Minimum) — W3C Web Accessibility Initiative, 2024
The final pair of digits in an eight-digit hex colour is alpha, and the three and four digit forms expand by duplicating each digit.
CSS Color Module Level 4 — W3C
Related guides
Putting JSON in a URL: Validate, Minify, Percent-Encode, or Base64url?
A decision guide for flattening, encoding, checking, and safely transporting JSON in a query string.
August 11, 2026 · 9 min read
How Many Grams in a Cup? Every Ingredient, One Chart
One formula, fourteen densities. Why flour is 120 g, honey is 340 g, and the ingredient — not the cup — decides the number.
August 10, 2026 · 14 min read
How Are Loan Payments Calculated? Amortization, Explained
One level payment, front-loaded interest — the formula worked by hand, the two levers you control, and why the smaller payment is often the costlier loan.
July 23, 2026 · 13 min read