Four Seasons Oolong

CSS

:root {
  --four-seasons-oolong: #6a7252;
  --four-seasons-oolong-rgb: 106 114 82;
  --four-seasons-oolong-oklch: oklch(0.536 0.049 119.5);
}

.element {
  color: var(--four-seasons-oolong);
  background-color: hsl(75 16% 38%);
  border-color: oklch(0.536 0.049 119.5);
}

Tailwind CSS v4

@theme {
  --color-four-seasons-oolong: #6a7252;
  --color-four-seasons-oolong-50: #f3f8e8;
  --color-four-seasons-oolong-100: #e5ebd9;
  --color-four-seasons-oolong-200: #d1d8c1;
  --color-four-seasons-oolong-300: #b3bca0;
  --color-four-seasons-oolong-400: #9ba383;
  --color-four-seasons-oolong-500: #828b67;
  --color-four-seasons-oolong-600: #6e7657;
  --color-four-seasons-oolong-700: #585e46;
  --color-four-seasons-oolong-800: #414532;
  --color-four-seasons-oolong-900: #2d3022;
  --color-four-seasons-oolong-950: #1a1c11;
}

SCSS

$four-seasons-oolong: #6a7252;
$four-seasons-oolong-rgb: 106, 114, 82;
$four-seasons-oolong-light: mix(#fff, $four-seasons-oolong, 20%);
$four-seasons-oolong-dark: mix(#000, $four-seasons-oolong, 20%);

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