Pot of Gold

CSS

:root {
  --pot-of-gold: #f6cd23;
  --pot-of-gold-rgb: 246 205 35;
  --pot-of-gold-oklch: oklch(0.859 0.17 93.6);
}

.element {
  color: var(--pot-of-gold);
  background-color: hsl(48 92% 55%);
  border-color: oklch(0.859 0.17 93.6);
}

Tailwind CSS v4

@theme {
  --color-pot-of-gold: #f6cd23;
  --color-pot-of-gold-50: #fff6be;
  --color-pot-of-gold-100: #f9e8a7;
  --color-pot-of-gold-200: #ead47d;
  --color-pot-of-gold-300: #d2b642;
  --color-pot-of-gold-400: #c09a00;
  --color-pot-of-gold-500: #ac8000;
  --color-pot-of-gold-600: #916c00;
  --color-pot-of-gold-700: #755700;
  --color-pot-of-gold-800: #583e00;
  --color-pot-of-gold-900: #3d2b00;
  --color-pot-of-gold-950: #271800;
}

SCSS

$pot-of-gold: #f6cd23;
$pot-of-gold-rgb: 246, 205, 35;
$pot-of-gold-light: mix(#fff, $pot-of-gold, 20%);
$pot-of-gold-dark: mix(#000, $pot-of-gold, 20%);

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