Blaze

CSS

:root {
  --blaze: #fa8c4f;
  --blaze-rgb: 250 140 79;
  --blaze-oklch: oklch(0.748 0.153 48);
}

.element {
  color: var(--blaze);
  background-color: hsl(21 94% 65%);
  border-color: oklch(0.748 0.153 48);
}

Tailwind CSS v4

@theme {
  --color-blaze: #fa8c4f;
  --color-blaze-50: #ffe9cf;
  --color-blaze-100: #ffdabb;
  --color-blaze-200: #ffc199;
  --color-blaze-300: #f69f6d;
  --color-blaze-400: #e67f46;
  --color-blaze-500: #d45f01;
  --color-blaze-600: #b3510a;
  --color-blaze-700: #90400a;
  --color-blaze-800: #6c2d08;
  --color-blaze-900: #4c1f06;
  --color-blaze-950: #320e00;
}

SCSS

$blaze: #fa8c4f;
$blaze-rgb: 250, 140, 79;
$blaze-light: mix(#fff, $blaze, 20%);
$blaze-dark: mix(#000, $blaze, 20%);

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