Sunning Deck

CSS

:root {
  --sunning-deck: #e8d7b1;
  --sunning-deck-rgb: 232 215 177;
  --sunning-deck-oklch: oklch(0.883 0.054 86.7);
}

.element {
  color: var(--sunning-deck);
  background-color: hsl(41 54% 80%);
  border-color: oklch(0.883 0.054 86.7);
}

Tailwind CSS v4

@theme {
  --color-sunning-deck: #e8d7b1;
  --color-sunning-deck-50: #fbf5e4;
  --color-sunning-deck-100: #efe7d4;
  --color-sunning-deck-200: #ddd4bb;
  --color-sunning-deck-300: #c2b799;
  --color-sunning-deck-400: #ac9d7b;
  --color-sunning-deck-500: #96845d;
  --color-sunning-deck-600: #7f704f;
  --color-sunning-deck-700: #65593f;
  --color-sunning-deck-800: #4b412d;
  --color-sunning-deck-900: #342d1e;
  --color-sunning-deck-950: #1f1a0e;
}

SCSS

$sunning-deck: #e8d7b1;
$sunning-deck-rgb: 232, 215, 177;
$sunning-deck-light: mix(#fff, $sunning-deck, 20%);
$sunning-deck-dark: mix(#000, $sunning-deck, 20%);

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