Dark Shamrock

CSS

:root {
  --dark-shamrock: #33cc99;
  --dark-shamrock-rgb: 51 204 153;
  --dark-shamrock-oklch: oklch(0.755 0.145 165.4);
}

.element {
  color: var(--dark-shamrock);
  background-color: hsl(160 60% 50%);
  border-color: oklch(0.755 0.145 165.4);
}

Tailwind CSS v4

@theme {
  --color-dark-shamrock: #33cc99;
  --color-dark-shamrock-50: #ceffed;
  --color-dark-shamrock-100: #b9f8de;
  --color-dark-shamrock-200: #95e9c8;
  --color-dark-shamrock-300: #62cfa8;
  --color-dark-shamrock-400: #25b989;
  --color-dark-shamrock-500: #00a36e;
  --color-dark-shamrock-600: #008a5d;
  --color-dark-shamrock-700: #006e4b;
  --color-dark-shamrock-800: #005134;
  --color-dark-shamrock-900: #003923;
  --color-dark-shamrock-950: #002312;
}

SCSS

$dark-shamrock: #33cc99;
$dark-shamrock-rgb: 51, 204, 153;
$dark-shamrock-light: mix(#fff, $dark-shamrock, 20%);
$dark-shamrock-dark: mix(#000, $dark-shamrock, 20%);

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