Planet of the Apes

CSS

:root {
  --planet-of-the-apes: #883333;
  --planet-of-the-apes-rgb: 136 51 51;
  --planet-of-the-apes-oklch: oklch(0.442 0.117 23.1);
}

.element {
  color: var(--planet-of-the-apes);
  background-color: hsl(0 45% 37%);
  border-color: oklch(0.442 0.117 23.1);
}

Tailwind CSS v4

@theme {
  --color-planet-of-the-apes: #883333;
  --color-planet-of-the-apes-50: #ffe9e4;
  --color-planet-of-the-apes-100: #ffdad4;
  --color-planet-of-the-apes-200: #ffc2bb;
  --color-planet-of-the-apes-300: #eda099;
  --color-planet-of-the-apes-400: #db827e;
  --color-planet-of-the-apes-500: #c86361;
  --color-planet-of-the-apes-600: #a95552;
  --color-planet-of-the-apes-700: #884441;
  --color-planet-of-the-apes-800: #653030;
  --color-planet-of-the-apes-900: #472121;
  --color-planet-of-the-apes-950: #2e1010;
}

SCSS

$planet-of-the-apes: #883333;
$planet-of-the-apes-rgb: 136, 51, 51;
$planet-of-the-apes-light: mix(#fff, $planet-of-the-apes, 20%);
$planet-of-the-apes-dark: mix(#000, $planet-of-the-apes, 20%);

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