Canvas

CSS

:root {
  --canvas: #bb8855;
  --canvas-rgb: 187 136 85;
  --canvas-oklch: oklch(0.666 0.092 65.1);
}

.element {
  color: var(--canvas);
  background-color: hsl(30 43% 53%);
  border-color: oklch(0.666 0.092 65.1);
}

Tailwind CSS v4

@theme {
  --color-canvas: #bb8855;
  --color-canvas-50: #fff1da;
  --color-canvas-100: #fde3c8;
  --color-canvas-200: #f0cdab;
  --color-canvas-300: #d8af85;
  --color-canvas-400: #c49363;
  --color-canvas-500: #b0793f;
  --color-canvas-600: #956637;
  --color-canvas-700: #77522b;
  --color-canvas-800: #593b1e;
  --color-canvas-900: #3e2814;
  --color-canvas-950: #271606;
}

SCSS

$canvas: #bb8855;
$canvas-rgb: 187, 136, 85;
$canvas-light: mix(#fff, $canvas, 20%);
$canvas-dark: mix(#000, $canvas, 20%);

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