Coastal Plain

CSS

:root {
  --coastal-plain: #9fa694;
  --coastal-plain-rgb: 159 166 148;
  --coastal-plain-oklch: oklch(0.714 0.027 124.4);
}

.element {
  color: var(--coastal-plain);
  background-color: hsl(83 9% 62%);
  border-color: oklch(0.714 0.027 124.4);
}

Tailwind CSS v4

@theme {
  --color-coastal-plain: #9fa694;
  --color-coastal-plain-50: #f3f7ef;
  --color-coastal-plain-100: #e5eae0;
  --color-coastal-plain-200: #d1d6ca;
  --color-coastal-plain-300: #b4baac;
  --color-coastal-plain-400: #9ba190;
  --color-coastal-plain-500: #828976;
  --color-coastal-plain-600: #6e7464;
  --color-coastal-plain-700: #585d50;
  --color-coastal-plain-800: #41443a;
  --color-coastal-plain-900: #2c2f28;
  --color-coastal-plain-950: #1a1b16;
}

SCSS

$coastal-plain: #9fa694;
$coastal-plain-rgb: 159, 166, 148;
$coastal-plain-light: mix(#fff, $coastal-plain, 20%);
$coastal-plain-dark: mix(#000, $coastal-plain, 20%);

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