How to use the Color Converter
- Type a colour in HEX, rgb() or hsl(), or use the colour picker.
- Copy it in the format you need: HEX, RGB, HSL, HSV, CMYK or OKLCH.
- Check its contrast against a background for accessible text.
Colour formats explained
- HEX / RGB describe red, green and blue light from 0–255 — the native format for screens.
- HSL / HSV describe hue, saturation and lightness (or value), which is easier for adjusting colours by hand.
- OKLCH is a perceptually uniform space supported in modern CSS: equal changes in lightness look equally different, making it ideal for building colour scales.
- CMYK is for print. The values here are a simple mathematical conversion; real print output depends on the printer's colour profile, so ask your printer for exact values.
Contrast and accessibility
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold) at level AA. Level AAA raises these to 7:1 and 4.5:1. Good contrast helps everyone, especially people with low vision and anyone reading a phone in sunlight.
Example
Pure grey #777777 on white has a contrast of 4.48:1 — just below the 4.5:1 needed for normal text. #767676 is the lightest grey that passes.
Frequently asked questions
Why does CMYK look different when printed?
Screens emit light (RGB) and printers use inks (CMYK) with a smaller range of colours. Conversion depends on paper, ink and colour profiles, so treat these CMYK values as a starting point.
Is what I enter stored or sent anywhere?
No. Calculations and processing happen in your browser. Nothing you type is sent to our servers. Some tools remember your last input in this browser's local storage for convenience; you can clear it at any time.