/en/tool/color-scale/ works Runs in the browser
Enter a color, and the tool will build a scale from it and show how it behaves in an interface: the contrast of every step against every other, a live card in light and dark themes, and a color-blind view. Add as many scales to a set as you need—primary, neutral, success, warning, and danger can all be exported in one file. Export formats: CSS, Tailwind v3 and v4, SCSS, JSON, W3C tokens, Android, and SwiftUI. Nothing is sent to the server.
Hue and saturation come from the base color; lightness comes from the curve. You can have multiple scales—they will be exported to a single file.
The card is built from the steps of the first scale: heading, text, link, button, and badge. Below it, you can see which step went where and with what contrast — that is the answer to “does it work?”
The row shows the text color, and the column shows the background color. Each number is calculated for exactly that pair: if you can’t make anything out in a cell, that pair doesn’t work. White and black are added at both ends because they are the colors most often used in pairs.
Each step is broken down into numbers: its value, contrast with black, and contrast with white. The dot marks the step where the base color landed.
Eight formats using the same numbers. The file contains the complete set of scales, not just the first one.
Paste a color you already use: a button, link, or logo. The step bars in the panel redraw with every character you type.
If this HEX must remain unchanged in the interface, pin it to a step—500, 600, or whichever one fits. The curve will stretch toward it while the ends of the scale stay at their original lightness values.
Click “Build set” when you are creating a design system: neutral, success, warning, and danger will be added. All scales use the same curve settings, so their steps match by lightness and can be swapped.
Check the contrast grid. A pair whose number cannot be read will not be readable in the interface either. This is not a metaphor: the number is written in those exact colors.
Check the card in dark mode and switch the vision simulation to deuteranopia. These are two places where scales usually fall apart.
Choose a format and download the file. CSS, Tailwind v3 and v4, SCSS, JSON, W3C tokens, colors.xml for Android, and SwiftUI—the complete set of scales in one file.
The palette link stores all settings in the page address. You can send it to someone or bookmark it, and the entire palette will be restored.
Step = OKLCH(curve lightness, base saturation × compression, base hue + edge shift)
Lightness comes from OKLCH rather than HSL, which is why the steps look even. In HSL, 50% lightness means different visible brightness for yellow and blue, so an eleven-step scale dips in the middle. Color-blindness simulation uses the Viénot–Brettel matrices in linear RGB. It is an approximation, not a medical device, but pairs that it merges into one color will merge in practice as well.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
The OKLCH lightness of #3366CC is 53.25%. With “Auto,” this color lands on step 700: its curve value is 52%, and nothing is closer.
We pin it to 500. The five-hundredth step was set to 68% in the curve; it is now assigned 53.25%, the base color’s lightness.
Steps lighter than 500 stretch between the fixed edge at 97% and the new 53.25%: 400 moves from 75% to 63.81%, and 200 from 88% to 83.42%.
Darker steps compress between 53.25% and the fixed edge at 26%: 600 moves from 60% to 48.06%, and 800 from 44% to 37.68%.
The hue of 262.29° and saturation of 0.1679 at 500 remain unchanged, so it is reconstructed from OKLCH(53.25%, 0.1679, 262.29°) and again produces exactly #3366CC.
The scale is darker than before, but the brand color remains the same HEX and takes the 500 position. The contrast of #3366CC with white is 5.36, above the 4.5 threshold, so this step works for body text on a light background.
This is the convention used in design systems: small numbers are light shades, large numbers are dark, and 500 is roughly in the middle. A step of 50 is added at the ends, where the eye detects differences best. You can switch the number of steps: nine means 100–900, while thirteen adds 25 and 975 at the ends.
Yes, that is what pinning is for. Choose a step, and it will return exactly the HEX you entered while the others are recalculated using the same curve shape. With “Auto,” the tool does not move the curve. Instead, it shows where the color falls naturally, so scales of different colors line up by step lightness.
Because sRGB cannot hold the same saturation at every lightness. Very light and very dark shades have a narrower gamut, so saturation must be reduced; otherwise the color will be clipped by the channels and its hue will shift. Turn on display-p3 to raise the limit. On a wide-gamut display, the ends will become brighter.
WCAG 2.1 calculates the contrast ratio and treats dark text on a light background the same as light text on a dark background. APCA calculates perceived difference and accounts for polarity: light text on a dark background reads differently from the reversed pair. WCAG is the formal requirement, but APCA shows more accurately where text is actually faint. If a pair passes both, there is nothing to worry about.
Pure gray looks dirty next to a branded color: the eye compares it with its neighbor and sees a slight complementary tint. A neutral scale takes the brand hue and saturation of about 0.01–0.03. The gray stays gray but no longer clashes with the brand color.
Recalculates the steps as they would appear to someone missing one type of cone: protanopia—without red cones, deuteranopia—without green cones, and tritanopia—without blue cones. Focus not on beauty but on merging: if success and danger become the same color in this mode, the interface must distinguish them with an icon or label rather than color.
Nowhere. Everything is calculated in the browser, and the page makes no network requests after loading. Settings are written only to the address bar so you can share a link to the palette.
Calculates the contrast of a color pair and shows whether it passes AA and AAA.
Open
Reduces the file size of JPEG, PNG, and WebP—the file is never uploaded.
Open