Gone Giddy

CSS

:root {
  --gone-giddy: #d9c737;
  --gone-giddy-rgb: 217 199 55;
  --gone-giddy-oklch: oklch(0.821 0.156 101.9);
}

.element {
  color: var(--gone-giddy);
  background-color: hsl(53 68% 53%);
  border-color: oklch(0.821 0.156 101.9);
}

Tailwind CSS v4

@theme {
  --color-gone-giddy: #d9c737;
  --color-gone-giddy-50: #fcf8c5;
  --color-gone-giddy-100: #f0ebaf;
  --color-gone-giddy-200: #dfd888;
  --color-gone-giddy-300: #c5bb55;
  --color-gone-giddy-400: #b1a000;
  --color-gone-giddy-500: #9c8700;
  --color-gone-giddy-600: #847200;
  --color-gone-giddy-700: #6a5c00;
  --color-gone-giddy-800: #4f4200;
  --color-gone-giddy-900: #372e00;
  --color-gone-giddy-950: #221a00;
}

SCSS

$gone-giddy: #d9c737;
$gone-giddy-rgb: 217, 199, 55;
$gone-giddy-light: mix(#fff, $gone-giddy, 20%);
$gone-giddy-dark: mix(#000, $gone-giddy, 20%);

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