Color Picker & Converter
Pick or paste any CSS colour and get every format back, along with a proper WCAG contrast check and generated shades and harmonies. Everything runs in your browser.
Hex, rgb(), hsl(), with or without alpha. Shorthand like #abc works.
Contrast against text
Ratios use the WCAG relative-luminance formula, which applies gamma expansion rather than comparing raw channel values.
Shades
Harmonies
Everything is calculated in your browser. Nothing you enter is sent anywhere.
Related tools
How to use the colour tool
- Pick a colour with the swatch, or paste a hex code,
rgb()orhsl()value. - Copy any format — HEX, RGB, HSL, HSV or CMYK — with its own button.
- Check the contrast against white and black, with the WCAG levels marked pass or fail.
- Click any shade or harmony swatch to make it the new working colour.
The formats, and when each one earns its place
HEX — #2563EB. Two hexadecimal digits per channel. Compact, universally supported, and the format almost everyone uses to write a colour down. Terrible for adjusting anything: making #2563EB slightly lighter by editing the digits is guesswork.
RGB — rgb(37, 99, 235). Identical information in decimal. Useful when the numbers come from code, and the modern syntax carries alpha cleanly.
HSL — hsl(217, 83%, 53%). Hue as an angle, saturation as vividness, lightness as how close to white or black. The one to reach for when you are changing a colour rather than recording it: a lighter version means raising one number, and a complementary colour means adding 180 to the hue.
HSV — similar to HSL, but the third value runs to a fully saturated colour rather than to white. Pure red is 100% value in HSV and 50% lightness in HSL. Common in design software colour pickers.
CMYK — for print. Different model entirely, described below.
HEX and RGB are the same numbers in different bases. HSL and HSV are genuine re-coordinations of the same space. All five describe exactly the same colour.
Contrast, and why the formula is not a brightness difference
This is the part of the tool worth understanding, because it is where colour tools most often go quietly wrong.
Contrast is defined on relative luminance — how much light a colour actually appears to emit — and getting there takes two steps that a naive implementation skips.
Gamma expansion. sRGB values are stored non-linearly, because human vision is non-linear and the encoding spends more precision where the eye is more sensitive. Before any luminance maths, each channel has to be converted back to linear light. Skip this and every result is wrong.
Unequal weighting. The channels do not contribute equally to perceived brightness. The published weights are 0.2126 for red, 0.7152 for green and 0.0722 for blue. Green carries nearly three quarters of it; blue almost none.
The consequence is unintuitive. #808080 is the exact midpoint of the sRGB encoding, but its relative luminance is about 0.216 — not 0.5. A tool that averages raw channel values reports it as roughly half as bright as white, which is optimistic by a wide margin, and passes colour pairs that a real user genuinely cannot read.
The ratio itself then runs from 1:1 for two identical colours to 21:1 for black on white, which is the maximum the sRGB space allows.
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large means 18pt, or 14pt bold. Note that AAA for large text is the same bar as AA for normal text.
The mid-grey trap
The single most common accessibility failure in web design is grey body text on a white background.
It looks refined. It reduces the harshness of pure black. Designers reach for it constantly. And the popular values fail:
#999999on white — 2.85:1. Fails AA, and fails even the 3:1 large-text bar.#8C8C8Con white — 3.36:1. Passes for large text only.#767676on white — 4.54:1. The lightest grey that clears AA for body text.
#767676 is worth remembering. It is the practical floor for grey text on white, and it is noticeably darker than most people expect.
The reason this trips people up is that contrast failures are invisible to the person choosing the colour. On a good monitor, in a dark room, with young eyes, #999999 reads fine. On a phone in sunlight, or with any degree of low vision, it does not. That gap is precisely what the ratio exists to measure — it replaces a judgement that varies by viewer with a number that does not.
Shades and harmonies
Shades hold hue and saturation constant and step lightness across the range. Every step stays recognisably the same colour, which is what a UI scale needs.
One honest caveat: this is a mathematical progression, not a perceptual one. Equal steps in HSL lightness do not look equally spaced, particularly at the dark end where changes are compressed. Use them as a starting point and adjust the ones that look wrong — that is normal practice even in professionally built design systems.
Harmonies are hue rotations, and the three classic ones each have a job:
Complementary (180° apart) gives the maximum separation on the wheel. Strong, high-energy, and best used with one colour dominant and the other as an accent — split evenly it tends to vibrate.
Analogous (30° either side) gives neighbours on the wheel. Calm and cohesive, because there is no tension between them. Good for backgrounds and gradients, weak when you need something to stand out.
Triadic (120° apart) gives three evenly spaced colours. Vivid and balanced, and the same rule applies: pick one to lead and let the others support.
None of these are rules. They are starting points that reliably avoid clashing, which is a different and more useful claim.
Screen colour and print colour
Screens are additive: they emit red, green and blue light, and more of everything gets you closer to white.
Print is subtractive: ink absorbs light, and more of everything gets you closer to black. CMYK adds a separate black (the K) because mixing cyan, magenta and yellow inks produces a muddy brown rather than a true black, and because black ink is cheaper than three coloured ones.
The CMYK values here use the standard arithmetic conversion, which gives a reasonable idea of a colour. It is not colour-managed: real print work needs an ICC profile for the specific press, ink and paper.
The practical thing to expect is that vivid screen colours — bright blues, saturated greens, anything that glows — will look duller printed. They sit outside the range CMYK ink can physically produce. That is a limitation of ink, not of the conversion.
Limits and requirements
sRGB only. The wide-gamut spaces (Display P3, Rec. 2020) and the perceptual ones (LAB, LCH, OKLCH) are not covered.
CMYK is unmanaged. Indicative, not print-ready.
Contrast is for text against a background. WCAG has separate, lower requirements for interface components and graphical objects.
Shades are mathematical. Adjust by eye for production use.
Browser support. Any modern browser. The native swatch uses your operating system's colour picker.
Privacy: how this tool handles your input
Parsing, conversion, contrast and palette generation are all arithmetic in your browser. Nothing is transmitted, logged or stored, and closing the tab discards it.
The privacy stake here is genuinely low — nobody is compromised by converting a hex code. But two practical benefits follow from the same design.
It works offline. Load the page once and it keeps working with no connection, which matters more than it sounds for a tool you might use on a train or in a building with poor signal.
It is instant. Every value updates as you type, because there is no round trip. For a tool where you nudge a colour twenty times looking for the right one, that responsiveness is the entire experience — a hundred milliseconds of latency per change would make it unusable.
You can confirm nothing leaves: open developer tools, watch the Network tab while you pick colours, or simply disconnect after the page has loaded.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same colours in different coordinates. HEX and RGB are the same thing written differently — both give the red, green and blue channels, one in hexadecimal and one in decimal, so #FF8800 and rgb(255, 136, 0) are identical. HSL is a different way of navigating the same space: hue as an angle on the colour wheel, saturation as how vivid it is, lightness as how close to white or black. HSL is far easier to reason about when you want a lighter version of a colour, because you change one number instead of guessing at three.
What is a good contrast ratio?
WCAG sets 4.5:1 as the minimum for normal body text and 3:1 for large text, meaning 18pt or 14pt bold. The enhanced AAA level asks for 7:1 and 4.5:1 respectively. The scale runs from 1:1 for two identical colours to 21:1 for black on white. As a rule of thumb, anything below 3:1 is unreadable as text for a lot of people, and mid-greys are the usual offender — #999999 on white is only 2.85:1, which fails even the large-text bar despite looking perfectly fine to many designers.
Why does my contrast ratio differ from another tool?
Almost always because one of the two is not applying gamma expansion. WCAG contrast is defined on relative luminance, which converts each sRGB channel out of its non-linear encoding before weighting it — and the weights are not equal either, since green contributes far more perceived brightness than blue. A tool that simply averages the raw channel values produces ratios that are wrong in the optimistic direction, passing colour pairs a real user cannot read. This one implements the published formula, which is why black on white comes out at exactly 21:1.
What is CMYK for, and why does it look different?
CMYK is for print. Screens emit light and mix colours additively; ink absorbs light and mixes subtractively, which is why the two models exist. The conversion here is the standard arithmetic one, which is fine for a rough idea but not colour-managed — real print work needs an ICC profile for the specific press and paper. Expect vivid screen colours, especially bright blues and greens, to look duller in print, because they are outside what CMYK ink can physically reproduce.
Which colour formats can I paste in?
Six-digit hex, three-digit shorthand, eight and four-digit hex with alpha, rgb() and rgba(), and hsl() and hsla(). Both the comma syntax and the modern space-separated form with a slash for alpha work, so rgb(255 136 0 / 50%) parses correctly. Shorthand expands the way CSS does, by doubling each digit — #abc is #aabbcc, not #abc000.
How are the shades generated?
By holding hue and saturation fixed and stepping lightness through the HSL range. That keeps every step recognisably the same colour, which is what you want for a UI scale. It is worth knowing this is a mathematical progression rather than a perceptual one: equal steps in HSL lightness do not look like equal steps to the eye, particularly at the dark end. For a production design system, use these as a starting point and adjust by eye.
What are complementary, analogous and triadic harmonies?
Three classic relationships, all defined as rotations around the hue wheel. Complementary is the colour directly opposite, 180 degrees away — maximum contrast, good for an accent against a dominant colour. Analogous is the immediate neighbours, 30 degrees either side, which gives a calm, cohesive palette. Triadic takes three points evenly spaced 120 degrees apart, which is vivid and balanced but needs one colour to dominate rather than giving all three equal weight.
Is anything I pick sent anywhere?
No. Parsing, conversion, contrast and palette generation are all arithmetic your browser does instantly. Nothing is transmitted, logged or stored, and closing the tab discards it. The practical upshot is that the tool works with no connection at all, and responds as fast as you can type.