Color Scale
A graduated series of a single hue at evenly spaced lightness and chroma levels — the foundation of design system color tokens (e.g., blue-50 through blue-900).
What it means
A color scale takes one hue and generates a sequence of steps from very light (near-white) to very dark (near-black), with each step evenly spaced in perceived lightness. The standard convention uses steps numbered 50, 100, 200, …, 800, 900 — where lower numbers are lighter and higher numbers are darker.
A well-built scale has two properties: monotonic lightness (each step is visually darker than the last, with no plateaus or jumps) and consistent hue character (the hue doesn't drift dramatically across the scale). OKLCH is the preferred space for generating scales because its lightness axis is perceptually linear.
Why it matters in palette design
Color scales are the atomic unit of design systems. Every time you reference "blue-100" for a background or "blue-700" for text, you're pulling from a scale. PerfectPalette's scale builder generates 50-900 steps with monotonic OKLCH lightness, ensuring each step looks evenly spaced. Without a proper scale, you end up picking ad-hoc colors that don't relate to each other systematically.
Common confusion
Color scale vs. color palette: A palette is a curated set of distinct colors (often different hues). A scale is a graduated range within a single hue. A design system typically contains multiple scales (one per hue) plus a handful of palette-level decisions (which hues to use, semantic color assignments).
Example
PerfectPalette generates a blue scale with steps 50 (#EFF6FF), 100 (#DBEAFE), 200 (#BFDBFE), …, 800 (#1E40AF), 900 (#1E3A5F). Each step is ~0.07 OKLCH lightness apart. Step 50 is the card background, 200 is the border, 500 is the button, 900 is the heading text.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.