Color Palette
调色板
Aliases:调色板配色色板色阶颜色系统color palettepalette
What is it
Start from one base hue and generate an ordered ramp (50–900), then assign primary, secondary, accent and neutral roles. Steps advance by lightness rather than ad-hoc picks, so hover, disabled and border always have the right depth on hand. Name roles before hex values and themes stay swappable.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- The product needs an extensible brand ramp plus neutral greys
- One hue needs several depths for hover, active and disabled
- Light and dark themes share roles and swap only ramp values
✕ When not to use
- One-off illustration or campaign colours with no system need
- Ten saturated hues stacked with no hierarchy
- A permanent two-colour black-and-white UI — hard-code it
Variants
Single hue ramp
单色相色阶
One base hue stretched 50–900 plus neutrals
Complementary
互补双色
Secondary from the opposite side of the wheel — high contrast
Monochrome
单色系
Lightness-only with a single accent spark
Implementation
oklch()color-mix()hsl()--color-primary-500Generate ten steps (50–900) in oklch() or hsl() by lightness: near L≈97% at the light end, L≈12% at the dark end, perceptually even between; ease saturation down at the light end and up at the dark. Name steps --color-primary-500, never --color-brand-blue. Keep a separate low-saturation neutral ramp — no pure black or white. Spot-check 500/600 against white text with a contrast tool.
Platform API
color-mix()oklch()hsl()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | oklch() Perceptually even ramp interpolation |
| CSS | color-mix() |
| Tailwind CSS | color palette (50–950) |
Related concepts
Colour variables named by purpose, not hue: bg, surface, text, muted, accent, danger. Components consume roles only, so a theme switch re-points the mapping layer instead of touching components. Light, dark, high-contrast and brand skins are simply different value tables over the same roles.
FoundationUsed withThe luminance ratio between foreground and background — the measure of whether text can be read. WCAG 2.1 sets hard floors: 4.5:1 for AA body, 7:1 for AAA, dropping to 3:1 and 4.5:1 for large text. APCA refines this by weight and size against perception. Compute the ratio before picking colours; never sign off by eye.
FoundationUsed withA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesUsed with