Bitter Lemon

CSS

:root {
  --bitter-lemon: #d2db32;
  --bitter-lemon-rgb: 210 219 50;
  --bitter-lemon-oklch: oklch(0.857 0.178 112.8);
}

.element {
  color: var(--bitter-lemon);
  background-color: hsl(63 70% 53%);
  border-color: oklch(0.857 0.178 112.8);
}

Tailwind CSS v4

@theme {
  --color-bitter-lemon: #d2db32;
  --color-bitter-lemon-50: #f3fcc2;
  --color-bitter-lemon-100: #e6f0ab;
  --color-bitter-lemon-200: #d2dd83;
  --color-bitter-lemon-300: #b5c24b;
  --color-bitter-lemon-400: #a1a800;
  --color-bitter-lemon-500: #8a8f00;
  --color-bitter-lemon-600: #747900;
  --color-bitter-lemon-700: #5d6100;
  --color-bitter-lemon-800: #464600;
  --color-bitter-lemon-900: #313100;
  --color-bitter-lemon-950: #1d1d00;
}

SCSS

$bitter-lemon: #d2db32;
$bitter-lemon-rgb: 210, 219, 50;
$bitter-lemon-light: mix(#fff, $bitter-lemon, 20%);
$bitter-lemon-dark: mix(#000, $bitter-lemon, 20%);

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