Warp & Weft

CSS

:root {
  --warp-weft: #e5d5c9;
  --warp-weft-rgb: 229 213 201;
  --warp-weft-oklch: oklch(0.883 0.024 59.4);
}

.element {
  color: var(--warp-weft);
  background-color: hsl(26 35% 84%);
  border-color: oklch(0.883 0.024 59.4);
}

Tailwind CSS v4

@theme {
  --color-warp-weft: #e5d5c9;
  --color-warp-weft-50: #faf4ee;
  --color-warp-weft-100: #eee6e0;
  --color-warp-weft-200: #dcd2ca;
  --color-warp-weft-300: #c1b5ab;
  --color-warp-weft-400: #aa9b91;
  --color-warp-weft-500: #938377;
  --color-warp-weft-600: #7c6f64;
  --color-warp-weft-700: #635850;
  --color-warp-weft-800: #49403a;
  --color-warp-weft-900: #332c28;
  --color-warp-weft-950: #1e1916;
}

SCSS

$warp-weft: #e5d5c9;
$warp-weft-rgb: 229, 213, 201;
$warp-weft-light: mix(#fff, $warp-weft, 20%);
$warp-weft-dark: mix(#000, $warp-weft, 20%);

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