Lemon Drizzle

CSS

:root {
  --lemon-drizzle: #fee483;
  --lemon-drizzle-rgb: 254 228 131;
  --lemon-drizzle-oklch: oklch(0.92 0.121 94.8);
}

.element {
  color: var(--lemon-drizzle);
  background-color: hsl(47 98% 75%);
  border-color: oklch(0.92 0.121 94.8);
}

Tailwind CSS v4

@theme {
  --color-lemon-drizzle: #fee483;
  --color-lemon-drizzle-50: #fff6cf;
  --color-lemon-drizzle-100: #f3e9bb;
  --color-lemon-drizzle-200: #e3d599;
  --color-lemon-drizzle-300: #c9b86e;
  --color-lemon-drizzle-400: #b59d41;
  --color-lemon-drizzle-500: #a08400;
  --color-lemon-drizzle-600: #877000;
  --color-lemon-drizzle-700: #6c5900;
  --color-lemon-drizzle-800: #514100;
  --color-lemon-drizzle-900: #382d01;
  --color-lemon-drizzle-950: #231900;
}

SCSS

$lemon-drizzle: #fee483;
$lemon-drizzle-rgb: 254, 228, 131;
$lemon-drizzle-light: mix(#fff, $lemon-drizzle, 20%);
$lemon-drizzle-dark: mix(#000, $lemon-drizzle, 20%);

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