Home / Color tools / Color scale generator

Color scale generator

One base color in, ten steps from 50 to 900 out. Step 500 is your base color itself, the rest follow one lightness curve, and every step carries its contrast.

Base color

Scale

On the right: the contrast of white and of black text on each swatch. Anything clearing 4.5:1 is marked.

CSS variables

:root {
  --brand-50: #b8d7d3;
  --brand-100: #acd4cf;
  --brand-200: #8ccbc3;
  --brand-300: #64c0b5;
  --brand-400: #3fb2a4;
  --brand-500: #2f8f83;
  --brand-600: #257067;
  --brand-700: #1b514a;
  --brand-800: #12322e;
  --brand-900: #071412;
}

Tailwind config

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#b8d7d3',
          100: '#acd4cf',
          200: '#8ccbc3',
          300: '#64c0b5',
          400: '#3fb2a4',
          500: '#2f8f83',
          600: '#257067',
          700: '#1b514a',
          800: '#12322e',
          900: '#071412',
        },
      },
    },
  },
};

How the scale is derived

Hue stays put; saturation shifts slightly per step. The light end (50 and 100) drops a little or those tints turn pink; the dark end (800 and 900) also eases off so it does not go muddy. Middle steps keep the base saturation.

Lightness follows a fixed curve scaled around step 500, so 500 lands exactly on the base color lightness. A brighter base raises the whole scale and flattens it somewhat, instead of forcing the base into a fixed 500.

The two halves scale independently: the light half is bounded by 97, the dark half by 3. With a very bright base the light half flattens (white cannot get whiter) while the dark half keeps its full spread, and the reverse holds too. So neighbouring steps do crowd together at the extremes, which is the boundary at work, not an error.

Primaries from the library, scaled

Three primaries run through the same rules. Every number is computed at build time, so you can reproduce it in the tool above.

Primary	50	100	200	300	400	500	600	700	800	900
Inkfield Teal	`#b8d7d3`	`#acd4cf`	`#8ccbc3`	`#64c0b5`	`#3fb2a4`	`#2f8f83`	`#257067`	`#1b514a`	`#12322e`	`#071412`
Warm Orange Isle	`#f0e5de`	`#eedcd1`	`#e7c5af`	`#e0a783`	`#dd8853`	`#d96a24`	`#b6591e`	`#92481a`	`#6e3715`	`#4a2610`
Still Lake Blue	`#eaeef7`	`#dde4f5`	`#bacbef`	`#8ba9ea`	`#5886eb`	`#2563eb`	`#1350d4`	`#1242ad`	`#103586`	`#0e275f`

Test in the contrast checker →Dark mode converter →Color tools →