Pursuit of Happiness

CSS

:root {
  --pursuit-of-happiness: #f1d260;
  --pursuit-of-happiness-rgb: 241 210 96;
  --pursuit-of-happiness-oklch: oklch(0.868 0.137 94.2);
}

.element {
  color: var(--pursuit-of-happiness);
  background-color: hsl(47 84% 66%);
  border-color: oklch(0.868 0.137 94.2);
}

Tailwind CSS v4

@theme {
  --color-pursuit-of-happiness: #f1d260;
  --color-pursuit-of-happiness-50: #fff6ca;
  --color-pursuit-of-happiness-100: #f5e9b5;
  --color-pursuit-of-happiness-200: #e5d591;
  --color-pursuit-of-happiness-300: #ccb761;
  --color-pursuit-of-happiness-400: #b99c2b;
  --color-pursuit-of-happiness-500: #a48300;
  --color-pursuit-of-happiness-600: #8b6f00;
  --color-pursuit-of-happiness-700: #6f5800;
  --color-pursuit-of-happiness-800: #534000;
  --color-pursuit-of-happiness-900: #3a2c00;
  --color-pursuit-of-happiness-950: #241900;
}

SCSS

$pursuit-of-happiness: #f1d260;
$pursuit-of-happiness-rgb: 241, 210, 96;
$pursuit-of-happiness-light: mix(#fff, $pursuit-of-happiness, 20%);
$pursuit-of-happiness-dark: mix(#000, $pursuit-of-happiness, 20%);

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