Colour Tools
Six tools that all work in OKLCH under the hood. That matters more than it sounds: OKLCH is perceptually uniform, so a midpoint looks like a midpoint and a hue rotation keeps every colour at the same visual weight. Tools built on HSL and raw hex cannot do either, which is why their gradients go muddy and their palettes have one colour that jumps out.
6 tools in this category
Colour Converter
Every format for one colour, including OKLCH.
OpenContrast Checker
Five WCAG checks with a live preview of the actual text.
OpenColour Blend Generator
Smooth ramps between two colours that keep their saturation.
OpenCSS Gradient Generator
CSS gradients in both spaces, shown side by side.
OpenColour Palette Generator
Tints, shades and harmonies that hold together.
OpenColour Blindness Simulator
How your colour pair reads to everyone else.
Open
Why OKLCH rather than HSL
HSL is easy to reason about and lies about lightness. A yellow at 50% lightness and a blue at 50% lightness are nowhere near the same brightness, because HSL lightness is a mathematical midpoint rather than a perceptual one. Rotate a hue in HSL to build a palette and you get a set where one colour glares and another disappears.
OKLCH fixes that. Its lightness axis tracks human perception, so holding L constant while rotating hue gives you colours that genuinely sit at the same weight. Every palette, blend and gradient here is built that way.
The visible consequence is in gradients. Interpolating red to blue in sRGB drops the chroma at the midpoint by about a third — that washed-out middle every CSS gradient has. In OKLCH the chroma holds, and the transition reads as one colour becoming another.
Contrast is not the same as distinguishable
A contrast checker compares one colour against its background. It cannot tell you whether two colours in a chart can be told apart from each other, and those are different questions with different answers.
Material Design's standard red and green both pass contrast against white. Under deuteranopia — the most common colour vision deficiency, affecting around one man in twelve — they become effectively the same colour. Any chart relying on them to carry meaning has failed for those readers while passing every automated check.
That is why the colour vision simulator reports a numeric separation rather than just showing you a picture, and why the honest rule is that colour must never be the only thing carrying information.
Where colour goes wrong in handoff
Almost every colour problem is a handoff problem rather than a choosing problem. A colour picked on a calibrated monitor in a dim room gets approved on a laptop at half brightness, printed on uncoated stock, and reproduced on a phone in daylight. None of those is wrong; they are four different reproductions of one specification.
The useful discipline is to decide which reproduction is authoritative and specify against it. For screen work that means a hex or OKLCH value and nothing else — a CMYK breakdown attached to a web colour is noise. For print it means a spot colour or a CMYK value converted against the profile the printer actually uses, with the hex treated as an approximation rather than the source of truth.
The failure mode to watch for is a brand guideline that lists one colour as a hex, a CMYK breakdown and a Pantone reference as though the three are equivalent. They cannot be. One of them was chosen and the other two were converted, and knowing which is which decides what you do when they disagree.
Frequently asked questions
Why are the CMYK values marked as approximate?
Because without an ICC profile they are. The standard formula every online converter uses takes no account of ink, stock or press, so the four numbers it gives you are a rough indication rather than a conversion. For anything going to print, convert in your layout application against the profile your printer specifies.
What is OKLCH?
A perceptually uniform colour space, now supported in CSS. Lightness, chroma and hue behave the way your eye expects: equal steps in L look like equal steps in brightness. It is the reason the palettes and gradients here hold together where HSL-based ones do not.
Is anything I enter sent to a server?
No. Every tool runs in your browser. There is no back end, so there is nothing that could log or store a colour value.
How many colours does a brand actually need?
Fewer than most guidelines specify. One primary with a tint and shade ramp, one neutral ramp, and a colour each for success, warning and error covers the overwhelming majority of interfaces. Palettes fail from having too many colours with no rule about which to use where, not from having too few.
Should I check contrast on brand colours or on the ones I ship?
The ones you ship. A brand colour is usually chosen for a logo, where the 3:1 non-text threshold applies and the colour sits at a large size. The same colour as 14px body text is a different question with a different answer, which is why most palettes need a darker text variant alongside the original.
Does dark mode need its own palette?
It needs its own values, not a different set of colours. Inverting a light palette rarely works, because a colour that reads as vivid on white reads as glaring on near-black. Lifting lightness and easing chroma in OKLCH gives you a dark-mode variant of the same colour rather than a new one.