Colour Converter & Contrast Checker

Converting HEX to RGB is one of the most common jobs in web design, but it is rarely the only one. Our free colour converter turns any HEX, RGB, HSL, HWB or CMYK value, or a CSS colour name, into every other format at once, with a colour picker and an opacity slider. It builds a palette of tints and shades you can copy as CSS variables, and it includes a WCAG 2.2 contrast checker that shows the exact contrast ratio between text and background and whether it passes AA and AAA for normal text, large text and interface components. Everything runs in your browser.

How to use the Colour converter

1. 1 Enter a colourPaste a HEX code such as #1de9b6, an rgb(), hsl(), hwb() or cmyk() value, plain numbers such as 29 233 182, or a CSS name such as teal. You can also click the swatch to use the colour picker.
2. 2 Copy the format you needEvery format updates instantly. Click Copy next to HEX, RGB, HSL, HWB, CMYK or the 0 to 1 RGB values used by some design and graphics tools.
3. 3 Adjust opacity if neededUse the opacity slider to add transparency. HEX gains two extra digits and RGB and HSL switch to their alpha versions.
4. 4 Build tints and shadesUse the palette to pick lighter and darker versions for hover states, borders and backgrounds, or copy the whole set as CSS custom properties.
5. 5 Check contrastSet a text colour and a background, look at the live preview and confirm the ratio passes WCAG AA, at least 4.5:1 for normal text, before you use the pair.

How HEX and RGB colour codes work

Screens make colours by mixing red, green and blue light. RGB describes a colour as three numbers from 0 to 255, one for each channel, so rgb(255, 0, 0) is pure red and rgb(255, 255, 255) is white. A HEX code describes exactly the same thing in base 16. The six characters after the hash are three pairs, one each for red, green and blue, where 00 means 0 and ff means 255. So #1de9b6 is red 1d (29), green e9 (233) and blue b6 (182), which is rgb(29, 233, 182).

Because HEX and RGB hold the same information, converting between them is exact and lossless. Shorthand HEX codes such as #abc double each character, so #abc is #aabbcc. Eight-digit HEX codes such as #1de9b680 add an alpha channel for transparency, where 80 is roughly 50 per cent opacity. All modern browsers support eight-digit HEX in CSS.

If you are converting by hand, take each pair, multiply the first character by 16 and add the second, remembering that a to f stand for 10 to 15. It is quick for one colour and tedious for twenty, which is why a converter saves time and avoids typing mistakes.

HSL and HWB: colour formats people can read

HEX and RGB are easy for computers but hard for people to adjust. If you want a slightly darker or less vivid version of a colour, it is not obvious which numbers to change. HSL solves this by describing a colour as hue, saturation and lightness. Hue is the position on the colour wheel in degrees, from 0 for red through 120 for green to 240 for blue. Saturation runs from grey at 0 per cent to fully vivid at 100 per cent, and lightness runs from black at 0 per cent to white at 100 per cent.

That makes HSL ideal for design systems. Keep the hue and saturation, change the lightness, and you get a consistent family of colours for buttons, hover states and backgrounds. HWB, short for hue, whiteness and blackness, is a newer CSS format that some people find even more intuitive: start with a pure hue and say how much white and black to mix in. Both are supported in current browsers.

The converter shows HSL and HWB rounded to one decimal place. Rounding means that converting to HSL and back can occasionally shift an RGB channel by one step, which is invisible to the eye. Use the HEX or RGB value as your master copy if you need an exact match.

Why CMYK values are only an approximation

Printers mix cyan, magenta, yellow and black ink rather than light. The converter uses the standard mathematical formula to turn RGB into CMYK percentages, which is useful as a starting point and for rough guidance. It is not what a professional printer will produce.

Real print conversion depends on the paper, the ink, the press and a colour profile such as FOGRA or GRACoL that describes them. Some bright screen colours, especially vivid greens, blues and the mint tones popular in modern branding, are outside the range that CMYK ink can reproduce at all. If your brand colours matter in print, ask your printer or designer for profiled CMYK values or a Pantone match, and treat the numbers here as a sanity check rather than a specification.

Tints, shades and building a palette

A single brand colour is rarely enough for a website. You also need lighter versions for backgrounds and highlights, and darker versions for hover states, borders and text. The palette strip creates four shades by mixing your colour with black and four tints by mixing it with white, in 20 per cent steps. Click any swatch to load it into the converter and see all its values.

The Copy as CSS variables button gives you a ready-made block of custom properties from 100 to 900, a naming pattern used by many CSS frameworks. Paste it into your stylesheet and refer to the colours with var(--colour-600) and so on. Simple mixing in RGB is predictable and easy to reason about, though it can make some hues look slightly dull in the lighter tints. If that happens, adjust the saturation of individual swatches in HSL.

Before you commit to a palette, check the pairs you plan to use for text with the contrast checker. Mid-tone brand colours often fail as text on white, and that is much easier to fix at the planning stage than after launch.

Colour contrast and WCAG 2.2

The Web Content Accessibility Guidelines set minimum contrast ratios between text and its background so that people with low vision or colour vision deficiencies, and anyone reading a phone in bright sunlight, can still read your content. The ratio compares the relative luminance of the two colours and runs from 1:1, the same colour twice, to 21:1, black on white. WCAG 2.2 keeps the same contrast requirements as WCAG 2.1.

• AA, normal text (success criterion 1.4.3): at least 4.5:1. This is the level most UK public sector bodies must meet and the usual target for business websites.
• AA, large text: at least 3:1. Large means at least 18 point (24 CSS pixels) or 14 point bold (about 18.66 CSS pixels).
• AAA, normal text (1.4.6): at least 7:1, the enhanced level.
• AAA, large text: at least 4.5:1.
• Non-text contrast (1.4.11): at least 3:1 for the visual parts of buttons, form field borders, focus indicators and meaningful icons and charts.

Getting accurate contrast results

The checker follows the WCAG formula exactly. Ratios are cut off rather than rounded up, so 4.499:1 shows as 4.49:1 and fails AA, which is how WCAG intends the thresholds to be read. If either colour is semi-transparent, it is blended over the background first, and a transparent background is blended over white, because that is closer to what visitors actually see.

Contrast is only one part of readable design. Thin or light font weights look fainter than the same colour in a bold weight, text over photos or gradients needs checking at its lightest point, and colour should never be the only way you show meaning, such as a red border alone to flag an error. For a wider review, combine this tool with a manual keyboard test and an automated accessibility checker, and remember that legal duties under the Equality Act 2010 and the Public Sector Bodies Accessibility Regulations refer to WCAG as the benchmark.

Examples you can copy

color: #1de9b6;
color: rgb(29, 233, 182);
color: hsl(165, 82.3%, 51.4%);
color: hwb(165 11.4% 8.6%);

/* 50% opacity */
color: #1de9b680;
color: rgba(29, 233, 182, 0.5);

Normal text      AA 4.5:1   AAA 7:1
Large text       AA 3:1     AAA 4.5:1
UI and graphics  3:1

#767676 on #ffffff  ->  4.54:1  (passes AA)
#777777 on #ffffff  ->  4.47:1  (fails AA)

#1de9b6
1d = 1 x 16 + 13 = 29
e9 = 14 x 16 + 9 = 233
b6 = 11 x 16 + 6 = 182
-> rgb(29, 233, 182)

Common mistakes to avoid

Frequently asked questions