Cork Bark

CSS

:root {
  --cork-bark: #7e6b43;
  --cork-bark-rgb: 126 107 67;
  --cork-bark-oklch: oklch(0.536 0.061 85);
}

.element {
  color: var(--cork-bark);
  background-color: hsl(41 31% 38%);
  border-color: oklch(0.536 0.061 85);
}

Tailwind CSS v4

@theme {
  --color-cork-bark: #7e6b43;
  --color-cork-bark-50: #fdf4e2;
  --color-cork-bark-100: #f1e7d1;
  --color-cork-bark-200: #e0d3b7;
  --color-cork-bark-300: #c5b694;
  --color-cork-bark-400: #af9c75;
  --color-cork-bark-500: #998356;
  --color-cork-bark-600: #816f49;
  --color-cork-bark-700: #68593a;
  --color-cork-bark-800: #4d4129;
  --color-cork-bark-900: #352d1c;
  --color-cork-bark-950: #201a0c;
}

SCSS

$cork-bark: #7e6b43;
$cork-bark-rgb: 126, 107, 67;
$cork-bark-light: mix(#fff, $cork-bark, 20%);
$cork-bark-dark: mix(#000, $cork-bark, 20%);

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