Roaring Twenties

CSS

:root {
  --roaring-twenties: #b39c9e;
  --roaring-twenties-rgb: 179 156 158;
  --roaring-twenties-oklch: oklch(0.714 0.027 11.8);
}

.element {
  color: var(--roaring-twenties);
  background-color: hsl(355 13% 66%);
  border-color: oklch(0.714 0.027 11.8);
}

Tailwind CSS v4

@theme {
  --color-roaring-twenties: #b39c9e;
  --color-roaring-twenties-50: #fdf2f3;
  --color-roaring-twenties-100: #f1e4e5;
  --color-roaring-twenties-200: #e0d0d1;
  --color-roaring-twenties-300: #c5b2b3;
  --color-roaring-twenties-400: #ae989a;
  --color-roaring-twenties-500: #977f81;
  --color-roaring-twenties-600: #806c6d;
  --color-roaring-twenties-700: #665657;
  --color-roaring-twenties-800: #4b3f40;
  --color-roaring-twenties-900: #342b2c;
  --color-roaring-twenties-950: #201819;
}

SCSS

$roaring-twenties: #b39c9e;
$roaring-twenties-rgb: 179, 156, 158;
$roaring-twenties-light: mix(#fff, $roaring-twenties, 20%);
$roaring-twenties-dark: mix(#000, $roaring-twenties, 20%);

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