Groovy Lemon Pie

CSS

:root {
  --groovy-lemon-pie: #d6be01;
  --groovy-lemon-pie-rgb: 214 190 1;
  --groovy-lemon-pie-oklch: oklch(0.797 0.166 100.1);
}

.element {
  color: var(--groovy-lemon-pie);
  background-color: hsl(53 99% 42%);
  border-color: oklch(0.797 0.166 100.1);
}

Tailwind CSS v4

@theme {
  --color-groovy-lemon-pie: #d6be01;
  --color-groovy-lemon-pie-50: #fef8c1;
  --color-groovy-lemon-pie-100: #f2ebaa;
  --color-groovy-lemon-pie-200: #e2d782;
  --color-groovy-lemon-pie-300: #c8ba4a;
  --color-groovy-lemon-pie-400: #b69f00;
  --color-groovy-lemon-pie-500: #a18500;
  --color-groovy-lemon-pie-600: #887100;
  --color-groovy-lemon-pie-700: #6d5a00;
  --color-groovy-lemon-pie-800: #524100;
  --color-groovy-lemon-pie-900: #392d00;
  --color-groovy-lemon-pie-950: #241a00;
}

SCSS

$groovy-lemon-pie: #d6be01;
$groovy-lemon-pie-rgb: 214, 190, 1;
$groovy-lemon-pie-light: mix(#fff, $groovy-lemon-pie, 20%);
$groovy-lemon-pie-dark: mix(#000, $groovy-lemon-pie, 20%);

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