Colour Picker & Converter shows one colour in every notation at once: HEX, RGB, HSL, HSV and CMYK. Pick from the swatch or type a value in any format, including CSS names like tomato. It also builds shades and matching palettes, and checks whether text will actually be readable. Nothing is uploaded.
How to convert a colour
- Use the swatch, or type a colour:
#2459d6,rgb(36 89 214),hsl(220 71% 49%)or a name. - Every notation appears below it. Click Copy on the one you need.
- Scroll down for shades, a palette of matching colours, and a contrast check.
Which notation to use
- HEX — the usual way to paste an exact brand colour into code or a design tool.
- RGB — the same information as numbers, handy when a value is calculated.
- HSL — hue, saturation, lightness. Best for building a set of shades, because you change only the lightness.
- HSV — what most design apps show in their colour panel.
- CMYK — the ink mix for printing.
Checking that text can be read
The contrast section compares your colour against a background and gives a ratio from 1:1 to 21:1. The accessibility guidelines most organisations follow ask for 4.5:1 for normal text and3:1 for large text, which is roughly 24 pixels, or 19 pixels bold. A pale grey on white often looks elegant in a mockup and then fails badly on a phone in daylight, so it is worth checking before you commit to a palette.
Building a palette from one colour
The shades row keeps your hue and saturation and varies only the lightness, which is how most design systems build their colour ranges. The harmony section picks colours by their position on the colour wheel: complementary sits opposite for strong contrast, analogous sits either side for a calmer feel, and triadic and tetradic spread evenly for more variety.
Where these colours go next
Making icons for a site? The Favicon Generator takes a theme colour in the same hex form. Embedding a small graphic in CSS instead of linking it? UseImage to Base64. Making a QR code in brand colours? TheQR Code Generator warns when the contrast is too low to scan.
Frequently asked questions
What do the HEX digits mean?
A hex colour is three pairs: red, green and blue, each from 00 to ff (0 to 255). So #ff0000 is full red, and #808080 is an equal mix of all three, giving grey. A fourth pair sets transparency.
When should I use HSL instead of HEX?
HSL describes a colour as hue, saturation and lightness, which makes it easy to build a set: keep the hue, change the lightness, and you have a consistent range of shades. HEX is better for pasting an exact brand colour.
Why does my CMYK look different when printed?
Screens mix light and printers mix ink, so some bright screen colours simply cannot be printed. The CMYK here is the straightforward conversion design tools show; real print work needs a colour profile from your printer.
What does the contrast ratio tell me?
How easily text can be read against a background. Accessibility guidelines ask for at least 4.5:1 for normal text and 3:1 for large text. Failing that, people with low vision, or anyone in bright sunlight, will struggle.
What are complementary and analogous colours?
Positions on the colour wheel. Complementary sits opposite, for strong contrast; analogous sits either side, for a calm, harmonious set. Triadic and tetradic spread evenly around the wheel for more varied palettes.
Last updated