Country Rubble

CSS

:root {
  --country-rubble: #d0bca2;
  --country-rubble-rgb: 208 188 162;
  --country-rubble-oklch: oklch(0.805 0.042 74.4);
}

.element {
  color: var(--country-rubble);
  background-color: hsl(34 33% 73%);
  border-color: oklch(0.805 0.042 74.4);
}

Tailwind CSS v4

@theme {
  --color-country-rubble: #d0bca2;
  --color-country-rubble-50: #fcf4e8;
  --color-country-rubble-100: #f0e6d9;
  --color-country-rubble-200: #dfd2c1;
  --color-country-rubble-300: #c4b5a0;
  --color-country-rubble-400: #ae9b83;
  --color-country-rubble-500: #978267;
  --color-country-rubble-600: #806e58;
  --color-country-rubble-700: #665846;
  --color-country-rubble-800: #4c4032;
  --color-country-rubble-900: #342c22;
  --color-country-rubble-950: #201911;
}

SCSS

$country-rubble: #d0bca2;
$country-rubble-rgb: 208, 188, 162;
$country-rubble-light: mix(#fff, $country-rubble, 20%);
$country-rubble-dark: mix(#000, $country-rubble, 20%);

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