Smell the Mint

CSS

:root {
  --smell-the-mint: #bef7cf;
  --smell-the-mint-rgb: 190 247 207;
  --smell-the-mint-oklch: oklch(0.927 0.079 154);
}

.element {
  color: var(--smell-the-mint);
  background-color: hsl(138 78% 86%);
  border-color: oklch(0.927 0.079 154);
}

Tailwind CSS v4

@theme {
  --color-smell-the-mint: #bef7cf;
  --color-smell-the-mint-50: #e4fcec;
  --color-smell-the-mint-100: #d4f0dd;
  --color-smell-the-mint-200: #badfc6;
  --color-smell-the-mint-300: #97c4a7;
  --color-smell-the-mint-400: #79ad89;
  --color-smell-the-mint-500: #5a966e;
  --color-smell-the-mint-600: #4d7f5d;
  --color-smell-the-mint-700: #3d654a;
  --color-smell-the-mint-800: #2d4a35;
  --color-smell-the-mint-900: #1e3424;
  --color-smell-the-mint-950: #0e1f13;
}

SCSS

$smell-the-mint: #bef7cf;
$smell-the-mint-rgb: 190, 247, 207;
$smell-the-mint-light: mix(#fff, $smell-the-mint, 20%);
$smell-the-mint-dark: mix(#000, $smell-the-mint, 20%);

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