Snake Fruit

CSS

:root {
  --snake-fruit: #db2217;
  --snake-fruit-rgb: 219 34 23;
  --snake-fruit-oklch: oklch(0.572 0.218 29.4);
}

.element {
  color: var(--snake-fruit);
  background-color: hsl(3 81% 47%);
  border-color: oklch(0.572 0.218 29.4);
}

Tailwind CSS v4

@theme {
  --color-snake-fruit: #db2217;
  --color-snake-fruit-50: #ffdfcf;
  --color-snake-fruit-100: #ffcdbb;
  --color-snake-fruit-200: #ffb09a;
  --color-snake-fruit-300: #ff876f;
  --color-snake-fruit-400: #ff5d4b;
  --color-snake-fruit-500: #f52317;
  --color-snake-fruit-600: #cf2318;
  --color-snake-fruit-700: #a71c13;
  --color-snake-fruit-800: #7d1111;
  --color-snake-fruit-900: #580b0a;
  --color-snake-fruit-950: #3b0001;
}

SCSS

$snake-fruit: #db2217;
$snake-fruit-rgb: 219, 34, 23;
$snake-fruit-light: mix(#fff, $snake-fruit, 20%);
$snake-fruit-dark: mix(#000, $snake-fruit, 20%);

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