Keystone

CSS

:root {
  --keystone: #b39372;
  --keystone-rgb: 179 147 114;
  --keystone-oklch: oklch(0.684 0.06 67.4);
}

.element {
  color: var(--keystone);
  background-color: hsl(30 30% 57%);
  border-color: oklch(0.684 0.06 67.4);
}

Tailwind CSS v4

@theme {
  --color-keystone: #b39372;
  --color-keystone-50: #fff3e3;
  --color-keystone-100: #f5e5d3;
  --color-keystone-200: #e6d0b9;
  --color-keystone-300: #ccb397;
  --color-keystone-400: #b79879;
  --color-keystone-500: #a17f5b;
  --color-keystone-600: #886b4d;
  --color-keystone-700: #6d563e;
  --color-keystone-800: #513e2c;
  --color-keystone-900: #382b1e;
  --color-keystone-950: #23180e;
}

SCSS

$keystone: #b39372;
$keystone-rgb: 179, 147, 114;
$keystone-light: mix(#fff, $keystone, 20%);
$keystone-dark: mix(#000, $keystone, 20%);

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