Color Converter
Convert HEX, RGB, HSL and OKLCH colours and check WCAG contrast.
Contrast 5.88:1
| HEX | #0b5fd1 | |
|---|---|---|
| RGB | rgb(11, 95, 209) | |
| HSL | hsl(215, 90%, 43%) | |
| HSV | hsv(215, 95%, 82%) | |
| CMYK | cmyk(95%, 55%, 0%, 18%) | |
| OKLCH | oklch(51.2% 0.191 259) |
Shades and tints
The same hue and saturation with the lightness moved up towards white and down towards black, so a scale stays one colour. Contrast is measured against the background above.
| Swatch | Lightness | HEX | Contrast | Copy |
|---|---|---|---|---|
| 88.6% | #c8defc | 1.37:1 | ||
| 77.3% | #91bdf9 | 1.94:1 | ||
| 65.9% | #5a9cf6 | 2.79:1 | ||
| 54.5% | #237bf3 | 4.04:1 | ||
| 43.1% - your colour | #0b5fd1 | 5.88:1 | ||
| 34.5% | #094ca7 | 8.07:1 | ||
| 25.9% | #07397d | 11.11:1 | ||
| 17.3% | #042654 | 14.89:1 | ||
| 8.6% | #02132a | 18.6:1 |
Colour blindness
An approximation, not a diagnosis: both colours are put through the Machado, Oliveira and Fernandes (2009) matrices at full severity. It shows how far a pair moves for a dichromatic viewer, not what any one person sees.
Related tools
- Code FormatterFormat and minify XML, HTML and CSS, and minify JavaScript, in your browser.
- Encoder / DecoderEncode and decode Base64, URLs and HTML entities, and convert number bases.
- Record BuildersBuild SPF, DMARC, BIMI, MTA-STS and TLS-RPT records, meta tags and robots.txt with live checks as you type.
About this tool
Color Converter parses a colour written as HEX with 3, 4, 6 or 8 digits, as rgb() or rgba(), or as hsl() or hsla() - comma or space separated, with percentages and an alpha value allowed - and prints it back as HEX, RGB, HSL and OKLCH. OKLCH is computed through linear sRGB and OKLab, and an oklch() value or a CSS named colour such as “rebeccapurple” is accepted as input as well; lab(), lch() and color() are not. The second field is the background, and the tool reports the WCAG 2.1 contrast ratio between the two colours, rounded to two decimals, against the 4.5, 3 and 7 thresholds. A translucent colour is flattened over the background (and the background over a white page) before the ratio is measured, and the raw figure is shown next to it. When the pair fails AA, the page suggests the nearest colour that reaches 4.5:1 - the same hue and saturation with the lightness moved as little as it takes - and offers a shade and tint ramp built the same way. The preview block is also shown as the Machado, Oliveira and Fernandes (2009) matrices render it for deuteranopia, protanopia and tritanopia, which is an approximation of one dichromatic model rather than what any particular person sees.
Parsing, the HEX, RGB, HSL, HSV, CMYK and OKLCH conversions, the alpha compositing, the contrast calculation, the shade and tint ramp, the accessible-colour suggestion and the colour-blindness simulation are plain arithmetic in the page - no Web Crypto, no request to the XGM API, and nothing about the colours is stored. The colour picker and the screen sampler are the browser's own controls and read nothing beyond the colour you choose. The two colours are kept in the URL as the fg and bg parameters, on purpose, so a link you copy reopens the same pair for a colleague to look at; a colour is not sensitive input and nothing else about your session goes into the link. The JSON and Markdown exports of the format table are generated and downloaded locally.
How to use it
- Open the Color Converter tool.
- Paste or type the input you want to inspect.
- Read the result, which is computed in your browser; the input is not sent to XGM.
- Copy the output only after checking it looks correct.
- Use related XGM tools if you need a broader diagnostic view.
FAQ
Which contrast thresholds is it checking?
The four from WCAG 2.1: success criterion 1.4.3 asks for 4.5:1 for normal text and 3:1 for large text at level AA, and 1.4.6 raises those to 7:1 and 4.5:1 at level AAA. Large text there means at least 18pt (about 24px), or 14pt (about 18.66px) when bold. The result line marks each of the four as passing or failing so you can see which level a pair reaches.
How is the ratio calculated?
Each sRGB channel is divided by 255 and linearised - c/12.92 below 0.04045, otherwise ((c+0.055)/1.055) to the power 2.4 - then weighted 0.2126 red, 0.7152 green and 0.0722 blue to give relative luminance. The ratio is (lighter + 0.05) / (darker + 0.05), rounded to two decimals, which is why swapping the two fields never changes the number. Pure black against pure white gives the maximum, 21:1.
My text colour is semi-transparent. Is the ratio still correct?
No. It is measured on what the eye sees: the background is flattened over a white page, your colour is flattened over that, and the ratio comes from those two opaque colours. The result names both flattened values and prints the figure the raw channels would have given, so you can see how much the alpha changed the answer.
What do the OKLCH numbers mean, and why does a round trip shift a digit?
L is perceived lightness as a percentage, C is chroma and H is hue in degrees from 0 to 360; for a near-grey the chroma collapses and the hue is reported as 0, because there is no meaningful direction left. Equal steps in OKLCH lightness look far more even than equal steps in HSL lightness, which is the reason CSS Color 4 added it. The RGB and HSL rows are rounded to whole numbers and OKLCH to a tenth of a percent, so converting a value back in another tool can differ in the last digit.
Does a passing ratio mean the design is accessible?
It means that one text-and-background pair meets that WCAG 2.1 threshold, nothing more. Text over a photograph or a gradient has a different ratio at every pixel, focus indicators and meaningful icons fall under the separate 3:1 requirement of 1.4.11, and a ratio says nothing about font size, line length or whether colour is the only thing carrying the meaning. Check the pairs that actually appear in the interface, including hover, visited and disabled states.