Citrus Lime

CSS

:root {
  --citrus-lime: #c3dc68;
  --citrus-lime-rgb: 195 220 104;
  --citrus-lime-oklch: oklch(0.852 0.145 119.7);
}

.element {
  color: var(--citrus-lime);
  background-color: hsl(73 62% 64%);
  border-color: oklch(0.852 0.145 119.7);
}

Tailwind CSS v4

@theme {
  --color-citrus-lime: #c3dc68;
  --color-citrus-lime-50: #eefccf;
  --color-citrus-lime-100: #e0f0ba;
  --color-citrus-lime-200: #cade98;
  --color-citrus-lime-300: #abc36c;
  --color-citrus-lime-400: #94aa3b;
  --color-citrus-lime-500: #7b9200;
  --color-citrus-lime-600: #687c00;
  --color-citrus-lime-700: #536300;
  --color-citrus-lime-800: #3f4800;
  --color-citrus-lime-900: #2b3200;
  --color-citrus-lime-950: #191e00;
}

SCSS

$citrus-lime: #c3dc68;
$citrus-lime-rgb: 195, 220, 104;
$citrus-lime-light: mix(#fff, $citrus-lime, 20%);
$citrus-lime-dark: mix(#000, $citrus-lime, 20%);

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