Full of Life

CSS

:root {
  --full-of-life: #de5f2f;
  --full-of-life-rgb: 222 95 47;
  --full-of-life-oklch: oklch(0.639 0.17 39.8);
}

.element {
  color: var(--full-of-life);
  background-color: hsl(16 73% 53%);
  border-color: oklch(0.639 0.17 39.8);
}

Tailwind CSS v4

@theme {
  --color-full-of-life: #de5f2f;
  --color-full-of-life-50: #ffe6d0;
  --color-full-of-life-100: #ffd6bc;
  --color-full-of-life-200: #ffbc9b;
  --color-full-of-life-300: #ff9870;
  --color-full-of-life-400: #f0764a;
  --color-full-of-life-500: #de5213;
  --color-full-of-life-600: #bc4615;
  --color-full-of-life-700: #973811;
  --color-full-of-life-800: #71270e;
  --color-full-of-life-900: #501a09;
  --color-full-of-life-950: #350900;
}

SCSS

$full-of-life: #de5f2f;
$full-of-life-rgb: 222, 95, 47;
$full-of-life-light: mix(#fff, $full-of-life, 20%);
$full-of-life-dark: mix(#000, $full-of-life, 20%);

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