Developer Colour converter
Convert between HEX, RGB and HSL, and check WCAG contrast against white and black in the same step.
Hex, rgb(), rgba(), hsl() or hsla().
HEX
#21d540RGB
rgb(33, 213, 64)HSL
hsl(130, 73%, 48%)WCAG contrast
- On white
- 1.97:1 · Fails
- On black
- 10.66:1 · AAA
- Hue
- 130°
- Saturation
- 73%
- Lightness
- 48%
- Alpha
- 1.00
WCAG 2.2 asks for 4.5:1 on body text and 3:1 on large text (18.66px bold or 24px regular). AAA raises those to 7:1 and 4.5:1.
Ready. Runs locally on your device.
Your files stay on your device. The tool works directly in your browser, using your device to process your files. Nothing is sent to our servers, and we never receive, store, or see your files or figures.
Share result
Cite
Cite this page
Reembun. (2026, July 28). Colour converter. https://reembun.com/color-converter
How to use it
Enter a colour
Type a hex code, or an rgb(), rgba(), hsl() or hsla() string. Or pick one from the swatches.
Adjust it
The hue, saturation, lightness and alpha controls move the colour while every notation updates with it.
Check the contrast
The result is scored on white and on black against the WCAG AA and AAA thresholds, which is what decides whether text on it is readable.
Copy the notation you need
HEX, RGB and HSL each have their own copy button, so you take only the one your stylesheet uses.
The three formats
HEX is two hexadecimal digits per channel, in the order red, green, blue. #1F6FEB is 31 red, 111 green, 235 blue. Three-digit shorthand doubles each digit, so #F0A means #FF00AA. An optional fourth pair is alpha.
RGB states the same values in decimal, from 0 to 255 per channel. rgb(31, 111, 235).
HSL describes the colour differently: hue as an angle around a colour wheel from 0 to 360, saturation as a percentage from grey to vivid, and lightness as a percentage from black to white. hsl(217, 84%, 52%).
All three describe the same sRGB colour. HEX and RGB are the same numbers in different bases; HSL is a genuine transformation.
Why HSL is easier to work with
Suppose you need a lighter variant of #1F6FEB for a hover state.
In hex you would have to guess at each channel and check the result. In HSL you raise the lightness from 52% to 62% and you are done, with the hue and saturation guaranteed unchanged. Building a consistent palette, whether five steps of the same hue or a set of colours at matched lightness, is straightforward in HSL and fiddly in hex.
This is why most design token systems store HSL or a similar perceptual space and emit hex only at build time.
WCAG contrast
Contrast ratio is computed from relative luminance, which weights the channels by how sensitive human vision is to each:
L = 0.2126 R + 0.7152 G + 0.0722 Bwith each channel first linearised from its sRGB value. The ratio between two colours is then:
(L_lighter + 0.05) ÷ (L_darker + 0.05)Ratios run from 1:1 for identical colours to 21:1 for black on white.
| Requirement | Ratio |
|---|---|
| AA body text | 4.5:1 |
| AA large text (24px, or 18.66px bold) | 3:1 |
| AA UI components and graphics | 3:1 |
| AAA body text | 7:1 |
| AAA large text | 4.5:1 |
Note the heavy green weighting. It means a green and a red of the same apparent brightness can have very different luminance, and that a colour pair can look distinguishable to you while failing contrast badly.
Colour and accessibility beyond contrast
Contrast is necessary and not sufficient. Around 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly red-green.
Never rely on colour alone to convey information. A red border on an invalid field needs an icon or a message alongside it. A chart distinguishing series only by colour needs labels, patterns or direct annotation.
Testing in greyscale is a quick and effective check: if the interface still works with the colour removed, it will work for someone who cannot distinguish your palette.
Common questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 on body text and 3:1 on large text, which means 18.66px bold or 24px regular and above. Level AAA raises those to 7:1 and 4.5:1. Non-text elements like icons and input borders need 3:1. Most legal accessibility requirements reference AA.
Why convert to HSL?
Because HSL is the format you can reason about. Making a colour lighter means raising the L value; making it less vivid means lowering the S. Doing either in hex requires recomputing three channels. Design systems are usually easier to build and maintain in HSL for exactly this reason.
Does a higher contrast ratio always mean better?
Not quite. Pure black on pure white is 21:1 and some readers with dyslexia or visual sensitivity find it uncomfortable, reporting a halation effect. A very dark grey on an off-white gives 15:1 or so and reads more comfortably for many people while comfortably clearing AAA.
What is the alpha channel in an 8-digit hex?
The last two digits are opacity, from 00 for fully transparent to FF for fully opaque. It is supported in all current browsers. Note that contrast ratios calculated here assume full opacity, so a semi-transparent colour's real contrast depends on whatever sits behind it.
Last reviewed
