Sonata in Green Minor

CSS

:root {
  --sonata-in-green-minor: #55aa44;
  --sonata-in-green-minor-rgb: 85 170 68;
  --sonata-in-green-minor-oklch: oklch(0.662 0.162 140.4);
}

.element {
  color: var(--sonata-in-green-minor);
  background-color: hsl(110 43% 47%);
  border-color: oklch(0.662 0.162 140.4);
}

Tailwind CSS v4

@theme {
  --color-sonata-in-green-minor: #55aa44;
  --color-sonata-in-green-minor-50: #dbffd7;
  --color-sonata-in-green-minor-100: #c9f6c5;
  --color-sonata-in-green-minor-200: #ace6a6;
  --color-sonata-in-green-minor-300: #85cc7f;
  --color-sonata-in-green-minor-400: #65b555;
  --color-sonata-in-green-minor-500: #3e9e28;
  --color-sonata-in-green-minor-600: #368625;
  --color-sonata-in-green-minor-700: #2b6b1d;
  --color-sonata-in-green-minor-800: #214f0f;
  --color-sonata-in-green-minor-900: #163709;
  --color-sonata-in-green-minor-950: #072100;
}

SCSS

$sonata-in-green-minor: #55aa44;
$sonata-in-green-minor-rgb: 85, 170, 68;
$sonata-in-green-minor-light: mix(#fff, $sonata-in-green-minor, 20%);
$sonata-in-green-minor-dark: mix(#000, $sonata-in-green-minor, 20%);

.element {
  color: $sonata-in-green-minor;
  box-shadow: 0 0 0 2px rgba($sonata-in-green-minor, 0.35);
}