Colour Converter
Convert a colour between notations, and check its contrast against white and black.
Colour Converter
HEX
#0b5cd5
- RGB
rgb(11, 92, 213)
- HSL
hsl(216, 90%, 44%)
- HWB
hwb(216 4% 16%)
- CMYK
cmyk(95%, 57%, 0%, 16%)
- Contrast against white5.99 to 1 (passes AA for body text)
- Contrast against black3.51 to 1 (passes AA for large text only)
Works out in your browser. Nothing you type is sent anywhere.
In short: Colour Converter
The colour entered is #0b5cd5, which is rgb(11, 92, 213) and hsl(216, 90%, 44%), or cmyk(95%, 57%, 0%, 16%) once it is converted for print. Against white it has a contrast of 5.99 to 1 (passes AA for body text), and against black 3.51 to 1 (passes AA for large text only), which is what decides whether text in this colour can actually be read on either background.
What is Colour?
Hex, RGB, HSL, HWB and CMYK are different ways of writing the same colour, each useful in a different place.
How is Colour calculated?
Converting between notations is arithmetic on the same three channels. The contrast ratio compares the relative luminance of two colours, which weights green most heavily because the eye is most sensitive to it, and adds a small constant to both before dividing.
- Lrelative luminance, from zero for black to one for white
- Rthe red channel, after gamma correction
- Gthe green channel, after gamma correction
- Bthe blue channel, after gamma correction
A worked example
| Colour (hex, rgb or hsl) | #0b5cd5 |
|---|---|
| Opacity (%) | 100% |
| Result | |
| HEX | #0b5cd5 |
| RGB | rgb(11, 92, 213) |
| HSL | hsl(216, 90%, 44%) |
| HWB | hwb(216 4% 16%) |
| CMYK | cmyk(95%, 57%, 0%, 16%) |
| Contrast against white | 5.99 to 1 (passes AA for body text) |
| Contrast against black | 3.51 to 1 (passes AA for large text only) |
Every figure in this table is produced by the same calculation the tool above runs.
How to use this colour converter
- Type or paste a colour as hex, rgb or hsl.
- Set the opacity if you need an alpha channel.
- Read the same colour in every notation.
- Check the contrast lines before using it for text.
Questions people ask
What contrast ratio do I need?
WCAG AA asks for four and a half to one for body text, and three to one for large text, while AAA asks for seven to one. The two lines here say which level the colour reaches against white and against black. Choosing text colour from those two lines is quicker than guessing.
Why does CMYK look different from what I see?
Because CMYK describes ink on paper and your screen emits light, so some screen colours simply cannot be printed. The conversion here is the straightforward arithmetic one, not a colour-managed one with a printer profile. Treat it as a starting point for a designer rather than a final specification.
What is HWB and why would I use it?
HWB describes a colour as a hue with some white and some black mixed in, which matches how people talk about tints and shades. It is supported in CSS and is often easier to adjust by hand than HSL. The hue is the same number in both.
Can I enter a colour name?
Not in this tool: it reads hex, rgb and hsl. Named colours vary between contexts and there are too many to list usefully. Looking up the hex for a name and pasting that works.
Accuracy and sources
Checked by the Daytoolz team on 16 October 2026. How we check our tools.