Updated July 10, 2026

Color Scales & UI Palettes: The Practical Guide

A color scale is a run of ordered steps — conventionally numbered 50 to 900 — generated from one seed color, so that an entire palette derives from a handful of decisions instead of dozens of hand-picked values. The scale is to color what a type scale is to font sizes: a small system that answers most questions before they’re asked. This hub collects our guides on building and using them; the quickest orientation is to open a full ramp and see the anatomy.

One color in, a system out

The working method behind every guide here: you choose one brand color, and the machinery does the rest — ten steps placed on a lightness curve, saturation shaped so the middle glows and the ends stay usable, a neutral scale tinted faintly toward the brand hue, and functional colors for success, warning, error and info. What used to be forty hand-picked hex values becomes a handful of seeds and a set of rules you can inspect.

Stop Hand-Picking Colors makes the case for working this way, and Generating a Full Palette from One Brand Color walks the derivation end to end. The two rules doing most of the work each have a guide of their own: Lightness Curves on why even-looking steps can’t be numerically linear, and Chroma Profiles on where saturation should peak and why it must taper toward both ends. Building a Neutral Scale covers the faint brand tint that keeps grays from going dead. This is also the method Scale Composer implements — there the palette sits beside typography and grid, all three derived from one shared scale.

The steps are the vocabulary

The 50–900 numbering isn’t decoration — it’s what makes color discussable. “Use brand-100 for the tint and brand-700 for the text” is an instruction two people can execute identically. The guides below cover what the numbers mean, how many steps a scale needs, and why the difference between neighboring steps has to stay visible — a scale whose steps can’t be told apart is a vocabulary with synonyms nobody asked for.

Why Color Steps Are Named 50–900 traces the convention and the room its gaps deliberately leave, and Naming Color Tokens settles the brand-600 vs blue-600 question — the naming choice that decides how painful a future rebrand will be. The vocabulary earns its keep in interaction states too: Hover and Pressed States shows why “one step along the scale” produces better state colors than mixing black or white into the base.

Roles, not colors

The final layer is semantic: buttons, borders, backgrounds and text don’t reference raw steps — they reference roles that point at steps, with contrast requirements checked where the roles meet. That’s what makes a palette maintainable: retune the seed and every role follows, because nothing downstream ever hard-coded a hex value. Primary, Secondary, Accent covers the role layer for brand colors, Success, Warning, Error, Info covers feedback colors, and Text on Colored Buttons handles the pairing every product ships: picking the on-color. The color model that makes all of this computable has its own series in the OKLCH guide, and the same role thinking runs through design tokens; the thresholds the role pairs are checked against live in the contrast hub.

Guides in this hub

See a rebrand in one move

The strongest argument for scales over swatches is watching a system retune: swap the seed color and watch everything re-derive — ramps, neutrals, and every step’s contrast relationships rebuild from the new seed in one motion. That, compressed to a sentence, is what this whole hub teaches: pick colors once, derive them forever.

Frequently asked questions

What do the numbers 50–900 mean in a color palette?

They label the steps of a color scale from lightest (50) to darkest (900) — a convention popularized by Material Design and Tailwind. The numbers are positions, not measurements; 500 or 600 is typically the brand's core color, and the gaps leave room for future in-between steps.

How do I make a full palette from one brand color?

Treat the brand color as a seed. A generator reads its hue and colorfulness, places ten or so steps on a lightness curve through it, and shapes saturation so the midtones glow while the extremes stay usable. Supporting colors can then be derived from the same seed.

Why do my generated colors look muddy?

Usually one of two causes — saturation held constant across the ramp (it needs to taper toward white and black, where screens can't show much color), or colors pushed past the screen's limit and clipped back, which flattens the steps that should be most vivid.

How many colors does a design system need?

Fewer seeds than most teams expect — commonly one brand color, a neutral, a few functional colors (success, warning, error, info) and perhaps one or two supporting hues. The scale machinery turns each seed into ten steps, and roles pick from the steps.

Can I just darken my brand color with black for hover states?

Mixing black in shifts more than lightness — colors go dull and often drift in hue. A scale gives you the darker version that keeps the color's character, which is why hover and pressed states are usually defined as neighboring steps rather than mixes.

What are semantic colors?

Colors named for their job rather than their hue — success, warning, error, info for feedback, plus role names like background, border and accent. Each one points at a step on a scale, so the whole system can be retuned without renaming anything.