Sour Face

CSS

:root {
  --sour-face: #adc979;
  --sour-face-rgb: 173 201 121;
  --sour-face-oklch: oklch(0.796 0.11 124.6);
}

.element {
  color: var(--sour-face);
  background-color: hsl(81 43% 63%);
  border-color: oklch(0.796 0.11 124.6);
}

Tailwind CSS v4

@theme {
  --color-sour-face: #adc979;
  --color-sour-face-50: #edfcda;
  --color-sour-face-100: #deefc8;
  --color-sour-face-200: #c8ddab;
  --color-sour-face-300: #a9c285;
  --color-sour-face-400: #90aa5f;
  --color-sour-face-500: #769239;
  --color-sour-face-600: #647c32;
  --color-sour-face-700: #506328;
  --color-sour-face-800: #3c4819;
  --color-sour-face-900: #293210;
  --color-sour-face-950: #171e04;
}

SCSS

$sour-face: #adc979;
$sour-face-rgb: 173, 201, 121;
$sour-face-light: mix(#fff, $sour-face, 20%);
$sour-face-dark: mix(#000, $sour-face, 20%);

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