Honey and Thyme

CSS

:root {
  --honey-and-thyme: #aaaa00;
  --honey-and-thyme-rgb: 170 170 0;
  --honey-and-thyme-oklch: oklch(0.714 0.156 109.8);
}

.element {
  color: var(--honey-and-thyme);
  background-color: hsl(60 100% 33%);
  border-color: oklch(0.714 0.156 109.8);
}

Tailwind CSS v4

@theme {
  --color-honey-and-thyme: #aaaa00;
  --color-honey-and-thyme-50: #f6fac7;
  --color-honey-and-thyme-100: #e9eeb2;
  --color-honey-and-thyme-200: #d6db8c;
  --color-honey-and-thyme-300: #babf5b;
  --color-honey-and-thyme-400: #a5a515;
  --color-honey-and-thyme-500: #8e8d00;
  --color-honey-and-thyme-600: #787700;
  --color-honey-and-thyme-700: #605f00;
  --color-honey-and-thyme-800: #494500;
  --color-honey-and-thyme-900: #323000;
  --color-honey-and-thyme-950: #1e1c00;
}

SCSS

$honey-and-thyme: #aaaa00;
$honey-and-thyme-rgb: 170, 170, 0;
$honey-and-thyme-light: mix(#fff, $honey-and-thyme, 20%);
$honey-and-thyme-dark: mix(#000, $honey-and-thyme, 20%);

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