Lemon Stick

CSS

:root {
  --lemon-stick: #fbf7e0;
  --lemon-stick-rgb: 251 247 224;
  --lemon-stick-oklch: oklch(0.973 0.03 98.9);
}

.element {
  color: var(--lemon-stick);
  background-color: hsl(51 77% 93%);
  border-color: oklch(0.973 0.03 98.9);
}

Tailwind CSS v4

@theme {
  --color-lemon-stick: #fbf7e0;
  --color-lemon-stick-50: #f7f6ec;
  --color-lemon-stick-100: #eae8dd;
  --color-lemon-stick-200: #d7d5c6;
  --color-lemon-stick-300: #bab8a7;
  --color-lemon-stick-400: #a39f8b;
  --color-lemon-stick-500: #8b8770;
  --color-lemon-stick-600: #76725f;
  --color-lemon-stick-700: #5e5b4c;
  --color-lemon-stick-800: #454337;
  --color-lemon-stick-900: #302e25;
  --color-lemon-stick-950: #1c1b14;
}

SCSS

$lemon-stick: #fbf7e0;
$lemon-stick-rgb: 251, 247, 224;
$lemon-stick-light: mix(#fff, $lemon-stick, 20%);
$lemon-stick-dark: mix(#000, $lemon-stick, 20%);

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