Sprite Twist

CSS

:root {
  --sprite-twist: #b9dcc3;
  --sprite-twist-rgb: 185 220 195;
  --sprite-twist-oklch: oklch(0.862 0.05 154.2);
}

.element {
  color: var(--sprite-twist);
  background-color: hsl(137 33% 79%);
  border-color: oklch(0.862 0.05 154.2);
}

Tailwind CSS v4

@theme {
  --color-sprite-twist: #b9dcc3;
  --color-sprite-twist-50: #eafaef;
  --color-sprite-twist-100: #dbede1;
  --color-sprite-twist-200: #c4dbcb;
  --color-sprite-twist-300: #a3c0ad;
  --color-sprite-twist-400: #88a891;
  --color-sprite-twist-500: #6c9077;
  --color-sprite-twist-600: #5c7a65;
  --color-sprite-twist-700: #496251;
  --color-sprite-twist-800: #35483a;
  --color-sprite-twist-900: #243228;
  --color-sprite-twist-950: #131e16;
}

SCSS

$sprite-twist: #b9dcc3;
$sprite-twist-rgb: 185, 220, 195;
$sprite-twist-light: mix(#fff, $sprite-twist, 20%);
$sprite-twist-dark: mix(#000, $sprite-twist, 20%);

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