Kodigo Labs ToolsHow to use the colour converter
Type or paste a colour in any format, or click the colour box to pick one. Every other format updates straight away, each with a Copy button. If the colour is exactly one of the CSS named colours, its name is shown too. The contrast panel checks your colour as text on white and on black, and against a second colour you choose, with pass or fail for WCAG AA and AAA. Below that you get ready-made lighter tints and darker shades for hover states, borders and backgrounds.
Worked example
Say a Philippine flag-inspired design uses the blue #0038A8. In RGB that is rgb(0, 56, 168): no red, 56 of 255 green and 168 of 255 blue. In HSL it is about hsl(220, 100%, 32.9%), a fully saturated blue at one-third lightness. White text on it has a contrast ratio of 9.85:1, which passes even AAA, so a white button label on that blue is easy to read.
Colour formats in brief
- HEX writes red, green and blue as two hex digits each (00–FF). An optional fourth pair is the alpha (transparency).
- RGB gives the same three channels as numbers from 0 to 255, plus alpha from 0 to 1 in rgba().
- HSL and HSV/HSB describe the hue angle, saturation and lightness or brightness, which makes it easier to make a colour lighter or more muted by hand.
- CMYK is the cyan, magenta, yellow and black ink mix used in print. The values here come from the simple formula K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K) and so on, without a print profile.
Frequently asked questions
What colour formats can I type in?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), cmyk(), any of the 148 CSS colour names such as tomato or rebeccapurple, and plain numbers like 255, 99, 71 (read as RGB). Both the classic comma style, rgb(255, 99, 71), and the newer space style, rgb(255 99 71 / 50%), work.
Why is the CMYK value only approximate?
This tool uses the simple formula that converts screen RGB to CMYK without a colour profile. Real printing depends on the printer, ink and paper, and uses ICC profiles to get the right mix. Use the CMYK numbers as a starting point, and ask your printer for a proof if the exact colour matters, for example for a logo or tarpaulin.
What contrast ratio do I need for readable text?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.5px bold). Level AAA asks for 7:1 and 4.5:1. For example, grey #767676 on white is 4.54:1, just enough for AA, while #777777 is 4.47:1 and fails.
How is the contrast of a see-through colour worked out?
If your colour has transparency (alpha below 1), it is first blended onto the background it is checked against, the same way a browser would draw it, and the contrast is measured on the result. The custom background colour is treated as solid.
What is the difference between HSL and HSV?
Both describe a colour by hue (its position on the colour wheel, 0–360°) and saturation. HSL then uses lightness, where 50% is the pure colour and 100% is always white. HSV (also called HSB) uses value or brightness, where 100% is the brightest version of the colour. CSS uses HSL; design apps such as Photoshop often show HSB.