Lemon Curry

CSS

:root {
  --lemon-curry: #cda323;
  --lemon-curry-rgb: 205 163 35;
  --lemon-curry-oklch: oklch(0.734 0.141 88.7);
}

.element {
  color: var(--lemon-curry);
  background-color: hsl(45 71% 47%);
  border-color: oklch(0.734 0.141 88.7);
}

Tailwind CSS v4

@theme {
  --color-lemon-curry: #cda323;
  --color-lemon-curry-50: #fff4c8;
  --color-lemon-curry-100: #fae7b2;
  --color-lemon-curry-200: #ebd28d;
  --color-lemon-curry-300: #d3b45d;
  --color-lemon-curry-400: #c09921;
  --color-lemon-curry-500: #ac7e00;
  --color-lemon-curry-600: #916b00;
  --color-lemon-curry-700: #745600;
  --color-lemon-curry-800: #573e00;
  --color-lemon-curry-900: #3d2a00;
  --color-lemon-curry-950: #271800;
}

SCSS

$lemon-curry: #cda323;
$lemon-curry-rgb: 205, 163, 35;
$lemon-curry-light: mix(#fff, $lemon-curry, 20%);
$lemon-curry-dark: mix(#000, $lemon-curry, 20%);

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