Karak Stone

CSS

:root {
  --karak-stone: #bb9662;
  --karak-stone-rgb: 187 150 98;
  --karak-stone-oklch: oklch(0.696 0.082 75.2);
}

.element {
  color: var(--karak-stone);
  background-color: hsl(35 40% 56%);
  border-color: oklch(0.696 0.082 75.2);
}

Tailwind CSS v4

@theme {
  --color-karak-stone: #bb9662;
  --color-karak-stone-50: #fff3dc;
  --color-karak-stone-100: #f8e5ca;
  --color-karak-stone-200: #e8d0ae;
  --color-karak-stone-300: #cfb388;
  --color-karak-stone-400: #bb9867;
  --color-karak-stone-500: #a67e44;
  --color-karak-stone-600: #8c6b3b;
  --color-karak-stone-700: #70552e;
  --color-karak-stone-800: #543e21;
  --color-karak-stone-900: #3a2b15;
  --color-karak-stone-950: #241807;
}

SCSS

$karak-stone: #bb9662;
$karak-stone-rgb: 187, 150, 98;
$karak-stone-light: mix(#fff, $karak-stone, 20%);
$karak-stone-dark: mix(#000, $karak-stone, 20%);

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