Welsh Onion

CSS

:root {
  --welsh-onion: #22bb66;
  --welsh-onion-rgb: 34 187 102;
  --welsh-onion-oklch: oklch(0.698 0.173 152.5);
}

.element {
  color: var(--welsh-onion);
  background-color: hsl(147 69% 43%);
  border-color: oklch(0.698 0.173 152.5);
}

Tailwind CSS v4

@theme {
  --color-welsh-onion: #22bb66;
  --color-welsh-onion-50: #cfffdf;
  --color-welsh-onion-100: #bbface;
  --color-welsh-onion-200: #97eab3;
  --color-welsh-onion-300: #66d18f;
  --color-welsh-onion-400: #33bb6a;
  --color-welsh-onion-500: #00a448;
  --color-welsh-onion-600: #008b3e;
  --color-welsh-onion-700: #006f31;
  --color-welsh-onion-800: #00521f;
  --color-welsh-onion-900: #003914;
  --color-welsh-onion-950: #002306;
}

SCSS

$welsh-onion: #22bb66;
$welsh-onion-rgb: 34, 187, 102;
$welsh-onion-light: mix(#fff, $welsh-onion, 20%);
$welsh-onion-dark: mix(#000, $welsh-onion, 20%);

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