Buckram Binding

CSS

:root {
  --buckram-binding: #d9c3a6;
  --buckram-binding-rgb: 217 195 166;
  --buckram-binding-oklch: oklch(0.828 0.046 74.7);
}

.element {
  color: var(--buckram-binding);
  background-color: hsl(34 40% 75%);
  border-color: oklch(0.828 0.046 74.7);
}

Tailwind CSS v4

@theme {
  --color-buckram-binding: #d9c3a6;
  --color-buckram-binding-50: #fdf4e7;
  --color-buckram-binding-100: #f1e6d7;
  --color-buckram-binding-200: #e0d2bf;
  --color-buckram-binding-300: #c5b59e;
  --color-buckram-binding-400: #af9b80;
  --color-buckram-binding-500: #998264;
  --color-buckram-binding-600: #816e55;
  --color-buckram-binding-700: #675844;
  --color-buckram-binding-800: #4c4031;
  --color-buckram-binding-900: #352c21;
  --color-buckram-binding-950: #201910;
}

SCSS

$buckram-binding: #d9c3a6;
$buckram-binding-rgb: 217, 195, 166;
$buckram-binding-light: mix(#fff, $buckram-binding, 20%);
$buckram-binding-dark: mix(#000, $buckram-binding, 20%);

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