Your scale

Your colour sits at 600. Click any step to copy it.

Used in the code.

Export

/* Tailwind v4: in your CSS. Use bg-brand-500, text-brand-900... */
@theme {
  --color-brand-50: #f1f7ff;
  --color-brand-100: #e0eeff;
  --color-brand-200: #c1ddff;
  --color-brand-300: #98c8ff;
  --color-brand-400: #65abfa;
  --color-brand-500: #3e8ee3;
  --color-brand-600: #2875c5;
  --color-brand-700: #1d61a6;
  --color-brand-800: #19508a;
  --color-brand-900: #174372;
  --color-brand-950: #09294b;
}

Tailwind v4's own colours are written in OKLCH. HEX works everywhere, including older browsers and design apps.

In use

A common way to use a scale.

New this week

Spring workshop dates are out

Background 50, badge 100, border 200, text 700 and 900, button 600 with a 700 hover.

Book a placeSee dates

Tints, shades and tones

Your colour mixed with white, black and grey in 10% steps.

Tints mixed with white

Shades mixed with black

Tones mixed with grey

Free Color Shades Generator by Hiyaly