Clean Canvas

CSS

:root {
  --clean-canvas: #f6e9d3;
  --clean-canvas-rgb: 246 233 211;
  --clean-canvas-oklch: oklch(0.939 0.032 81);
}

.element {
  color: var(--clean-canvas);
  background-color: hsl(38 66% 90%);
  border-color: oklch(0.939 0.032 81);
}

Tailwind CSS v4

@theme {
  --color-clean-canvas: #f6e9d3;
  --color-clean-canvas-50: #faf4eb;
  --color-clean-canvas-100: #ede7dc;
  --color-clean-canvas-200: #dbd3c5;
  --color-clean-canvas-300: #bfb6a5;
  --color-clean-canvas-400: #a89d89;
  --color-clean-canvas-500: #91846e;
  --color-clean-canvas-600: #7b705e;
  --color-clean-canvas-700: #625a4b;
  --color-clean-canvas-800: #484136;
  --color-clean-canvas-900: #322d25;
  --color-clean-canvas-950: #1e1a13;
}

SCSS

$clean-canvas: #f6e9d3;
$clean-canvas-rgb: 246, 233, 211;
$clean-canvas-light: mix(#fff, $clean-canvas, 20%);
$clean-canvas-dark: mix(#000, $clean-canvas, 20%);

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