Bells and Whistles Gold

CSS

:root {
  --bells-and-whistles-gold: #ede3a1;
  --bells-and-whistles-gold-rgb: 237 227 161;
  --bells-and-whistles-gold-oklch: oklch(0.908 0.085 100.6);
}

.element {
  color: var(--bells-and-whistles-gold);
  background-color: hsl(52 68% 78%);
  border-color: oklch(0.908 0.085 100.6);
}

Tailwind CSS v4

@theme {
  --color-bells-and-whistles-gold: #ede3a1;
  --color-bells-and-whistles-gold-50: #f9f7db;
  --color-bells-and-whistles-gold-100: #edeac9;
  --color-bells-and-whistles-gold-200: #dbd6ad;
  --color-bells-and-whistles-gold-300: #bfba87;
  --color-bells-and-whistles-gold-400: #a9a064;
  --color-bells-and-whistles-gold-500: #938840;
  --color-bells-and-whistles-gold-600: #7c7337;
  --color-bells-and-whistles-gold-700: #635c2c;
  --color-bells-and-whistles-gold-800: #4a431e;
  --color-bells-and-whistles-gold-900: #332e14;
  --color-bells-and-whistles-gold-950: #1f1b06;
}

SCSS

$bells-and-whistles-gold: #ede3a1;
$bells-and-whistles-gold-rgb: 237, 227, 161;
$bells-and-whistles-gold-light: mix(#fff, $bells-and-whistles-gold, 20%);
$bells-and-whistles-gold-dark: mix(#000, $bells-and-whistles-gold, 20%);

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