Roman Ruins

CSS

:root {
  --roman-ruins: #c0b5a0;
  --roman-ruins-rgb: 192 181 160;
  --roman-ruins-oklch: oklch(0.777 0.032 83.6);
}

.element {
  color: var(--roman-ruins);
  background-color: hsl(39 20% 69%);
  border-color: oklch(0.777 0.032 83.6);
}

Tailwind CSS v4

@theme {
  --color-roman-ruins: #c0b5a0;
  --color-roman-ruins-50: #f9f5eb;
  --color-roman-ruins-100: #ede7dc;
  --color-roman-ruins-200: #dad4c5;
  --color-roman-ruins-300: #bfb7a6;
  --color-roman-ruins-400: #a79d8a;
  --color-roman-ruins-500: #90856f;
  --color-roman-ruins-600: #7a705e;
  --color-roman-ruins-700: #625a4b;
  --color-roman-ruins-800: #484136;
  --color-roman-ruins-900: #322d25;
  --color-roman-ruins-950: #1e1a14;
}

SCSS

$roman-ruins: #c0b5a0;
$roman-ruins-rgb: 192, 181, 160;
$roman-ruins-light: mix(#fff, $roman-ruins, 20%);
$roman-ruins-dark: mix(#000, $roman-ruins, 20%);

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