Grass Daisy

CSS

:root {
  --grass-daisy: #ceb02a;
  --grass-daisy-rgb: 206 176 42;
  --grass-daisy-oklch: oklch(0.762 0.145 95.5);
}

.element {
  color: var(--grass-daisy);
  background-color: hsl(49 66% 49%);
  border-color: oklch(0.762 0.145 95.5);
}

Tailwind CSS v4

@theme {
  --color-grass-daisy: #ceb02a;
  --color-grass-daisy-50: #fff6c7;
  --color-grass-daisy-100: #f5e9b1;
  --color-grass-daisy-200: #e5d58c;
  --color-grass-daisy-300: #ccb85b;
  --color-grass-daisy-400: #b99d19;
  --color-grass-daisy-500: #a48300;
  --color-grass-daisy-600: #8b6f00;
  --color-grass-daisy-700: #6f5900;
  --color-grass-daisy-800: #534000;
  --color-grass-daisy-900: #3a2c00;
  --color-grass-daisy-950: #241900;
}

SCSS

$grass-daisy: #ceb02a;
$grass-daisy-rgb: 206, 176, 42;
$grass-daisy-light: mix(#fff, $grass-daisy, 20%);
$grass-daisy-dark: mix(#000, $grass-daisy, 20%);

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