Dark Citron

CSS

:root {
  --dark-citron: #aabb00;
  --dark-citron-rgb: 170 187 0;
  --dark-citron-oklch: oklch(0.753 0.172 116.1);
}

.element {
  color: var(--dark-citron);
  background-color: hsl(65 100% 37%);
  border-color: oklch(0.753 0.172 116.1);
}

Tailwind CSS v4

@theme {
  --color-dark-citron: #aabb00;
  --color-dark-citron-50: #f0fdc5;
  --color-dark-citron-100: #e2f0af;
  --color-dark-citron-200: #cddf88;
  --color-dark-citron-300: #afc355;
  --color-dark-citron-400: #9aaa00;
  --color-dark-citron-500: #829100;
  --color-dark-citron-600: #6e7b00;
  --color-dark-citron-700: #586300;
  --color-dark-citron-800: #424800;
  --color-dark-citron-900: #2e3200;
  --color-dark-citron-950: #1b1d00;
}

SCSS

$dark-citron: #aabb00;
$dark-citron-rgb: 170, 187, 0;
$dark-citron-light: mix(#fff, $dark-citron, 20%);
$dark-citron-dark: mix(#000, $dark-citron, 20%);

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