Day Dreamer

CSS

:root {
  --day-dreamer: #d9cdc4;
  --day-dreamer-rgb: 217 205 196;
  --day-dreamer-oklch: oklch(0.856 0.018 59.4);
}

.element {
  color: var(--day-dreamer);
  background-color: hsl(26 22% 81%);
  border-color: oklch(0.856 0.018 59.4);
}

Tailwind CSS v4

@theme {
  --color-day-dreamer: #d9cdc4;
  --color-day-dreamer-50: #f9f4f0;
  --color-day-dreamer-100: #ede7e2;
  --color-day-dreamer-200: #dad3cd;
  --color-day-dreamer-300: #bfb5ae;
  --color-day-dreamer-400: #a79c94;
  --color-day-dreamer-500: #90847a;
  --color-day-dreamer-600: #7a6f68;
  --color-day-dreamer-700: #615953;
  --color-day-dreamer-800: #47413c;
  --color-day-dreamer-900: #312d29;
  --color-day-dreamer-950: #1d1a17;
}

SCSS

$day-dreamer: #d9cdc4;
$day-dreamer-rgb: 217, 205, 196;
$day-dreamer-light: mix(#fff, $day-dreamer, 20%);
$day-dreamer-dark: mix(#000, $day-dreamer, 20%);

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