Color Scales

Orange scale

100

200

300

400

500

600

700

800

900

Step	HEX	OKLCH	Usage
50	`#FFF7ED`	`oklch(96% 0.03 60)`	Backgrounds, hover states
100	`#FFEDD5`	`oklch(92% 0.06 60)`	Subtle accents, badges
200	`#FED7AA`	`oklch(86% 0.11 58)`	Borders, decoration
300	`#FDBA74`	`oklch(78% 0.15 55)`	Icons, illustrations
400	`#FB923C`	`oklch(72% 0.18 50)`	Dark-mode primary
500	`#FF8500`	`oklch(68% 0.19 47)`	Brand Primary
600	`#EA6D00`	`oklch(62% 0.18 44)`	Hover state primary
700	`#C2570A`	`oklch(54% 0.16 42)`	Text (AA compliant)
800	`#9A4509`	`oklch(44% 0.13 40)`	Text (AAA compliant)
900	`#7C3A0A`	`oklch(34% 0.10 38)`	Strong accent

Warm Gray scale

100

200

300

400

500

600

700

800

900

Step	HEX	OKLCH	Usage
50	`#F9F8F6`	`oklch(98% 0.005 50)`	Page background, Brand Light
100	`#F0EDEA`	`oklch(95% 0.008 50)`	Card background
200	`#E0DBD6`	`oklch(89% 0.011 50)`	Borders (standard)
300	`#C4BDB7`	`oklch(80% 0.012 50)`	Borders (strong), decoration
400	`#A69E97`	`oklch(70% 0.013 50)`	Disabled text
500	`#887F78`	`oklch(60% 0.013 50)`	Secondary text
600	`#6B635C`	`oklch(50% 0.013 50)`	Body text (AA)
700	`#524B45`	`oklch(40% 0.012 50)`	Strong text (AAA)
800	`#3A3430`	`oklch(30% 0.011 50)`	Headlines, Brand Dark
900	`#231F1C`	`oklch(20% 0.009 50)`	Maximum contrast, Brand Black

Neutral Gray scale

Pure neutral grays (saturation 0%) — proven in print materials (raster lines, technical elements, accent bars). Reference values from the notepads.

100

200

300

400

500

600

700

800

900

Step	HEX	OKLCH	Usage
50	`#F7F7F7`	`oklch(97% 0 0)`	Light backgrounds
100	`#EBEBEB`	`oklch(93% 0 0)`	Subtle dividers
200	`#D1D1D1`	`oklch(85% 0 0)`	Print raster, guidelines
300	`#B8B8B8`	`oklch(77% 0 0)`	Borders, decoration
400	`#9E9E9E`	`oklch(68% 0 0)`	Disabled elements
500	`#7F7F7F`	`oklch(58% 0 0)`	Print accent bars, midtones
600	`#666666`	`oklch(48% 0 0)`	Secondary text (print)
700	`#4D4D4D`	`oklch(38% 0 0)`	Text (print)
800	`#333333`	`oklch(28% 0 0)`	Headlines (print)
900	`#1C1C1C`	`oklch(18% 0 0)`	Maximum contrast

Warm Gray vs. Neutral Gray

Warm Gray (hue ~28°, saturation ~6–14%) for digital interfaces and brand surfaces with emotional warmth. Neutral Gray (saturation 0%) for print rasters, technical drawings, and matter-of-fact presentations.

CSS Custom Properties

HEX (print authority, tooling fallback)

css

:root {
  --orange-50: #FFF7ED;   --orange-100: #FFEDD5;
  --orange-200: #FED7AA;  --orange-300: #FDBA74;
  --orange-400: #FB923C;  --orange-500: #FF8500;
  --orange-600: #EA6D00;  --orange-700: #C2570A;
  --orange-800: #9A4509;  --orange-900: #7C3A0A;

  --warm-50: #F9F8F6;     --warm-100: #F0EDEA;
  --warm-200: #E0DBD6;    --warm-300: #C4BDB7;
  --warm-400: #A69E97;    --warm-500: #887F78;
  --warm-600: #6B635C;    --warm-700: #524B45;
  --warm-800: #3A3430;    --warm-900: #231F1C;

  --gray-50: #F7F7F7;     --gray-100: #EBEBEB;
  --gray-200: #D1D1D1;    --gray-300: #B8B8B8;
  --gray-400: #9E9E9E;    --gray-500: #7F7F7F;
  --gray-600: #666666;    --gray-700: #4D4D4D;
  --gray-800: #333333;    --gray-900: #1C1C1C;
}

OKLCH (web/display authority)

css

:root {
  /* Orange scale — hue 47°, chroma anchor 0.19 at -500 */
  --orange-50-oklch:  oklch(96% 0.03 60);
  --orange-100-oklch: oklch(92% 0.06 60);
  --orange-200-oklch: oklch(86% 0.11 58);
  --orange-300-oklch: oklch(78% 0.15 55);
  --orange-400-oklch: oklch(72% 0.18 50);
  --orange-500-oklch: oklch(68% 0.19 47);
  --orange-600-oklch: oklch(62% 0.18 44);
  --orange-700-oklch: oklch(54% 0.16 42);
  --orange-800-oklch: oklch(44% 0.13 40);
  --orange-900-oklch: oklch(34% 0.10 38);

  /* Warm Gray scale — hue 50°, chroma ~0.01 (warm-tinted) */
  --warm-50-oklch:  oklch(98% 0.005 50);
  --warm-100-oklch: oklch(95% 0.008 50);
  --warm-200-oklch: oklch(89% 0.011 50);
  --warm-300-oklch: oklch(80% 0.012 50);
  --warm-400-oklch: oklch(70% 0.013 50);
  --warm-500-oklch: oklch(60% 0.013 50);
  --warm-600-oklch: oklch(50% 0.013 50);
  --warm-700-oklch: oklch(40% 0.012 50);
  --warm-800-oklch: oklch(30% 0.011 50);
  --warm-900-oklch: oklch(20% 0.009 50);

  /* Neutral Gray scale — chroma 0 (achromatic) */
  --gray-50-oklch:  oklch(97% 0 0);
  --gray-100-oklch: oklch(93% 0 0);
  --gray-200-oklch: oklch(85% 0 0);
  --gray-300-oklch: oklch(77% 0 0);
  --gray-400-oklch: oklch(68% 0 0);
  --gray-500-oklch: oklch(58% 0 0);
  --gray-600-oklch: oklch(48% 0 0);
  --gray-700-oklch: oklch(38% 0 0);
  --gray-800-oklch: oklch(28% 0 0);
  --gray-900-oklch: oklch(18% 0 0);
}

Why both notations?

HEX remains authoritative for print shops, Pantone mapping, SVG logos, and any tooling that doesn't yet understand OKLCH (legacy Adobe Illustrator, Sketch plugins, older CI pipelines). OKLCH gives the correct perceptive impression on modern displays — especially on P3 and HDR hardware. The brand guide carries both in parallel; the methodology documentation explains when each takes precedence.

Color Scales ​

Orange scale ​

Warm Gray scale ​

Neutral Gray scale ​

CSS Custom Properties ​

HEX (print authority, tooling fallback) ​

OKLCH (web/display authority) ​