Modern Color Workflow

OKLCH Scale Generator

Generate Tailwind-style 50-950 scales from a single base color, preview every step, and export the result as CSS variables, Tailwind config, or JSON tokens.

Output

50-950 Tokens

Built for design-system ramps, Tailwind-style palettes, and color tokens that need smooth lightness transitions.

Inputs

Start from a base color

Current token family

brand

This first release keeps the input deliberately simple: one HEX color in, one reusable 50-950 ramp out.

Display format

Scale Preview

brand

Tailwind-style 50-950 output generated from a single base color using a fixed OKLCH ramp.

50

brand-50

#DDF2FF

100

brand-100

#BFE7FF

200

brand-200

#7FD1FF

300

brand-300

#00B7FF

400

brand-400

#0098FD

500

brand-500

#0071F4

600

brand-600

#005ED5

700

brand-700

#004BB8

800

brand-800

#003697

900

brand-900

#001F74

950

brand-950

#000F60

Token Export

Export brand scale

:root {
  --brand-50: #DDF2FF;
  --brand-100: #BFE7FF;
  --brand-200: #7FD1FF;
  --brand-300: #00B7FF;
  --brand-400: #0098FD;
  --brand-500: #0071F4;
  --brand-600: #005ED5;
  --brand-700: #004BB8;
  --brand-800: #003697;
  --brand-900: #001F74;
  --brand-950: #000F60;
}

Why OKLCH

Why this ramp feels smoother than RGB or HSL

Perceptual lightness

OKLCH gives you a lightness axis that behaves more like real human perception, so the jump from 100 to 200 feels closer to the jump from 700 to 800.

Chroma recovery at the ends

This generator intentionally pulls chroma back at the light and dark ends so the ramp stays usable instead of becoming washed out on top or muddy at the bottom.

Why this is useful

Turn one brand color into decisions your product team can actually ship

This generator is not only for making pretty swatches. It helps teams build a reusable scale for surfaces, borders, fills, focus states, charts, and dark-mode UI without manually tweaking eleven separate colors one by one.

Design systems

Start with one base brand color and quickly produce a full ramp for semantic tokens, component states, and multi-theme UI work.

Front-end implementation

Export CSS variables, Tailwind colors, or JSON tokens so the palette can move directly into code instead of staying trapped in a design file.

Faster iteration

Compare steps live, adjust one input color, and instantly see whether the scale stays useful across light UI, deep accents, and dark surfaces.

Recommended workflow

A practical way to use this scale in product work

  1. 1. Choose the brand or feature color that should behave like your 500 anchor.
  2. 2. Generate the full 50-950 ramp and inspect whether the light steps are usable for backgrounds and the dark steps still feel rich.
  3. 3. Export tokens in the format your team already uses instead of rebuilding the same palette manually in design and code.
  4. 4. Validate key text and surface pairs with the APCA Contrast Checker before rollout.

Need more context?

Read the OKLCH guide before standardizing your palette

The guide explains why OKLCH feels smoother than RGB or HSL, how 50-950 ramps should behave across UI roles, and why export-ready token output matters once the scale leaves the experiment phase.

Read the OKLCH scale guideExplore broader palette directions

Related Tool Paths

Scale Building Workflow

Palette GeneratorStart from a base color idea, then turn it into a full OKLCH ramp.Color WheelReview hue relationships before locking your 50-950 scale.OKLCH Scale GuideRead why OKLCH produces cleaner 50-950 ramps for modern product systems.APCA Contrast CheckerPressure-test the generated steps for readable text and dark surfaces.