Groovy Giraffe

CSS

:root {
  --groovy-giraffe: #eeaa11;
  --groovy-giraffe-rgb: 238 170 17;
  --groovy-giraffe-oklch: oklch(0.783 0.16 79.2);
}

.element {
  color: var(--groovy-giraffe);
  background-color: hsl(42 87% 50%);
  border-color: oklch(0.783 0.16 79.2);
}

Tailwind CSS v4

@theme {
  --color-groovy-giraffe: #eeaa11;
  --color-groovy-giraffe-50: #fff1c2;
  --color-groovy-giraffe-100: #ffe3ab;
  --color-groovy-giraffe-200: #f7ce83;
  --color-groovy-giraffe-300: #e1ae4d;
  --color-groovy-giraffe-400: #d09100;
  --color-groovy-giraffe-500: #bd7500;
  --color-groovy-giraffe-600: #9f6300;
  --color-groovy-giraffe-700: #804f00;
  --color-groovy-giraffe-800: #603800;
  --color-groovy-giraffe-900: #432700;
  --color-groovy-giraffe-950: #2b1400;
}

SCSS

$groovy-giraffe: #eeaa11;
$groovy-giraffe-rgb: 238, 170, 17;
$groovy-giraffe-light: mix(#fff, $groovy-giraffe, 20%);
$groovy-giraffe-dark: mix(#000, $groovy-giraffe, 20%);

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