Lit

CSS

:root {
  --lit: #fffed8;
  --lit-rgb: 255 254 216;
  --lit-oklch: oklch(0.988 0.049 106);
}

.element {
  color: var(--lit);
  background-color: hsl(58 100% 92%);
  border-color: oklch(0.988 0.049 106);
}

Tailwind CSS v4

@theme {
  --color-lit: #fffed8;
  --color-lit-50: #f6f6e7;
  --color-lit-100: #e9e9d7;
  --color-lit-200: #d6d6be;
  --color-lit-300: #b9ba9d;
  --color-lit-400: #a2a17f;
  --color-lit-500: #8a8962;
  --color-lit-600: #757454;
  --color-lit-700: #5d5c43;
  --color-lit-800: #454330;
  --color-lit-900: #302f20;
  --color-lit-950: #1c1b10;
}

SCSS

$lit: #fffed8;
$lit-rgb: 255, 254, 216;
$lit-light: mix(#fff, $lit, 20%);
$lit-dark: mix(#000, $lit, 20%);

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