Century’s Last Sunset

CSS

:root {
  --century-s-last-sunset: #9c7b87;
  --century-s-last-sunset-rgb: 156 123 135;
  --century-s-last-sunset-oklch: oklch(0.618 0.044 354.7);
}

.element {
  color: var(--century-s-last-sunset);
  background-color: hsl(338 14% 55%);
  border-color: oklch(0.618 0.044 354.7);
}

Tailwind CSS v4

@theme {
  --color-century-s-last-sunset: #9c7b87;
  --color-century-s-last-sunset-50: #fff0f5;
  --color-century-s-last-sunset-100: #f5e2e8;
  --color-century-s-last-sunset-200: #e5cdd4;
  --color-century-s-last-sunset-300: #cbafb8;
  --color-century-s-last-sunset-400: #b594a0;
  --color-century-s-last-sunset-500: #9f7a88;
  --color-century-s-last-sunset-600: #866873;
  --color-century-s-last-sunset-700: #6b535c;
  --color-century-s-last-sunset-800: #4f3c44;
  --color-century-s-last-sunset-900: #37292f;
  --color-century-s-last-sunset-950: #22171b;
}

SCSS

$century-s-last-sunset: #9c7b87;
$century-s-last-sunset-rgb: 156, 123, 135;
$century-s-last-sunset-light: mix(#fff, $century-s-last-sunset, 20%);
$century-s-last-sunset-dark: mix(#000, $century-s-last-sunset, 20%);

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