Dried Caspia

CSS

:root {
  --dried-caspia: #b6bf7f;
  --dried-caspia-rgb: 182 191 127;
  --dried-caspia-oklch: oklch(0.782 0.086 114.9);
}

.element {
  color: var(--dried-caspia);
  background-color: hsl(68 33% 62%);
  border-color: oklch(0.782 0.086 114.9);
}

Tailwind CSS v4

@theme {
  --color-dried-caspia: #b6bf7f;
  --color-dried-caspia-50: #f3f9dd;
  --color-dried-caspia-100: #e5eccc;
  --color-dried-caspia-200: #d1dab0;
  --color-dried-caspia-300: #b4be8c;
  --color-dried-caspia-400: #9da569;
  --color-dried-caspia-500: #848d47;
  --color-dried-caspia-600: #70773d;
  --color-dried-caspia-700: #5a5f31;
  --color-dried-caspia-800: #424621;
  --color-dried-caspia-900: #2e3016;
  --color-dried-caspia-950: #1b1c07;
}

SCSS

$dried-caspia: #b6bf7f;
$dried-caspia-rgb: 182, 191, 127;
$dried-caspia-light: mix(#fff, $dried-caspia, 20%);
$dried-caspia-dark: mix(#000, $dried-caspia, 20%);

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