DESIGN SYSTEMS & CODE

Accessible SaaS Color Palette Generator

Enter one brand color and get a full 50-950 shade ramp, plus a matching low-saturation neutral scale — every shade computed live with its own WCAG contrast ratio and a recommended text color, not a fixed lookup table.

Brand Ramp

50

#faf7f5

100

#f8ede7

200

#f6dacb

300

#f7bb9c

400

#fb9660

500

#ff6c1f

600

#ec5404

700

#bd480a

800

#903b0e

900

#5c2a0f

950

#361b0d

Neutral Ramp (auto-desaturated, same hue)

50

#f8f7f7

100

#f0efef

200

#e2e0df

300

#cdc8c6

400

#b4aba7

500

#988c86

600

#81756f

700

#6b615c

800

#544d4a

900

#393532

950

#232120

:root {
  --brand-50: #faf7f5;
  --brand-100: #f8ede7;
  --brand-200: #f6dacb;
  --brand-300: #f7bb9c;
  --brand-400: #fb9660;
  --brand-500: #ff6c1f;
  --brand-600: #ec5404;
  --brand-700: #bd480a;
  --brand-800: #903b0e;
  --brand-900: #5c2a0f;
  --brand-950: #361b0d;
}
Color System Guide

How This Ramp Is Actually Built

This isn't a gradient from white to black tinted with your hue - that produces muddy, unusable steps in the middle. It follows the same shape production design systems use.

1. A Fixed Lightness Curve

Each of the 11 stops (50 through 950) targets a specific HSL lightness percentage - 97% at 50, down to 13% at 950 - independent of your input color, so every palette this tool generates has the same tonal spacing.

2. A Saturation Taper

Your base color's saturation is preserved through the midtones (400-600) and multiplied down toward the extremes (as low as 35% of the original at step 50), which is what keeps step 50 from looking like plain off-white and step 950 from looking like plain black.

3. Constant Hue

Hue never shifts between steps. Some production systems apply small per-step hue rotations as an artistic "warmth correction" - there's no single correct formula for that, so this tool keeps hue exact and predictable instead of faking a technique it can't rigorously justify.

Why Every Swatch Shows a Recommended Text Color

Each shade's number label is rendered in whichever of pure white or pure black scores a higher real WCAG 2.1 contrast ratio against that exact shade - computed the same way our WCAG & APCA Contrast Checker does. That crossover point (usually somewhere around step 400-500 for a mid-saturation color) is the same point you should flip text color on in your own UI when using that shade as a background.

Frequently Asked Questions

Why does my neutral ramp still look slightly tinted?

By design - it caps saturation at 8% of your base hue rather than going to 0%, which is how most modern design systems (Tailwind's slate/zinc, Radix's grays) build a neutral scale that still feels cohesive with the brand color instead of a flat gray.

Is step 500 exactly my input color?

Step 500 uses your input color's hue and saturation, but its lightness is set by the fixed curve (56%) rather than your input's raw lightness - this keeps every generated palette's midtone at a consistent, accessible lightness regardless of how light or dark the color you typed in was.

Are the contrast ratios shown here real WCAG numbers?

Yes - the exact same relative-luminance formula from WCAG 2.1 Success Criterion 1.4.3, computed live for every shade against both pure white and pure black.

UI Pirate Ecosystem

Suggested Tools for Your Stack

Explore related utilities in this workflow or discover cross-category tools.

View All Tools →