Sunset Curtains

CSS

:root {
  --sunset-curtains: #d1a69b;
  --sunset-curtains-rgb: 209 166 155;
  --sunset-curtains-oklch: oklch(0.761 0.053 34.7);
}

.element {
  color: var(--sunset-curtains);
  background-color: hsl(12 37% 71%);
  border-color: oklch(0.761 0.053 34.7);
}

Tailwind CSS v4

@theme {
  --color-sunset-curtains: #d1a69b;
  --color-sunset-curtains-50: #fff0eb;
  --color-sunset-curtains-100: #f9e2dc;
  --color-sunset-curtains-200: #eacdc5;
  --color-sunset-curtains-300: #d1aea5;
  --color-sunset-curtains-400: #bc9489;
  --color-sunset-curtains-500: #a67a6e;
  --color-sunset-curtains-600: #8d675e;
  --color-sunset-curtains-700: #71524b;
  --color-sunset-curtains-800: #533c37;
  --color-sunset-curtains-900: #3a2925;
  --color-sunset-curtains-950: #241714;
}

SCSS

$sunset-curtains: #d1a69b;
$sunset-curtains-rgb: 209, 166, 155;
$sunset-curtains-light: mix(#fff, $sunset-curtains, 20%);
$sunset-curtains-dark: mix(#000, $sunset-curtains, 20%);

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