Warm and Toasty

CSS

:root {
  --warm-and-toasty: #cbb68f;
  --warm-and-toasty-rgb: 203 182 143;
  --warm-and-toasty-oklch: oklch(0.784 0.058 82.8);
}

.element {
  color: var(--warm-and-toasty);
  background-color: hsl(39 37% 68%);
  border-color: oklch(0.784 0.058 82.8);
}

Tailwind CSS v4

@theme {
  --color-warm-and-toasty: #cbb68f;
  --color-warm-and-toasty-50: #fdf4e3;
  --color-warm-and-toasty-100: #f1e7d3;
  --color-warm-and-toasty-200: #e0d3b9;
  --color-warm-and-toasty-300: #c5b696;
  --color-warm-and-toasty-400: #af9c78;
  --color-warm-and-toasty-500: #998359;
  --color-warm-and-toasty-600: #816f4c;
  --color-warm-and-toasty-700: #68593d;
  --color-warm-and-toasty-800: #4d402b;
  --color-warm-and-toasty-900: #352c1d;
  --color-warm-and-toasty-950: #20190d;
}

SCSS

$warm-and-toasty: #cbb68f;
$warm-and-toasty-rgb: 203, 182, 143;
$warm-and-toasty-light: mix(#fff, $warm-and-toasty, 20%);
$warm-and-toasty-dark: mix(#000, $warm-and-toasty, 20%);

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