Illuminating

CSS

:root {
  --illuminating: #eeee77;
  --illuminating-rgb: 238 238 119;
  --illuminating-oklch: oklch(0.925 0.142 108.9);
}

.element {
  color: var(--illuminating);
  background-color: hsl(60 78% 70%);
  border-color: oklch(0.925 0.142 108.9);
}

Tailwind CSS v4

@theme {
  --color-illuminating: #eeee77;
  --color-illuminating-50: #f6facb;
  --color-illuminating-100: #e9edb6;
  --color-illuminating-200: #d6da93;
  --color-illuminating-300: #babe65;
  --color-illuminating-400: #a6a42f;
  --color-illuminating-500: #8f8c00;
  --color-illuminating-600: #797600;
  --color-illuminating-700: #615f00;
  --color-illuminating-800: #494500;
  --color-illuminating-900: #323000;
  --color-illuminating-950: #1e1c00;
}

SCSS

$illuminating: #eeee77;
$illuminating-rgb: 238, 238, 119;
$illuminating-light: mix(#fff, $illuminating, 20%);
$illuminating-dark: mix(#000, $illuminating, 20%);

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