Canyon Sand

CSS

:root {
  --canyon-sand: #f2d6aa;
  --canyon-sand-rgb: 242 214 170;
  --canyon-sand-oklch: oklch(0.889 0.065 78.9);
}

.element {
  color: var(--canyon-sand);
  background-color: hsl(37 73% 81%);
  border-color: oklch(0.889 0.065 78.9);
}

Tailwind CSS v4

@theme {
  --color-canyon-sand: #f2d6aa;
  --color-canyon-sand-50: #fff4e1;
  --color-canyon-sand-100: #f3e6d0;
  --color-canyon-sand-200: #e3d2b5;
  --color-canyon-sand-300: #c9b592;
  --color-canyon-sand-400: #b49a73;
  --color-canyon-sand-500: #9e8153;
  --color-canyon-sand-600: #856d47;
  --color-canyon-sand-700: #6b5838;
  --color-canyon-sand-800: #4f3f28;
  --color-canyon-sand-900: #372c1b;
  --color-canyon-sand-950: #22190b;
}

SCSS

$canyon-sand: #f2d6aa;
$canyon-sand-rgb: 242, 214, 170;
$canyon-sand-light: mix(#fff, $canyon-sand, 20%);
$canyon-sand-dark: mix(#000, $canyon-sand, 20%);

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