Buddha Green

CSS

:root {
  --buddha-green: #37b575;
  --buddha-green-rgb: 55 181 117;
  --buddha-green-oklch: oklch(0.689 0.145 156.6);
}

.element {
  color: var(--buddha-green);
  background-color: hsl(150 53% 46%);
  border-color: oklch(0.689 0.145 156.6);
}

Tailwind CSS v4

@theme {
  --color-buddha-green: #37b575;
  --color-buddha-green-50: #d3ffe6;
  --color-buddha-green-100: #bff7d6;
  --color-buddha-green-200: #9ee8bd;
  --color-buddha-green-300: #71ce9c;
  --color-buddha-green-400: #45b77a;
  --color-buddha-green-500: #00a15c;
  --color-buddha-green-600: #00884f;
  --color-buddha-green-700: #006d3f;
  --color-buddha-green-800: #01502a;
  --color-buddha-green-900: #03381d;
  --color-buddha-green-950: #00220d;
}

SCSS

$buddha-green: #37b575;
$buddha-green-rgb: 55, 181, 117;
$buddha-green-light: mix(#fff, $buddha-green, 20%);
$buddha-green-dark: mix(#000, $buddha-green, 20%);

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