Cork Wood

CSS

:root {
  --cork-wood: #cc7744;
  --cork-wood-rgb: 204 119 68;
  --cork-wood-oklch: oklch(0.653 0.125 50.1);
}

.element {
  color: var(--cork-wood);
  background-color: hsl(22 57% 53%);
  border-color: oklch(0.653 0.125 50.1);
}

Tailwind CSS v4

@theme {
  --color-cork-wood: #cc7744;
  --color-cork-wood-50: #ffecd5;
  --color-cork-wood-100: #ffddc2;
  --color-cork-wood-200: #ffc6a3;
  --color-cork-wood-300: #eba57b;
  --color-cork-wood-400: #d98757;
  --color-cork-wood-500: #c66a2e;
  --color-cork-wood-600: #a75a29;
  --color-cork-wood-700: #864820;
  --color-cork-wood-800: #643317;
  --color-cork-wood-900: #47230f;
  --color-cork-wood-950: #2e1103;
}

SCSS

$cork-wood: #cc7744;
$cork-wood-rgb: 204, 119, 68;
$cork-wood-light: mix(#fff, $cork-wood, 20%);
$cork-wood-dark: mix(#000, $cork-wood, 20%);

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