Color Converter

How to use the colour converter

1. Enter a colour in any supported notation — a HEX code, rgb(), hsl() or a CSS name like dodgerblue. The native colour picker is there if you would rather choose visually.
2. Set the alpha with the slider if you need transparency. It feeds the RGBA, HSLA and eight-digit HEX outputs.
3. Copy what you need. Every format has its own copy button, so you can take hsl() for CSS and CMYK for a print brief without retyping anything.
4. Browse the palettes. Tints, shades, complementary, analogous, triadic and split-complementary sets are generated live; click any swatch to make it the current colour and carry on from there.
5. Check the contrast. Compare against white, black or any custom background, read the AA and AAA badges, and look at the live text sample.

How the conversions work

All formats are stored internally as RGBA and converted on demand, which is why every round-trip comes back to the same HEX code.

Contrast follows the WCAG definition. Each sRGB channel is linearised — divided by 12.92 below the 0.04045 threshold, otherwise raised to the power 2.4 after a gamma offset — and combined into a relative luminance with the weights 0.2126, 0.7152 and 0.0722. The ratio is then the lighter luminance plus 0.05 divided by the darker plus 0.05.

L = 0.2126 R + 0.7152 G + 0.0722 B
ratio = (L1 + 0.05) / (L2 + 0.05)

That is why the range is 1 to 21: black has a luminance of 0 and white of 1, giving 1.05 ÷ 0.05 = 21.

Worked examples

Dodger blue. #1e90ff is rgb(30, 144, 255), hsl(210, 100%, 55.9%) and hsv(210, 88.2%, 100%), and it has an exact CSS name: dodgerblue. Against white it manages only 3.24:1, which fails AA for body text but passes for large text. Against black it reaches 6.49:1.

The classic grey. #777777 on white is 4.48:1 — just under the 4.5:1 AA threshold for body text, which is exactly the kind of near-miss the badges are there to catch. Darkening it to #767676 pushes it over.

Maximum contrast. #ffffff against #000000 is 21:1, the highest possible value and the reason it is used as the reference point.

Shorthand and alpha. #f00 expands to #ff0000, and #ff000080 is the same red at roughly 50% alpha — rgba(255, 0, 0, 0.502). The eight-digit form is the compact way to write a translucent colour in CSS.

A harmony set. Starting from pure red, the complementary colour is cyan #00ffff, the triad is red, #00ff00 and #0000ff, and the analogous pair is #ff0080 and #ff8000. All of them are simple hue rotations with saturation and lightness untouched.

Tips and common mistakes

• Do not judge contrast by eye. Mid-tone greys and saturated blues both look more readable than they measure. Check the number.
• Large text is 18.66px bold or 24px regular. Below that, the 4.5:1 threshold applies rather than 3:1.
• Contrast is not the whole of accessibility. Colour alone should never carry meaning: pair it with a label, an icon or a pattern for anyone who cannot distinguish the hues.
• Work in HSL for variations. Changing lightness by ten per cent gives a predictable hover state; nudging a HEX code by hand rarely does.
• CMYK values are indicative. Rich blacks, spot colours and paper stock all move the result. Ask the printer for a proof.
• Watch out for HSL rounding. hsl(210, 100%, 55.9%) and hsl(210, 100%, 56%) are different colours by one unit of blue. Copy the value rather than retyping it.

Glossary

• Alpha – opacity from 0 (invisible) to 1 (solid).
• Relative luminance – perceived brightness on a 0–1 scale, used for contrast maths.
• Tint / shade – a colour mixed with white or with black.
• Complementary – the colour directly opposite on the wheel, 180 degrees away.
• Gamut – the set of colours a device can actually reproduce; CMYK’s is smaller than sRGB’s.

Privacy

Everything runs in your browser. Colour values are converted in JavaScript on this page — nothing is uploaded, logged or stored, and no palette you build here is visible to anyone but you.

Last reviewed: September 21, 2026