Almost Aloe

CSS

:root {
  --almost-aloe: #bfe5b1;
  --almost-aloe-rgb: 191 229 177;
  --almost-aloe-oklch: oklch(0.881 0.08 137.4);
}

.element {
  color: var(--almost-aloe);
  background-color: hsl(104 50% 80%);
  border-color: oklch(0.881 0.08 137.4);
}

Tailwind CSS v4

@theme {
  --color-almost-aloe: #bfe5b1;
  --color-almost-aloe-50: #eafbe5;
  --color-almost-aloe-100: #dbefd5;
  --color-almost-aloe-200: #c3ddbc;
  --color-almost-aloe-300: #a3c29b;
  --color-almost-aloe-400: #88aa7b;
  --color-almost-aloe-500: #6c935d;
  --color-almost-aloe-600: #5c7c50;
  --color-almost-aloe-700: #49633f;
  --color-almost-aloe-800: #36492c;
  --color-almost-aloe-900: #25321e;
  --color-almost-aloe-950: #131e0e;
}

SCSS

$almost-aloe: #bfe5b1;
$almost-aloe-rgb: 191, 229, 177;
$almost-aloe-light: mix(#fff, $almost-aloe, 20%);
$almost-aloe-dark: mix(#000, $almost-aloe, 20%);

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