Dusk in the Valley

CSS

:root {
  --dusk-in-the-valley: #d2cac8;
  --dusk-in-the-valley-rgb: 210 202 200;
  --dusk-in-the-valley-oklch: oklch(0.845 0.009 34.3);
}

.element {
  color: var(--dusk-in-the-valley);
  background-color: hsl(12 10% 80%);
  border-color: oklch(0.845 0.009 34.3);
}

Tailwind CSS v4

@theme {
  --color-dusk-in-the-valley: #d2cac8;
  --color-dusk-in-the-valley-50: #f8f4f3;
  --color-dusk-in-the-valley-100: #ebe7e6;
  --color-dusk-in-the-valley-200: #d8d3d1;
  --color-dusk-in-the-valley-300: #bcb6b4;
  --color-dusk-in-the-valley-400: #a49d9b;
  --color-dusk-in-the-valley-500: #8c8482;
  --color-dusk-in-the-valley-600: #77706e;
  --color-dusk-in-the-valley-700: #5f5958;
  --color-dusk-in-the-valley-800: #454140;
  --color-dusk-in-the-valley-900: #302d2c;
  --color-dusk-in-the-valley-950: #1c1a19;
}

SCSS

$dusk-in-the-valley: #d2cac8;
$dusk-in-the-valley-rgb: 210, 202, 200;
$dusk-in-the-valley-light: mix(#fff, $dusk-in-the-valley, 20%);
$dusk-in-the-valley-dark: mix(#000, $dusk-in-the-valley, 20%);

.element {
  color: $dusk-in-the-valley;
  box-shadow: 0 0 0 2px rgba($dusk-in-the-valley, 0.35);
}