Color Palette

Generate a 50–950 shade scale and color harmonies from one color; export CSS variables or Tailwind.

WebRuns in your browser

Pick a color

Base color (hex, rgb(), hsl() or oklch())

Palette name

HarmonyExport as

Shades (50 to 950)

brand-50: #d0f7ff
brand-100: #bfedff
brand-200: #a4d9ff
brand-300: #83beff
brand-400: #5f9fff
brand-500: #3a81f5
brand-600: #2967cb
brand-700: #1b50a7
brand-800: #103e87
brand-900: #062c68
brand-950: #001645

Harmony: complementary

base: #3b82f6
#1: #c17400

Output

:root {
  --brand-50: #d0f7ff;
  --brand-100: #bfedff;
  --brand-200: #a4d9ff;
  --brand-300: #83beff;
  --brand-400: #5f9fff;
  --brand-500: #3a81f5;
  --brand-600: #2967cb;
  --brand-700: #1b50a7;
  --brand-800: #103e87;
  --brand-900: #062c68;
  --brand-950: #001645;
}

About this tool

Start from one color and get a 50 to 950 shade scale, like the ones in Tailwind, plus harmonies such as complementary, analogous, triadic, split-complementary and tetradic. Shades are computed in OKLCH, so each step keeps the hue of your base color and lightness changes evenly.

Copy the scale as CSS custom properties or as a Tailwind @theme block. This page covers the scale and harmonies; the extension adds theme tokens with contrast checks.