Fading Ember

CSS

:root {
  --fading-ember: #df691e;
  --fading-ember-rgb: 223 105 30;
  --fading-ember-oklch: oklch(0.653 0.168 47.4);
}

.element {
  color: var(--fading-ember);
  background-color: hsl(23 76% 50%);
  border-color: oklch(0.653 0.168 47.4);
}

Tailwind CSS v4

@theme {
  --color-fading-ember: #df691e;
  --color-fading-ember-50: #ffe8cb;
  --color-fading-ember-100: #ffd8b7;
  --color-fading-ember-200: #ffbf94;
  --color-fading-ember-300: #fc9c66;
  --color-fading-ember-400: #ec7b3b;
  --color-fading-ember-500: #da5800;
  --color-fading-ember-600: #b84c00;
  --color-fading-ember-700: #943c00;
  --color-fading-ember-800: #6f2a00;
  --color-fading-ember-900: #4e1c01;
  --color-fading-ember-950: #340c00;
}

SCSS

$fading-ember: #df691e;
$fading-ember-rgb: 223, 105, 30;
$fading-ember-light: mix(#fff, $fading-ember, 20%);
$fading-ember-dark: mix(#000, $fading-ember, 20%);

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