Roman Snail

CSS

:root {
  --roman-snail: #a49593;
  --roman-snail-rgb: 164 149 147;
  --roman-snail-oklch: oklch(0.682 0.018 26.7);
}

.element {
  color: var(--roman-snail);
  background-color: hsl(7 9% 61%);
  border-color: oklch(0.682 0.018 26.7);
}

Tailwind CSS v4

@theme {
  --color-roman-snail: #a49593;
  --color-roman-snail-50: #faf3f2;
  --color-roman-snail-100: #eee6e4;
  --color-roman-snail-200: #dcd1d0;
  --color-roman-snail-300: #c0b4b2;
  --color-roman-snail-400: #a99b99;
  --color-roman-snail-500: #928280;
  --color-roman-snail-600: #7b6e6c;
  --color-roman-snail-700: #635856;
  --color-roman-snail-800: #48403f;
  --color-roman-snail-900: #322c2b;
  --color-roman-snail-950: #1e1919;
}

SCSS

$roman-snail: #a49593;
$roman-snail-rgb: 164, 149, 147;
$roman-snail-light: mix(#fff, $roman-snail, 20%);
$roman-snail-dark: mix(#000, $roman-snail, 20%);

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