Hot Sand

CSS

:root {
  --hot-sand: #ccaa00;
  --hot-sand-rgb: 204 170 0;
  --hot-sand-oklch: oklch(0.746 0.153 94.5);
}

.element {
  color: var(--hot-sand);
  background-color: hsl(50 100% 40%);
  border-color: oklch(0.746 0.153 94.5);
}

Tailwind CSS v4

@theme {
  --color-hot-sand: #ccaa00;
  --color-hot-sand-50: #fff6c4;
  --color-hot-sand-100: #f6e9ae;
  --color-hot-sand-200: #e7d587;
  --color-hot-sand-300: #ceb753;
  --color-hot-sand-400: #bc9c00;
  --color-hot-sand-500: #a78200;
  --color-hot-sand-600: #8d6e00;
  --color-hot-sand-700: #715800;
  --color-hot-sand-800: #553f00;
  --color-hot-sand-900: #3b2c00;
  --color-hot-sand-950: #251900;
}

SCSS

$hot-sand: #ccaa00;
$hot-sand-rgb: 204, 170, 0;
$hot-sand-light: mix(#fff, $hot-sand, 20%);
$hot-sand-dark: mix(#000, $hot-sand, 20%);

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