London Stones

CSS

:root {
  --london-stones: #a89f94;
  --london-stones-rgb: 168 159 148;
  --london-stones-oklch: oklch(0.707 0.019 73);
}

.element {
  color: var(--london-stones);
  background-color: hsl(33 10% 62%);
  border-color: oklch(0.707 0.019 73);
}

Tailwind CSS v4

@theme {
  --color-london-stones: #a89f94;
  --color-london-stones-50: #f8f4ef;
  --color-london-stones-100: #ece7e1;
  --color-london-stones-200: #d9d3cc;
  --color-london-stones-300: #bdb6ad;
  --color-london-stones-400: #a59d93;
  --color-london-stones-500: #8e8479;
  --color-london-stones-600: #787066;
  --color-london-stones-700: #605a52;
  --color-london-stones-800: #47413b;
  --color-london-stones-900: #312d29;
  --color-london-stones-950: #1d1a17;
}

SCSS

$london-stones: #a89f94;
$london-stones-rgb: 168, 159, 148;
$london-stones-light: mix(#fff, $london-stones, 20%);
$london-stones-dark: mix(#000, $london-stones, 20%);

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