Cobblestone Street

CSS

:root {
  --cobblestone-street: #cfc7b9;
  --cobblestone-street-rgb: 207 199 185;
  --cobblestone-street-oklch: oklch(0.832 0.021 81.8);
}

.element {
  color: var(--cobblestone-street);
  background-color: hsl(38 19% 77%);
  border-color: oklch(0.832 0.021 81.8);
}

Tailwind CSS v4

@theme {
  --color-cobblestone-street: #cfc7b9;
  --color-cobblestone-street-50: #f8f5ee;
  --color-cobblestone-street-100: #ebe7e0;
  --color-cobblestone-street-200: #d8d4ca;
  --color-cobblestone-street-300: #bcb7ab;
  --color-cobblestone-street-400: #a59d91;
  --color-cobblestone-street-500: #8d8577;
  --color-cobblestone-street-600: #787165;
  --color-cobblestone-street-700: #605a50;
  --color-cobblestone-street-800: #46423a;
  --color-cobblestone-street-900: #312d28;
  --color-cobblestone-street-950: #1d1a16;
}

SCSS

$cobblestone-street: #cfc7b9;
$cobblestone-street-rgb: 207, 199, 185;
$cobblestone-street-light: mix(#fff, $cobblestone-street, 20%);
$cobblestone-street-dark: mix(#000, $cobblestone-street, 20%);

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