A State of Mint

CSS

:root {
  --a-state-of-mint: #88ffcc;
  --a-state-of-mint-rgb: 136 255 204;
  --a-state-of-mint-oklch: oklch(0.916 0.131 163.9);
}

.element {
  color: var(--a-state-of-mint);
  background-color: hsl(154 100% 77%);
  border-color: oklch(0.916 0.131 163.9);
}

Tailwind CSS v4

@theme {
  --color-a-state-of-mint: #88ffcc;
  --color-a-state-of-mint-50: #d3ffed;
  --color-a-state-of-mint-100: #bff6de;
  --color-a-state-of-mint-200: #9ee7c7;
  --color-a-state-of-mint-300: #70cda8;
  --color-a-state-of-mint-400: #43b689;
  --color-a-state-of-mint-500: #00a06e;
  --color-a-state-of-mint-600: #00875d;
  --color-a-state-of-mint-700: #006d4b;
  --color-a-state-of-mint-800: #005034;
  --color-a-state-of-mint-900: #013823;
  --color-a-state-of-mint-950: #002212;
}

SCSS

$a-state-of-mint: #88ffcc;
$a-state-of-mint-rgb: 136, 255, 204;
$a-state-of-mint-light: mix(#fff, $a-state-of-mint, 20%);
$a-state-of-mint-dark: mix(#000, $a-state-of-mint, 20%);

.element {
  color: $a-state-of-mint;
  box-shadow: 0 0 0 2px rgba($a-state-of-mint, 0.35);
}