Canvas Tan

CSS

:root {
  --canvas-tan: #ddd6c6;
  --canvas-tan-rgb: 221 214 198;
  --canvas-tan-oklch: oklch(0.877 0.023 87.2);
}

.element {
  color: var(--canvas-tan);
  background-color: hsl(42 25% 82%);
  border-color: oklch(0.877 0.023 87.2);
}

Tailwind CSS v4

@theme {
  --color-canvas-tan: #ddd6c6;
  --color-canvas-tan-50: #f8f5ee;
  --color-canvas-tan-100: #ebe8df;
  --color-canvas-tan-200: #d8d4c9;
  --color-canvas-tan-300: #bcb7aa;
  --color-canvas-tan-400: #a49e8f;
  --color-canvas-tan-500: #8d8675;
  --color-canvas-tan-600: #777163;
  --color-canvas-tan-700: #5f5a4f;
  --color-canvas-tan-800: #46423a;
  --color-canvas-tan-900: #302d27;
  --color-canvas-tan-950: #1d1a16;
}

SCSS

$canvas-tan: #ddd6c6;
$canvas-tan-rgb: 221, 214, 198;
$canvas-tan-light: mix(#fff, $canvas-tan, 20%);
$canvas-tan-dark: mix(#000, $canvas-tan, 20%);

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