Orange Keeper

CSS

:root {
  --orange-keeper: #ca5333;
  --orange-keeper-rgb: 202 83 51;
  --orange-keeper-oklch: oklch(0.592 0.159 35.9);
}

.element {
  color: var(--orange-keeper);
  background-color: hsl(13 60% 50%);
  border-color: oklch(0.592 0.159 35.9);
}

Tailwind CSS v4

@theme {
  --color-orange-keeper: #ca5333;
  --color-orange-keeper-50: #ffe6d5;
  --color-orange-keeper-100: #ffd6c2;
  --color-orange-keeper-200: #ffbda3;
  --color-orange-keeper-300: #fd997b;
  --color-orange-keeper-400: #ec7859;
  --color-orange-keeper-500: #da5531;
  --color-orange-keeper-600: #b8492b;
  --color-orange-keeper-700: #943a22;
  --color-orange-keeper-800: #6f2919;
  --color-orange-keeper-900: #4e1b10;
  --color-orange-keeper-950: #330b04;
}

SCSS

$orange-keeper: #ca5333;
$orange-keeper-rgb: 202, 83, 51;
$orange-keeper-light: mix(#fff, $orange-keeper, 20%);
$orange-keeper-dark: mix(#000, $orange-keeper, 20%);

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