How to choose colors: color models, harmonies, shade scales, WCAG contrast and a color blindness check

One color, eight tabs

At the top of the page are the current color and the palette (up to 12 colors with a name). Every tab works with them: the wheel sets the current color, the converter shows it in every format, the generator fills the palette, the shades grow from the current color, the contrast checker and the color blindness simulator check the whole palette. Tap a swatch in the palette to make it current; Replace selected puts the current color in its place, and every change of the palette can be undone (the arrow button or Ctrl+Z).

Type or paste any color into the field at the top: #3a7bd5, 3a7bd5, rgb(58 123 213), rgba(58, 123, 213, .5), hsl(215 65% 53%), oklch(58.6% 0.153 257), lab(51% 2.6 −53), color(display-p3 0.29 0.48 0.81), a CSS name such as rebeccapurple or three numbers 58, 123, 213. Each tab has its own address (#/wheel, #/contrast …), so a bookmark opens the right one.

Color models: HEX to OKLCH

The Converter tab shows one color in thirteen notations. They describe the same color, but each is made for a different job:

Why OKLCH matters: in HSL, yellow and blue at the same 50% lightness look nothing alike, one bright and one dark. In OKLCH the same lightness looks equally light for every hue, so equal steps look equal. That is why the shade scales and gradients of ColorBench are built in OKLCH and OKLab. Every conversion follows the CSS Color 4 specification with its own matrices and white points.

Gamut. sRGB is what almost every screen shows; Display P3 is about a quarter larger. OKLCH can describe colors outside both, so the converter says whether the color is inside sRGB and inside Display P3. A color outside is not changed: it is shown and exported as the nearest color the target can show, found the way CSS Color 4 prescribes (the chroma is lowered in OKLCH until the difference to the clipped color is below a just-noticeable 0.02). On a P3 screen the large swatch is split in two: the left half is the nearest sRGB color, the right half the real one.

CMYK is approximate. It is the simple formula without an ICC profile, the same that most color pickers use. The inks a printer really needs depend on the paper, the press and its profile; ask the print shop or use a program with color management for print work.

Names. The nearest of the 148 CSS named colors is found by distance in OKLab (ΔE OK, shown when the match is not exact), and the plain name (“dark blue”, “pale pink”, “vivid orange”) comes from the OKLCH hue, lightness and chroma.

The color wheel and harmonies

The wheel shows hue around the circle (red at the top, clockwise) and saturation from the center out. Three models: HSV with a brightness slider, the classic picker of design apps; HSL with a lightness slider, like CSS hsl(); and OKLCH, where the radius is chroma up to 0.33 and the slider is perceived lightness. In OKLCH mode the faded part of the disc lies outside sRGB.

A harmony is a rule for hues relative to the base color:

• Complementary: the opposite hue, 180° away. The strongest contrast; use one as the main color, the other as an accent.
• Analogous: neighbours 30° to each side (the spread slider goes from 10° to 90°). Calm and natural.
• Triadic: three hues 120° apart. Lively but balanced.
• Split complementary: the two neighbours of the opposite hue, 150° and 210° by default. Contrast like complementary, but softer.
• Square: four hues 90° apart. Rectangle: two complementary pairs, 0°, 60°, 180° and 240° by default.
• Monochrome: one hue in five steps, two darker and two lighter, a little less saturated away from the base.

Drag any marker: the whole harmony turns with it and all markers share its saturation. A tap on the disc moves the base marker there. With the keyboard, Tab to a marker; the left and right arrows turn the hue by 1° (with Shift by 10°), up and down change saturation by 1% (5%), Page Up and Page Down the brightness by 5%. Make this the palette replaces the palette with the harmony; Add to the palette appends it.

A harmony gives hues, not a finished design: most good palettes use one hue for most of the surface, a second for accents and neutrals for text. Turning the brightness slider or switching to OKLCH gives the same rule with better-balanced lightness.

Palettes: generator and photo

Generate (or the Space bar when nothing is focused) builds a new palette of 2 to 12 colors from a random base hue and one of several harmony patterns, with lightness spread from dark to light and chroma lowered near the ends so the colors do not scream. Lock the colors you like: they stay in place, and the first locked color also sets the base hue. Drag a column by its handle to reorder (on a phone the columns are rows), or focus the handle and use the arrow keys. Tap the code to copy it, the target button to make that color current.

Palette from a photo: drop a picture or choose one; it is scaled down to 400 px and read in your browser, in a background worker. Two methods:

• k-means (k-means++ start, 14 rounds) groups up to 20,000 pixels by perceived color in OKLab and gives the average of each group, biggest first: the colors you notice in the picture.
• Median cut, the classic GIF quantiser, splits up to 40,000 pixels into boxes with equal numbers of pixels along the widest channel: it follows how much of the picture each color covers, so small bright details get their own color less often.

The bar under the results shows how much of the picture each color takes. Choose 3 to 12 colors.

Shade scales 50–950

Design systems such as Tailwind name shades from 50 (almost white) to 950 (almost black). ColorBench builds the eleven steps from the current color: OKLCH lightness falls in fixed, visually even steps from 0.971 to 0.266, the current color itself takes the nearest step (it is outlined) and the neighbouring steps bend smoothly towards it, chroma peaks at the base and fades towards both ends, and the hue stays fixed. Every step is mapped inside sRGB, so the scale is safe to paste anywhere.

Below are tints (mixed with white), tones (with grey of the same lightness) and shades (with black) in 10% steps, mixed in OKLab so there is no muddy middle, and neutrals with a hint of the color: the same lightness steps with a chroma from 0 to 0.04 in the hue of the current color, the warm or cool greys that make a brand palette feel finished. Tap any swatch to copy it. The code box gives both scales as CSS variables, SCSS variables or a Tailwind config (for Tailwind v4, put the same values into @theme).

Contrast: WCAG 2.2 and APCA

Choose a text color and a background (the current color can be either). The ratio is the WCAG 2.2 formula: (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and the darker color. It runs from 1 : 1 to 21 : 1 and is shown cut, not rounded, to two decimals, because the rules compare the exact value: #777777 on white is 4.48 and fails, #767676 is 4.54 and passes.

A translucent text color is first blended over the background, as the browser paints it. Nearest passing color finds, for the text and for the background, the closest color that reaches AA (and AAA for text): only the OKLCH lightness moves, towards black or white, whichever lands nearer to the original, so the hue and saturation stay as close as sRGB allows. The matrix below checks every pair of the palette, plus white and black; tap a cell to load that pair.

APCA (Accessible Perceptual Contrast Algorithm, version 0.0.98G-4g) is the model proposed for the future WCAG 3. It gives a lightness contrast Lc from about −108 to 106, where the sign says which is darker, and it accounts for the fact that light text on dark needs more contrast than the reverse. Rough guide: Lc 90 is preferred for body text, 75 the minimum for body text, 60 for other text from 16 px, 45 for large text and headlines, 30 for placeholders and disabled text, 15 for dividers. APCA is still a draft, so ColorBench shows it for reference only; accessibility requirements and laws today use WCAG 2.2.

Color blindness

About one man in twelve and one woman in two hundred see colors differently, most often with red and green. The Color blindness tab shows the whole palette as it looks for each type, and a picture you open:

• Protanopia and deuteranopia: no working red or green cones, about 1% of men each. Red and green merge; with protanopia reds also look dark.
• Protanomaly and deuteranomaly: weak red or green cones. Deuteranomaly is the most common type, about 5% of men. The severity slider sets how strong it is (60% by default).
• Tritanopia and tritanomaly: blue cones, rare. Blue and green, yellow and pink get confused.
• Achromatopsia: no color at all, only lightness. Also a good test of how a page prints in black and white.

The simulation uses the model of Machado, Oliveira and Fernandes (2009) in linear sRGB; partial types blend its matrix with normal vision by the severity. Under the palette ColorBench lists the pairs that merge: colors that differ clearly with typical vision but are closer than ΔE OK 0.06 for the chosen type. The number next to each type says how many such pairs it has. Never tell such colors apart by hue alone: add a label, an icon, a pattern or a clear difference in lightness.

Gradients without the grey zone

A gradient from red to blue mixed in sRGB passes through a dull purple-grey in the middle; from yellow to blue it turns almost grey. The reason is that sRGB numbers are not how we see. Mixing in OKLab keeps the lightness even, and OKLCH goes around the hue wheel (by the shorter arc) and keeps the chroma, so the middle stays vivid. The three bars under Interpolation show the same stops in each space, and the note says how much saturation the sRGB blend loses.

Choose a linear, radial or conic gradient, its angle or center, and up to 12 stops: tap the bar to add one there, drag the markers, type a value or take the current color into a stop, or use Stops from the palette. The CSS uses the modern syntax linear-gradient(90deg in oklch, …), supported by current Chrome, Edge, Safari and Firefox, and before it a fallback of nine sampled HEX stops from the same blend for older browsers.

Eyedropper

• Pick from the screen uses the EyeDropper API of Chrome, Edge and Opera on computers: any pixel of the screen, even outside the browser. Safari, Firefox and phones do not have it.
• From a picture: open a picture (scaled to 1600 px at most); a loupe shows the 11 × 11 pixels around the pointer. Click, or on a phone lift your finger, to take the color.
• From the camera: point the circle in the middle at a surface; the color inside it is averaged about ten times a second. Take this color keeps it. Camera colors depend on the light and the white balance, so they are good for matching paint or fabric roughly, not for exact values.

Average takes 1 pixel, or a 3 × 3, 5 × 5 or 9 × 9 square, averaged in linear light, which smooths out noise and the grain of photos. The last 12 picks are kept under Picked recently.

Export, links and saved palettes

Under the tabs, the palette goes out as CSS variables, a Tailwind config, SCSS variables, JSON (name, HEX, OKLCH, RGB and whether it fits sRGB), an SVG of swatches, a PNG card 1080 px wide, plain text, or an Adobe Swatch Exchange (.ase) file for Photoshop, Illustrator, InDesign and Affinity. Colors inside sRGB are written as HEX; wider ones as oklch(), so P3 screens keep them (in .ase and PNG they become the nearest sRGB color). Variable names come from the CSS name of a color when it is exact, otherwise from its plain name.

The link holds the palette itself after #/r/: about 50 characters for five ordinary colors, a little more for wide-gamut ones and the name. Whoever opens it sees the palette in a banner and can take it; their own palette is saved to the history first, so nothing is lost. Save to history keeps up to 40 palettes in this browser; Import takes a JSON exported from ColorBench or an .ase file.

Privacy and offline use

Every calculation runs in your browser. Pictures, photos and the camera image are read on your device and never uploaded; the camera stops when you leave the tab or the page. The current color, the palette and the settings are kept in this browser’s storage so they are still there tomorrow, and saved palettes stay until you delete them. A share link carries only the colors and the name after the #, which is never sent to a server. Once opened, ColorBench works without the internet and can be installed as an app.

Limitations

• Screens differ. The same HEX looks different on an uncalibrated laptop and a phone at full brightness; check important colors on the devices your audience uses.
• CMYK is an approximation without a profile, not a print proof.
• The simulation of color blindness is a model of an average person of each type; real vision varies, and it says nothing about low vision or glare.
• WCAG contrast is a minimum, not a guarantee of readability: thin fonts, small sizes and busy backgrounds need more. APCA is a draft and may change.
• Camera colors depend on light and the camera’s processing.

Frequently asked questions

What is the difference between HSL and HSV?

Both describe RGB as hue and saturation, but HSL’s third number is lightness (100% is white for every hue, 50% the purest color) and HSV’s is brightness (100% is the purest color, 0% black). Design apps usually show HSV, CSS has hsl().

Why use OKLCH instead of HSL?

Because its lightness is the lightness the eye sees: shades with equal OKLCH steps look evenly spaced, and swapping the hue keeps the contrast. CSS has supported oklch() in all major browsers since 2023.

Does #777 on white pass WCAG?

No: 4.48 : 1 is below the 4.5 needed for normal text (it passes for large text). #767676 gives 4.54 and passes.

Is APCA required?

Not yet. It is the candidate contrast method for WCAG 3, still a draft. Use WCAG 2.2 for compliance and APCA as a second opinion, especially for light text on dark backgrounds.

Why does my gradient look grey in the middle?

It is mixed in sRGB. Switch the interpolation to OKLCH or OKLab and copy the new CSS.

Why is the screen eyedropper greyed out?

Your browser has no EyeDropper API: it exists in Chrome, Edge and Opera on computers. Take the color from a screenshot with From a picture, or with the camera.

How do I get the palette into Figma?

Copy the HEX codes (tap a column’s code) or download the SVG and drop it onto the canvas; for Adobe apps download the .ase file.