Imbued With Mint

CSS

:root {
  --imbued-with-mint: #ceebb2;
  --imbued-with-mint-rgb: 206 235 178;
  --imbued-with-mint-oklch: oklch(0.905 0.081 129.8);
}

.element {
  color: var(--imbued-with-mint);
  background-color: hsl(91 59% 81%);
  border-color: oklch(0.905 0.081 129.8);
}

Tailwind CSS v4

@theme {
  --color-imbued-with-mint: #ceebb2;
  --color-imbued-with-mint-50: #edfbe3;
  --color-imbued-with-mint-100: #deeed2;
  --color-imbued-with-mint-200: #c8dcb8;
  --color-imbued-with-mint-300: #a8c196;
  --color-imbued-with-mint-400: #8fa875;
  --color-imbued-with-mint-500: #749156;
  --color-imbued-with-mint-600: #637b4a;
  --color-imbued-with-mint-700: #4f623a;
  --color-imbued-with-mint-800: #3a4829;
  --color-imbued-with-mint-900: #28321b;
  --color-imbued-with-mint-950: #161e0c;
}

SCSS

$imbued-with-mint: #ceebb2;
$imbued-with-mint-rgb: 206, 235, 178;
$imbued-with-mint-light: mix(#fff, $imbued-with-mint, 20%);
$imbued-with-mint-dark: mix(#000, $imbued-with-mint, 20%);

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