Reeds

CSS

:root {
  --reeds: #a0bca7;
  --reeds-rgb: 160 188 167;
  --reeds-oklch: oklch(0.768 0.043 152.9);
}

.element {
  color: var(--reeds);
  background-color: hsl(135 17% 68%);
  border-color: oklch(0.768 0.043 152.9);
}

Tailwind CSS v4

@theme {
  --color-reeds: #a0bca7;
  --color-reeds-50: #ecf9f0;
  --color-reeds-100: #ddece2;
  --color-reeds-200: #c7dacc;
  --color-reeds-300: #a7beae;
  --color-reeds-400: #8ca693;
  --color-reeds-500: #718f79;
  --color-reeds-600: #607966;
  --color-reeds-700: #4d6152;
  --color-reeds-800: #38473b;
  --color-reeds-900: #263128;
  --color-reeds-950: #151d16;
}

SCSS

$reeds: #a0bca7;
$reeds-rgb: 160, 188, 167;
$reeds-light: mix(#fff, $reeds, 20%);
$reeds-dark: mix(#000, $reeds, 20%);

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