Colour converter
HEX, RGB, HSL and CMYK — plus the contrast ratio that decides readability.
Examples temporarily replace the input and settings. You can restore your previous work.
0 characters
Output
Paste or type above to see the result here.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
Example
A school team’s navy, red and off-white, from HEX and RGB to HSL and CMYK
A parent volunteer is making the website and the printed flyers for a school’s sports club. The colours come from the kit: navy #1d3557, red written as rgb(230 57 70), and off-white #f1faee. Pasted one per line, each comes back in all four notations with its contrast against white and black.
- The space-separated rgb(230 57 70) is read like the comma form; it comes back as rgb(230, 57, 70) and #e63946.
- Navy text on white is 12.36:1, well past the 4.5:1 that body text needs, so headings and paragraphs can be navy.
- The red is 4.17:1 on white: fine for large or bold text (3:1), short of 4.5:1 for small print. Black text on the red (5.04:1) reads better than white text on it.
- The CMYK line is the simple arithmetic conversion: a first idea for the flyer, then ask the print shop for a proof.
| Colour | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Navy | #1d3557 | rgb(29, 53, 87) | hsl(215, 50%, 23%) | 67%, 39%, 0%, 66% | 12.36:1 | 1.70:1 |
| Red | #e63946 | rgb(230, 57, 70) | hsl(355, 78%, 56%) | 0%, 75%, 70%, 10% | 4.17:1 | 5.04:1 |
| Off-white | #f1faee | rgb(241, 250, 238) | hsl(105, 55%, 96%) | 4%, 0%, 5%, 2% | 1.07:1 | 19.65:1 |
Navy for text and buttons with white lettering, red for big headlines and stripes rather than small type, off-white as the page background (navy on it is still above 11:1). The HEX values go straight into the website’s CSS.
How it works
- Paste a colour: #3b5bdb, #fff, rgb(59 91 219), rgba(59, 91, 219, 0.5) or hsl(228, 69%, 55%).
- Put one colour per line to convert a whole palette at once.
- Read the notations back, and the two contrast ratios under them.
- Copy what you need.
Frequently asked questions
- Which notations does it read?
- Hex in three, four, six and eight digits, rgb() and rgba(), and hsl() and hsla(), with values separated by commas or spaces and an alpha after a slash. Named colours like rebeccapurple are not read: there are 148 of them and they are a lookup table, not a conversion.
- What are the two contrast numbers for?
- They are the WCAG contrast ratios of your colour against white and against black, which is what decides whether text is readable on it. The thresholds worth remembering: 4.5:1 for body text, 3:1 for large or bold text, and 21:1 is the most there is (black on white). If neither number reaches 4.5, no text colour will be comfortable on that background.
- Is the CMYK exact?
- No, and no conversion in a browser can be. Real CMYK depends on the press, the ink and the paper, which is what a colour profile describes. The figures here are the straightforward arithmetic conversion, which is right for a rough idea and wrong for anything going to a printer — ask them for the profile.
- Why did my colour change slightly after a round trip?
- HSL is written in whole degrees and whole per cent, so converting to it and back can move a channel by a point or two. Where exactness matters, keep the hex.
- How do I convert HSL to HEX?
- Paste the HSL as it is, such as hsl(201, 37%, 60%) or hsl(201 37% 60%): it comes back as #73a4bf and rgb(115, 164, 191), with its CMYK and contrast. Several colours, one per line, are converted together.
- Does the contrast take transparency into account?
- Yes. The alpha is kept in the notations — rgba(29, 53, 87, 0.5) comes back as #1d355780 and hsla(215, 50%, 23%, 0.5) — and the rest is worked out for what actually shows: the contrast on white and the CMYK for the colour laid over white, marked “(on white)”, and the contrast on black for it laid over black. So rgba(29, 53, 87, 0.5) gives 2.85:1 on white, where the solid #1d3557 gives 12.36:1.
- Is anything sent to a server?
- No. It is arithmetic, and it runs in this page.
Related tools
⛓ URL encoder / decoder Percent-encoding both ways, worked out as you type. ∿ Base64 Convert text to Base64 and back, with correct UTF-8 handling and an optional URL-safe alphabet. • UUID Generator Create UUID v4 or v7 identifiers in bulk, generated on your device with a secure random source. {} JSON Formatter Paste JSON, get it indented, minified or validated instantly. Your data stays on this page.