The Boulevard

CSS

:root {
  --the-boulevard: #d0a492;
  --the-boulevard-rgb: 208 164 146;
  --the-boulevard-oklch: oklch(0.754 0.058 43.3);
}

.element {
  color: var(--the-boulevard);
  background-color: hsl(17 40% 69%);
  border-color: oklch(0.754 0.058 43.3);
}

Tailwind CSS v4

@theme {
  --color-the-boulevard: #d0a492;
  --color-the-boulevard-50: #fff0e8;
  --color-the-boulevard-100: #fae2d8;
  --color-the-boulevard-200: #ebcdc0;
  --color-the-boulevard-300: #d2af9f;
  --color-the-boulevard-400: #bd9483;
  --color-the-boulevard-500: #a87a67;
  --color-the-boulevard-600: #8e6758;
  --color-the-boulevard-700: #725346;
  --color-the-boulevard-800: #543c33;
  --color-the-boulevard-900: #3b2922;
  --color-the-boulevard-950: #251712;
}

SCSS

$the-boulevard: #d0a492;
$the-boulevard-rgb: 208, 164, 146;
$the-boulevard-light: mix(#fff, $the-boulevard, 20%);
$the-boulevard-dark: mix(#000, $the-boulevard, 20%);

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