Burning Steppes

CSS

:root {
  --burning-steppes: #742100;
  --burning-steppes-rgb: 116 33 0;
  --burning-steppes-oklch: oklch(0.377 0.122 38.4);
}

.element {
  color: var(--burning-steppes);
  background-color: hsl(17 100% 23%);
  border-color: oklch(0.377 0.122 38.4);
}

Tailwind CSS v4

@theme {
  --color-burning-steppes: #742100;
  --color-burning-steppes-50: #ffeadb;
  --color-burning-steppes-100: #ffdbc9;
  --color-burning-steppes-200: #ffc3ad;
  --color-burning-steppes-300: #eea287;
  --color-burning-steppes-400: #dc8468;
  --color-burning-steppes-500: #c96646;
  --color-burning-steppes-600: #aa573c;
  --color-burning-steppes-700: #884530;
  --color-burning-steppes-800: #663123;
  --color-burning-steppes-900: #472117;
  --color-burning-steppes-950: #2e1008;
}

SCSS

$burning-steppes: #742100;
$burning-steppes-rgb: 116, 33, 0;
$burning-steppes-light: mix(#fff, $burning-steppes, 20%);
$burning-steppes-dark: mix(#000, $burning-steppes, 20%);

.element {
  color: $burning-steppes;
  box-shadow: 0 0 0 2px rgba($burning-steppes, 0.35);
}