Shiny Shamrock

CSS

:root {
  --shiny-shamrock: #5fa778;
  --shiny-shamrock-rgb: 95 167 120;
  --shiny-shamrock-oklch: oklch(0.668 0.101 154.1);
}

.element {
  color: var(--shiny-shamrock);
  background-color: hsl(141 29% 51%);
  border-color: oklch(0.668 0.101 154.1);
}

Tailwind CSS v4

@theme {
  --color-shiny-shamrock: #5fa778;
  --color-shiny-shamrock-50: #dffee9;
  --color-shiny-shamrock-100: #cef3da;
  --color-shiny-shamrock-200: #b2e2c2;
  --color-shiny-shamrock-300: #8cc7a2;
  --color-shiny-shamrock-400: #6cb083;
  --color-shiny-shamrock-500: #489a67;
  --color-shiny-shamrock-600: #3e8257;
  --color-shiny-shamrock-700: #326846;
  --color-shiny-shamrock-800: #244c31;
  --color-shiny-shamrock-900: #183521;
  --color-shiny-shamrock-950: #092010;
}

SCSS

$shiny-shamrock: #5fa778;
$shiny-shamrock-rgb: 95, 167, 120;
$shiny-shamrock-light: mix(#fff, $shiny-shamrock, 20%);
$shiny-shamrock-dark: mix(#000, $shiny-shamrock, 20%);

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