Land of Trees

CSS

:root {
  --land-of-trees: #e0d5b9;
  --land-of-trees-rgb: 224 213 185;
  --land-of-trees-oklch: oklch(0.875 0.039 89.1);
}

.element {
  color: var(--land-of-trees);
  background-color: hsl(43 39% 80%);
  border-color: oklch(0.875 0.039 89.1);
}

Tailwind CSS v4

@theme {
  --color-land-of-trees: #e0d5b9;
  --color-land-of-trees-50: #f9f5e9;
  --color-land-of-trees-100: #ede8d9;
  --color-land-of-trees-200: #dad4c2;
  --color-land-of-trees-300: #bfb7a1;
  --color-land-of-trees-400: #a89e84;
  --color-land-of-trees-500: #918569;
  --color-land-of-trees-600: #7a7159;
  --color-land-of-trees-700: #625a47;
  --color-land-of-trees-800: #484233;
  --color-land-of-trees-900: #322d23;
  --color-land-of-trees-950: #1e1a12;
}

SCSS

$land-of-trees: #e0d5b9;
$land-of-trees-rgb: 224, 213, 185;
$land-of-trees-light: mix(#fff, $land-of-trees, 20%);
$land-of-trees-dark: mix(#000, $land-of-trees, 20%);

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