Slice of Brioche

CSS

:root {
  --slice-of-brioche: #bd997a;
  --slice-of-brioche-rgb: 189 153 122;
  --slice-of-brioche-oklch: oklch(0.708 0.061 62.3);
}

.element {
  color: var(--slice-of-brioche);
  background-color: hsl(28 34% 61%);
  border-color: oklch(0.708 0.061 62.3);
}

Tailwind CSS v4

@theme {
  --color-slice-of-brioche: #bd997a;
  --color-slice-of-brioche-50: #fff2e4;
  --color-slice-of-brioche-100: #f7e4d3;
  --color-slice-of-brioche-200: #e7cfba;
  --color-slice-of-brioche-300: #ceb197;
  --color-slice-of-brioche-400: #b9977a;
  --color-slice-of-brioche-500: #a47d5c;
  --color-slice-of-brioche-600: #8a6a4e;
  --color-slice-of-brioche-700: #6f553e;
  --color-slice-of-brioche-800: #523e2d;
  --color-slice-of-brioche-900: #392a1e;
  --color-slice-of-brioche-950: #24180e;
}

SCSS

$slice-of-brioche: #bd997a;
$slice-of-brioche-rgb: 189, 153, 122;
$slice-of-brioche-light: mix(#fff, $slice-of-brioche, 20%);
$slice-of-brioche-dark: mix(#000, $slice-of-brioche, 20%);

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