Luck of the Irish

CSS

:root {
  --luck-of-the-irish: #547839;
  --luck-of-the-irish-rgb: 84 120 57;
  --luck-of-the-irish-oklch: oklch(0.53 0.1 133.3);
}

.element {
  color: var(--luck-of-the-irish);
  background-color: hsl(94 36% 35%);
  border-color: oklch(0.53 0.1 133.3);
}

Tailwind CSS v4

@theme {
  --color-luck-of-the-irish: #547839;
  --color-luck-of-the-irish-50: #e9fce0;
  --color-luck-of-the-irish-100: #daf0cf;
  --color-luck-of-the-irish-200: #c2deb4;
  --color-luck-of-the-irish-300: #a1c390;
  --color-luck-of-the-irish-400: #87ab6e;
  --color-luck-of-the-irish-500: #6b944d;
  --color-luck-of-the-irish-600: #5b7d42;
  --color-luck-of-the-irish-700: #496434;
  --color-luck-of-the-irish-800: #364923;
  --color-luck-of-the-irish-900: #253318;
  --color-luck-of-the-irish-950: #131f08;
}

SCSS

$luck-of-the-irish: #547839;
$luck-of-the-irish-rgb: 84, 120, 57;
$luck-of-the-irish-light: mix(#fff, $luck-of-the-irish, 20%);
$luck-of-the-irish-dark: mix(#000, $luck-of-the-irish, 20%);

.element {
  color: $luck-of-the-irish;
  box-shadow: 0 0 0 2px rgba($luck-of-the-irish, 0.35);
}