Fading Torch

CSS

:root {
  --fading-torch: #f69a54;
  --fading-torch-rgb: 246 154 84;
  --fading-torch-oklch: oklch(0.767 0.139 56);
}

.element {
  color: var(--fading-torch);
  background-color: hsl(26 90% 65%);
  border-color: oklch(0.767 0.139 56);
}

Tailwind CSS v4

@theme {
  --color-fading-torch: #f69a54;
  --color-fading-torch-50: #ffeccf;
  --color-fading-torch-100: #ffddbb;
  --color-fading-torch-200: #ffc699;
  --color-fading-torch-300: #eda56d;
  --color-fading-torch-400: #dc8744;
  --color-fading-torch-500: #c96800;
  --color-fading-torch-600: #aa5906;
  --color-fading-torch-700: #894707;
  --color-fading-torch-800: #663206;
  --color-fading-torch-900: #482205;
  --color-fading-torch-950: #2f1100;
}

SCSS

$fading-torch: #f69a54;
$fading-torch-rgb: 246, 154, 84;
$fading-torch-light: mix(#fff, $fading-torch, 20%);
$fading-torch-dark: mix(#000, $fading-torch, 20%);

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