Lemon Appeal

CSS

:root {
  --lemon-appeal: #efe4ae;
  --lemon-appeal-rgb: 239 228 174;
  --lemon-appeal-oklch: oklch(0.915 0.071 97.9);
}

.element {
  color: var(--lemon-appeal);
  background-color: hsl(50 67% 81%);
  border-color: oklch(0.915 0.071 97.9);
}

Tailwind CSS v4

@theme {
  --color-lemon-appeal: #efe4ae;
  --color-lemon-appeal-50: #faf6df;
  --color-lemon-appeal-100: #ede9ce;
  --color-lemon-appeal-200: #dbd6b3;
  --color-lemon-appeal-300: #bfb98f;
  --color-lemon-appeal-400: #a99f6f;
  --color-lemon-appeal-500: #93874e;
  --color-lemon-appeal-600: #7c7243;
  --color-lemon-appeal-700: #635b35;
  --color-lemon-appeal-800: #4a4225;
  --color-lemon-appeal-900: #332e19;
  --color-lemon-appeal-950: #1f1b09;
}

SCSS

$lemon-appeal: #efe4ae;
$lemon-appeal-rgb: 239, 228, 174;
$lemon-appeal-light: mix(#fff, $lemon-appeal, 20%);
$lemon-appeal-dark: mix(#000, $lemon-appeal, 20%);

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