Canvas Satchel

CSS

:root {
  --canvas-satchel: #ccb88d;
  --canvas-satchel-rgb: 204 184 141;
  --canvas-satchel-oklch: oklch(0.789 0.062 85.9);
}

.element {
  color: var(--canvas-satchel);
  background-color: hsl(41 38% 68%);
  border-color: oklch(0.789 0.062 85.9);
}

Tailwind CSS v4

@theme {
  --color-canvas-satchel: #ccb88d;
  --color-canvas-satchel-50: #fdf5e2;
  --color-canvas-satchel-100: #f0e7d1;
  --color-canvas-satchel-200: #dfd3b7;
  --color-canvas-satchel-300: #c5b694;
  --color-canvas-satchel-400: #af9c74;
  --color-canvas-satchel-500: #998456;
  --color-canvas-satchel-600: #816f49;
  --color-canvas-satchel-700: #67593a;
  --color-canvas-satchel-800: #4d4129;
  --color-canvas-satchel-900: #352d1c;
  --color-canvas-satchel-950: #201a0c;
}

SCSS

$canvas-satchel: #ccb88d;
$canvas-satchel-rgb: 204, 184, 141;
$canvas-satchel-light: mix(#fff, $canvas-satchel, 20%);
$canvas-satchel-dark: mix(#000, $canvas-satchel, 20%);

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