Spectrum Generator

Generate a harmonious colour scale from any starting colour using perceptually uniform OKLCH.

Base Colour

Colour Name

Input OKLCH

L: 0.659 C: 0.230 H: 35.2°

Closest Step

~400 (L: 0.66)

Generated Scale

50#fff2ee

oklch(0.970 0.016 35.2)

100#ffe0d8

oklch(0.930 0.037 35.2)

200#ffc4b5

oklch(0.870 0.072 35.2)

300#fd987f

oklch(0.780 0.127 35.2)

400Input#FF4400

oklch(0.659 0.230 35.2)

500#d63b09

oklch(0.580 0.198 35.2)

600#a62a02

oklch(0.480 0.166 35.2)

700#7d1d01

oklch(0.390 0.135 35.2)

800#561100

oklch(0.300 0.104 35.2)

900#360700

oklch(0.220 0.076 35.2)

950#190100

oklch(0.140 0.051 35.2)

Scale Preview

Lightest (50)Darkest (950)

Code

CSS

:root {
  /* OKLCH (Modern Browsers) */
  --primary-50: oklch(0.970 0.016 35.2);
  --primary-100: oklch(0.930 0.037 35.2);
  --primary-200: oklch(0.870 0.072 35.2);
  --primary-300: oklch(0.780 0.127 35.2);
  --primary-400: oklch(0.659 0.230 35.2);
  --primary-500: oklch(0.580 0.198 35.2);
  --primary-600: oklch(0.480 0.166 35.2);
  --primary-700: oklch(0.390 0.135 35.2);
  --primary-800: oklch(0.300 0.104 35.2);
  --primary-900: oklch(0.220 0.076 35.2);
  --primary-950: oklch(0.140 0.051 35.2);
}

/* HEX Fallback */
@supports not (color: oklch(0% 0 0)) {
  :root {
  --primary-50: #fff2ee;
  --primary-100: #ffe0d8;
  --primary-200: #ffc4b5;
  --primary-300: #fd987f;
  --primary-400: #FF4400;
  --primary-500: #d63b09;
  --primary-600: #a62a02;
  --primary-700: #7d1d01;
  --primary-800: #561100;
  --primary-900: #360700;
  --primary-950: #190100;
  }
}