Build a colour harmony that holds its lightness by rotating hue in OKLCH, with the contrast of every pair, a perceptually even tint and shade ramp, and what a colour blind reader sees
Initializing in your browser…
Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.
Convert between ten colour notations including Lab and OKLCH, check WCAG contrast, and simulate colour vision deficiency
MD5, SHA-1, SHA-2 and CRC digests of text or a file, with HMAC and verification against a published digest
A brand blue, #3b82f6, needs a square harmony for accents. The same four hues, rotated two different ways.
Base
#3b82f6, square harmony
The same rotation in two spaces
Rotated in OKLCH #3b82f6 L* 56 #d54b97 L* 53 #b07d00 L* 56 #009e7b L* 58 4.5 L* apart, even Rotated in HSL #3b82f6 L* 56 #f63bdf L* 60 #f6af3b L* 76 #3bf652 L* 86 30.1 L* apart, uneven Contrast, OKLCH palette: No pair of these swatches reaches 4.5:1, so none of them can carry body text on another. That is what a harmony at one lightness gives you: use the ramp for text and these for accents. The best pair is 1.17:1. Tint and shade ramp, evenly spaced on OKLab lightness: 50 #f0f6ff 100 #e0ecff 200 #bcd6ff 300 #92bcff 400 #619dff 500 #3a81f5 600 #2068d9 700 #004cb7 800 #003688 900 #00215b 950 #00123a L* 97 93 85 76 65 55 46 35 25 15 7, and 19 of its 55 pairs reach 4.5:1
The two lists are the same four hues. In HSL the swatches drift 30 L* apart, and the green at 86 reads as a highlight rather than as a peer of the blue at 56; that drift is the reason a generated palette so often has one colour that looks wrong. In OKLCH they stay within 4.5 L*, because OKLCH holds lightness through a hue rotation and HSL only holds its own arithmetic idea of it. Measured across 42 palettes from seven bases and six schemes, HSL spreads them a mean of 44.0 L* and OKLCH 3.8. The contrast note is the honest consequence: swatches at one lightness cannot carry text on each other, and pretending otherwise is how a palette fails an accessibility audit after it ships. The ramp is where text colours come from, and it is spaced on OKLab lightness so that a 500 means the same weight whatever the hue.
Pick a colour and get a harmony whose swatches differ in hue and in nothing else, because the rotation happens in OKLCH rather than HSL. Underneath it: the contrast of every pair against every other and against black and white, a tint and shade ramp with perceptually even steps, and the same palette as a reader with each kind of colour vision deficiency sees it, with the pairs they cannot separate named.
A harmony is a rotation of hue, and the space it is done in decides whether it works. HSL holds its own lightness constant through a rotation, and HSL lightness has almost nothing to do with how light a colour looks: pure yellow and pure blue are both HSL 50 percent, and their CIE lightness is 97 and 32. Measured over 42 palettes from seven base colours and six schemes, an HSL rotation spreads the swatches a mean of 44.0 L* apart with a worst case of 64.8. That spread is the reason a generated palette so often has one swatch that looks wrong: it is not a different hue, it is a different brightness.
Rotating in OKLCH holds lightness and chroma where they were. The same 42 palettes come out a mean of 3.8 L* apart with a worst case of 5.8, which is inside the range where two colours read as two hues rather than as light and dark. Both spaces are offered and both numbers are shown at once, so the difference can be seen rather than taken on faith. A square harmony from #3b82f6 gives four swatches at L* 56, 53, 56 and 58 in OKLCH, and 56, 60, 76 and 86 in HSL.
Some rotations land outside sRGB. Those are brought back by keeping the lightness and the hue and reducing the chroma until the colour fits, which is the direction CSS Color 4 specifies and the right one: an eye notices a change in lightness immediately and a slightly duller colour hardly at all. A swatch that was brought back is marked, with how much chroma it gave up.
The contrast table is every pair against every other, plus each swatch against black and white, by the WCAG 2.2 formula. It usually reports something people do not expect: a harmony at one lightness has no pair that reaches 4.5:1, because that is what holding the lightness means. The page says so and points at the ramp instead of leaving it as a puzzle. That is the honest answer, and it is the reason the ramp is there.
The tint and shade ramp is the 50 to 950 scale a design system names its steps with, spaced evenly on OKLab lightness so a step is the same size everywhere and a 500 means the same thing whatever the hue. From #3b82f6 the eleven steps run from L* 97 down to 7, and 19 of the 55 pairs in it reach 4.5:1, which is where text and backgrounds come from.
The colour vision panel simulates the palette for protanopia, deuteranopia, tritanopia and achromatopsia, and reports the smallest CIEDE2000 distance between any two swatches as that reader sees them. The classic case is a triadic harmony from a red: the second swatch is a green at exactly the same lightness, and to a deuteranope both become the same olive, 9.2 apart, where an ordinary reader sees them 47 apart. The line drawn at 12 is a judgement about whether two colours still work as separate categories, and it is stated as one; the distance itself is always shown.
Every conversion comes from the project's colour module, which round trips all nine spaces exactly and has 320 assertions behind it. This tool contains no colour conversion of its own. Its own tests add 854 module assertions and 377 browser assertions, all measured against the CIE and WCAG formulae written out again in the test file rather than against the module.
The harmony gives accents that sit at one weight, and the ramp gives the greys and text colours. Mixing the two up is what makes a system look uneven.
The contrast table says which pairs can carry text, and the colour vision panel says which pairs a tenth of your male readers cannot tell apart.
The ramp is the 50 to 950 scale, evenly spaced perceptually, so 500 means the same lightness for your blue as for your amber.
Switch the rotation to HSL and watch the lightness spread jump. That number is usually the explanation.
Because a harmony holds the lightness. That is the point of it: the swatches differ in hue, so they sit at the same weight next to each other. It also means none of them can carry text on another, which is why the ramp exists.
HSL lightness is the midpoint of the largest and smallest RGB channel, which is arithmetic rather than perception. CIE L* is built from measurements of how light a colour actually looks. Pure yellow and pure blue are both HSL 50 percent; their L* is 97 and 32, and everyone can see the difference.
The rotation asked for a colour more saturated than sRGB can show. Rather than clipping the channels, which changes the lightness and the hue, the chroma was reduced until the colour fitted, keeping the lightness and hue exactly. The amount given up is in the tooltip.
Because that is what design systems name their steps, and the point of the naming is that a step is the same size everywhere. Spacing on OKLab lightness is what makes that true; spacing on HSL lightness gives steps that are 14 L* apart at one end and 28 at the other.
It uses the Vienot and Brettel projections in the LMS cone space, applied in linear light, which is the standard method. It models the three dichromacies, which is the severe form; most people with a colour vision deficiency are anomalous trichromats and see something between the simulation and the original.
For two colours a reader has to tell apart as separate categories, yes. About 2.3 is the just-noticeable difference between two patches placed side by side, and categories seen apart from one another need considerably more than that. Twelve is where this page draws the line, and it says so; the distance is shown so you can disagree.
Conversions run on your device in JavaScript. The values you enter are never sent over the network.