Cold Pilsner

CSS

:root {
  --cold-pilsner: #d09351;
  --cold-pilsner-rgb: 208 147 81;
  --cold-pilsner-oklch: oklch(0.71 0.111 66.5);
}

.element {
  color: var(--cold-pilsner);
  background-color: hsl(31 57% 57%);
  border-color: oklch(0.71 0.111 66.5);
}

Tailwind CSS v4

@theme {
  --color-cold-pilsner: #d09351;
  --color-cold-pilsner-50: #fff0d4;
  --color-cold-pilsner-100: #ffe2c1;
  --color-cold-pilsner-200: #f4cca1;
  --color-cold-pilsner-300: #ddad79;
  --color-cold-pilsner-400: #cb9153;
  --color-cold-pilsner-500: #b77626;
  --color-cold-pilsner-600: #9a6423;
  --color-cold-pilsner-700: #7c501c;
  --color-cold-pilsner-800: #5d3913;
  --color-cold-pilsner-900: #41270c;
  --color-cold-pilsner-950: #291501;
}

SCSS

$cold-pilsner: #d09351;
$cold-pilsner-rgb: 208, 147, 81;
$cold-pilsner-light: mix(#fff, $cold-pilsner, 20%);
$cold-pilsner-dark: mix(#000, $cold-pilsner, 20%);

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