Artist’s Canvas

CSS

:root {
  --artist-s-canvas: #eee4d2;
  --artist-s-canvas-rgb: 238 228 210;
  --artist-s-canvas-oklch: oklch(0.922 0.026 82.4);
}

.element {
  color: var(--artist-s-canvas);
  background-color: hsl(39 45% 88%);
  border-color: oklch(0.922 0.026 82.4);
}

Tailwind CSS v4

@theme {
  --color-artist-s-canvas: #eee4d2;
  --color-artist-s-canvas-50: #f9f5ed;
  --color-artist-s-canvas-100: #ece7de;
  --color-artist-s-canvas-200: #d9d4c8;
  --color-artist-s-canvas-300: #beb7a9;
  --color-artist-s-canvas-400: #a69d8d;
  --color-artist-s-canvas-500: #8f8573;
  --color-artist-s-canvas-600: #797061;
  --color-artist-s-canvas-700: #615a4e;
  --color-artist-s-canvas-800: #474238;
  --color-artist-s-canvas-900: #312d26;
  --color-artist-s-canvas-950: #1d1a15;
}

SCSS

$artist-s-canvas: #eee4d2;
$artist-s-canvas-rgb: 238, 228, 210;
$artist-s-canvas-light: mix(#fff, $artist-s-canvas, 20%);
$artist-s-canvas-dark: mix(#000, $artist-s-canvas, 20%);

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