Cyrus Grass

CSS

:root {
  --cyrus-grass: #cfc5a7;
  --cyrus-grass-rgb: 207 197 167;
  --cyrus-grass-oklch: oklch(0.824 0.042 91.8);
}

.element {
  color: var(--cyrus-grass);
  background-color: hsl(45 29% 73%);
  border-color: oklch(0.824 0.042 91.8);
}

Tailwind CSS v4

@theme {
  --color-cyrus-grass: #cfc5a7;
  --color-cyrus-grass-50: #f9f5e8;
  --color-cyrus-grass-100: #ece8d9;
  --color-cyrus-grass-200: #dad4c1;
  --color-cyrus-grass-300: #beb7a0;
  --color-cyrus-grass-400: #a79e83;
  --color-cyrus-grass-500: #908666;
  --color-cyrus-grass-600: #7a7157;
  --color-cyrus-grass-700: #625a45;
  --color-cyrus-grass-800: #484232;
  --color-cyrus-grass-900: #322d22;
  --color-cyrus-grass-950: #1e1a11;
}

SCSS

$cyrus-grass: #cfc5a7;
$cyrus-grass-rgb: 207, 197, 167;
$cyrus-grass-light: mix(#fff, $cyrus-grass, 20%);
$cyrus-grass-dark: mix(#000, $cyrus-grass, 20%);

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