Cashmere Wrap

CSS

:root {
  --cashmere-wrap: #d6b484;
  --cashmere-wrap-rgb: 214 180 132;
  --cashmere-wrap-oklch: oklch(0.788 0.075 75.9);
}

.element {
  color: var(--cashmere-wrap);
  background-color: hsl(35 50% 68%);
  border-color: oklch(0.788 0.075 75.9);
}

Tailwind CSS v4

@theme {
  --color-cashmere-wrap: #d6b484;
  --color-cashmere-wrap-50: #fff3de;
  --color-cashmere-wrap-100: #f6e5cd;
  --color-cashmere-wrap-200: #e6d1b1;
  --color-cashmere-wrap-300: #cdb38d;
  --color-cashmere-wrap-400: #b8996c;
  --color-cashmere-wrap-500: #a37f4b;
  --color-cashmere-wrap-600: #8a6c40;
  --color-cashmere-wrap-700: #6e5633;
  --color-cashmere-wrap-800: #523e24;
  --color-cashmere-wrap-900: #392b18;
  --color-cashmere-wrap-950: #231809;
}

SCSS

$cashmere-wrap: #d6b484;
$cashmere-wrap-rgb: 214, 180, 132;
$cashmere-wrap-light: mix(#fff, $cashmere-wrap, 20%);
$cashmere-wrap-dark: mix(#000, $cashmere-wrap, 20%);

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