Color Converter

What this colour converter does

Screens, stylesheets, design tools and printers all describe colour differently. This converter takes a colour in any common CSS notation, or from the picker, and shows the same colour as HEX, RGB, HSL and CMYK so you can paste it wherever it is needed. It also checks the WCAG contrast ratio against white and black, which tells you at a glance whether light or dark text will be readable on the colour.

RGB and HEX

Screens mix red, green and blue light. In RGB each channel runs from 0 (off) to 255 (full), giving 256³ ≈ 16.7 million colours. HEX is the same three numbers written in base 16, two digits per channel, where the digits 0–9 then a–f stand for 0–15: #rrggbb. A pair "ff" is 15 × 16 + 15 = 255 and "00" is 0, so #ff0000 is pure red and #ffffff is white.

Example: the default colour #4f46e5 splits into 4f, 46 and e5. 4f = 4 × 16 + 15 = 79, 46 = 4 × 16 + 6 = 70 and e5 = 14 × 16 + 5 = 229, so it is rgb(79, 70, 229): a little red, a little green and a lot of blue, which is why it looks indigo.

HSL: hue, saturation, lightness

HSL rearranges the same information into a form people find easier to reason about. Hue is an angle on the colour wheel (0° red, 120° green, 240° blue), saturation is how vivid the colour is (0% grey, 100% pure) and lightness runs from 0% black through 50% pure colour to 100% white. With the channels scaled to 0–1, lightness is (max + min) ÷ 2, saturation is (max − min) ÷ (1 − |2L − 1|), and hue depends on which channel is largest.

Example: for rgb(79, 70, 229) the scaled values are 0.310, 0.275 and 0.898. L = (0.898 + 0.275) ÷ 2 = 0.586 → 59%. S = 0.624 ÷ (1 − |1.173 − 1|) = 0.624 ÷ 0.827 = 0.754 → 75%. Blue is the largest channel, so H = 60° × ((R − G) ÷ (max − min) + 4) = 60° × (0.057 + 4) = 243°. Result: hsl(243, 75%, 59%). To make a hover shade, keep 243° and 75% and drop the lightness to 50%; to make a muted tint, lower the saturation.

CMYK for print

Printers lay down cyan, magenta, yellow and black ink on white paper, which subtracts light rather than adding it. The standard screen-to-print approximation sets K = 1 − max(R, G, B), then C = (1 − R − K) ÷ (1 − K) and likewise for M and Y, all expressed as percentages. For #4f46e5: K = 1 − 0.898 = 0.102 → 10%, C = (1 − 0.310 − 0.102) ÷ 0.898 = 0.655 → 66%, M = (1 − 0.275 − 0.102) ÷ 0.898 = 0.694 → 69%, Y = 0%, giving cmyk(66%, 69%, 0%, 10%). Treat this as an estimate: real presses use colour profiles for the specific ink and paper, and many bright screen colours, this indigo included, cannot be matched exactly in ink.

Contrast ratio and WCAG

Contrast is computed from relative luminance, a measure of perceived brightness that converts each channel from sRGB to linear light and weights them 21% red, 72% green and 7% blue. The ratio between two colours is (L₁ + 0.05) ÷ (L₂ + 0.05) with the lighter colour on top, ranging from 1:1 (identical) to 21:1 (black on white). #4f46e5 has a luminance of 0.117, so against white the ratio is 1.05 ÷ 0.167 = 6.29:1 (passes AA) and against black it is 0.167 ÷ 0.05 = 3.34:1 (large text only). White text on this indigo is the safe choice.

How to use this converter

1. Click the colour swatch to open your browser's picker, or type a value in the text box. HEX, rgb(), hsl() and 25 common names such as navy or coral are accepted, and either input updates the other.
2. Read the HEX, RGB, HSL and CMYK equivalents and click Copy next to the one you need.
3. Check the two contrast rows: a green AA or AAA badge means text in that colour (white or black) is readable on your colour; AA Large means only headings; Fail means choose a different combination.
4. Adjust the HSL values in the text box (for example change the lightness) and watch the other formats update.

Tips and common mistakes

• Letter case does not matter in HEX: #4F46E5 and #4f46e5 are the same colour. Lowercase is the usual convention in CSS.
• Grey has no hue. Any colour with equal R, G and B gives saturation 0%, and the hue is reported as 0° by convention.
• Contrast is about pairs. Passing against white does not mean the colour works against your actual background; test the real pair.
• CMYK values vary between tools and printers. Send the HEX or RGB value to your printer and let them convert with their profile. For general percentage and ratio arithmetic, see the percentage calculator and the ratio calculator.