Force of Nature

CSS

:root {
  --force-of-nature: #d5ce69;
  --force-of-nature-rgb: 213 206 105;
  --force-of-nature-oklch: oklch(0.836 0.124 105.2);
}

.element {
  color: var(--force-of-nature);
  background-color: hsl(56 56% 62%);
  border-color: oklch(0.836 0.124 105.2);
}

Tailwind CSS v4

@theme {
  --color-force-of-nature: #d5ce69;
  --color-force-of-nature-50: #f8f8d0;
  --color-force-of-nature-100: #ecebbc;
  --color-force-of-nature-200: #dad99b;
  --color-force-of-nature-300: #bebc6f;
  --color-force-of-nature-400: #a9a243;
  --color-force-of-nature-500: #938a00;
  --color-force-of-nature-600: #7c7500;
  --color-force-of-nature-700: #635d02;
  --color-force-of-nature-800: #4a4400;
  --color-force-of-nature-900: #342f01;
  --color-force-of-nature-950: #1f1b00;
}

SCSS

$force-of-nature: #d5ce69;
$force-of-nature-rgb: 213, 206, 105;
$force-of-nature-light: mix(#fff, $force-of-nature, 20%);
$force-of-nature-dark: mix(#000, $force-of-nature, 20%);

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