Highway

CSS

:root {
  --highway: #bdb388;
  --highway-rgb: 189 179 136;
  --highway-oklch: oklch(0.764 0.059 96.5);
}

.element {
  color: var(--highway);
  background-color: hsl(49 29% 64%);
  border-color: oklch(0.764 0.059 96.5);
}

Tailwind CSS v4

@theme {
  --color-highway: #bdb388;
  --color-highway-50: #f9f6e3;
  --color-highway-100: #ede9d2;
  --color-highway-200: #dad5b9;
  --color-highway-300: #bfb896;
  --color-highway-400: #a89f77;
  --color-highway-500: #918758;
  --color-highway-600: #7b724b;
  --color-highway-700: #625b3c;
  --color-highway-800: #49422a;
  --color-highway-900: #322e1d;
  --color-highway-950: #1e1a0d;
}

SCSS

$highway: #bdb388;
$highway-rgb: 189, 179, 136;
$highway-light: mix(#fff, $highway, 20%);
$highway-dark: mix(#000, $highway, 20%);

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