Color Converter
Convert a colour between HEX, RGB, HSL and HSV, with its contrast against black and white.
Runs entirely in your browser. Nothing is uploaded, logged or stored.
Hexadecimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Relative luminance
- 0.2830
- Contrast on white
- 3.15:1
- Contrast on black
- 6.66:1
HEX, RGB, HSL and HSV are four ways of writing the same sRGB colour. Which one is convenient depends on what you are doing: hexadecimal to copy a value out of a design, HSL to make something a little lighter without changing the hue.
How it works
The input is read into eight-bit red, green and blue channels plus an alpha, and every output is computed from those channels. Nothing is converted from another output, so a value cannot drift through a chain of roundings.
The contrast figures follow WCAG 2.1: each channel is linearised, weighted for how much the eye takes from it, and the ratio is (lighter + 0.05) divided by (darker + 0.05). The scale runs from 1 for two identical colours to 21 for black against white.
Examples
| Case | Input | Result |
|---|---|---|
| A hexadecimal value from a design file | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| The short form, which repeats each digit | #39d | #3399DD, not #039D |
| With transparency | rgb(52 152 219 / 0.5) | #3498DB80 |
Frequently asked questions
Does a contrast of 4.5 mean my text passes?
It depends on the text, which is why the number is given rather than a verdict. WCAG asks for 4.5 for normal text and 3 for large text, where large means at least 18 point, or 14 point bold. A tool that only sees two colours cannot know which rule applies.
Why does converting to HSL and back sometimes shift a digit?
Because hexadecimal has 256 steps per channel and HSL does not divide evenly into them. The round trip can land one step away. Here every notation is computed from the original channels, so the values shown are always the closest to what you entered.
What is the difference between HSL and HSV?
They share the hue but disagree about the rest. In HSL, lightness 100% is white and 50% is the pure colour. In HSV, value 100% is the pure colour and white only appears when saturation drops to zero. Design tools usually show HSV; CSS speaks HSL.
Are named colours like "rebeccapurple" supported?
No. The CSS keyword list is a table of about 150 names that belongs to the specification rather than to the arithmetic, and this tool converts between notations rather than looking names up.
Good to know
- Everything here is sRGB, the space the web has always assumed. The wider spaces CSS Color 4 adds — lab, oklch, display-p3 — describe colours sRGB cannot reach, and bringing one of them back into sRGB needs a decision about what to do with the ones that fall outside. That decision is not made here.
- The contrast figures are numbers, not verdicts. Whether a pair passes depends on the size and weight of the text, which a colour on its own does not know.