The Golden State

CSS

:root {
  --the-golden-state: #e9d2af;
  --the-golden-state-rgb: 233 210 175;
  --the-golden-state-oklch: oklch(0.874 0.053 78.3);
}

.element {
  color: var(--the-golden-state);
  background-color: hsl(36 57% 80%);
  border-color: oklch(0.874 0.053 78.3);
}

Tailwind CSS v4

@theme {
  --color-the-golden-state: #e9d2af;
  --color-the-golden-state-50: #fdf4e5;
  --color-the-golden-state-100: #f1e6d5;
  --color-the-golden-state-200: #e0d2bb;
  --color-the-golden-state-300: #c6b599;
  --color-the-golden-state-400: #b09b7b;
  --color-the-golden-state-500: #9a825e;
  --color-the-golden-state-600: #826e50;
  --color-the-golden-state-700: #685840;
  --color-the-golden-state-800: #4d402e;
  --color-the-golden-state-900: #362c1f;
  --color-the-golden-state-950: #21190f;
}

SCSS

$the-golden-state: #e9d2af;
$the-golden-state-rgb: 233, 210, 175;
$the-golden-state-light: mix(#fff, $the-golden-state, 20%);
$the-golden-state-dark: mix(#000, $the-golden-state, 20%);

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