Red Epiphyllum

CSS

:root {
  --red-epiphyllum: #d00000;
  --red-epiphyllum-rgb: 208 0 0;
  --red-epiphyllum-oklch: oklch(0.539 0.221 29.2);
}

.element {
  color: var(--red-epiphyllum);
  background-color: hsl(0 100% 41%);
  border-color: oklch(0.539 0.221 29.2);
}

Tailwind CSS v4

@theme {
  --color-red-epiphyllum: #d00000;
  --color-red-epiphyllum-50: #ffdecf;
  --color-red-epiphyllum-100: #ffcdbb;
  --color-red-epiphyllum-200: #ffaf99;
  --color-red-epiphyllum-300: #ff866e;
  --color-red-epiphyllum-400: #ff5b4a;
  --color-red-epiphyllum-500: #f61d14;
  --color-red-epiphyllum-600: #d01f16;
  --color-red-epiphyllum-700: #a81a12;
  --color-red-epiphyllum-800: #7d0f10;
  --color-red-epiphyllum-900: #590a0a;
  --color-red-epiphyllum-950: #3c0001;
}

SCSS

$red-epiphyllum: #d00000;
$red-epiphyllum-rgb: 208, 0, 0;
$red-epiphyllum-light: mix(#fff, $red-epiphyllum, 20%);
$red-epiphyllum-dark: mix(#000, $red-epiphyllum, 20%);

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