That’s My Lime

CSS

:root {
  --that-s-my-lime: #dcd290;
  --that-s-my-lime-rgb: 220 210 144;
  --that-s-my-lime-oklch: oklch(0.857 0.086 100.6);
}

.element {
  color: var(--that-s-my-lime);
  background-color: hsl(52 52% 71%);
  border-color: oklch(0.857 0.086 100.6);
}

Tailwind CSS v4

@theme {
  --color-that-s-my-lime: #dcd290;
  --color-that-s-my-lime-50: #f9f7db;
  --color-that-s-my-lime-100: #edeac9;
  --color-that-s-my-lime-200: #dbd6ac;
  --color-that-s-my-lime-300: #bfba87;
  --color-that-s-my-lime-400: #a9a063;
  --color-that-s-my-lime-500: #93883f;
  --color-that-s-my-lime-600: #7c7337;
  --color-that-s-my-lime-700: #635c2b;
  --color-that-s-my-lime-800: #4a431d;
  --color-that-s-my-lime-900: #332e13;
  --color-that-s-my-lime-950: #1f1b05;
}

SCSS

$that-s-my-lime: #dcd290;
$that-s-my-lime-rgb: 220, 210, 144;
$that-s-my-lime-light: mix(#fff, $that-s-my-lime, 20%);
$that-s-my-lime-dark: mix(#000, $that-s-my-lime, 20%);

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