Breathtaking Evening

CSS

:root {
  --breathtaking-evening: #c3acb7;
  --breathtaking-evening-rgb: 195 172 183;
  --breathtaking-evening-oklch: oklch(0.767 0.03 347.3);
}

.element {
  color: var(--breathtaking-evening);
  background-color: hsl(331 16% 72%);
  border-color: oklch(0.767 0.03 347.3);
}

Tailwind CSS v4

@theme {
  --color-breathtaking-evening: #c3acb7;
  --color-breathtaking-evening-50: #fcf2f6;
  --color-breathtaking-evening-100: #f0e4e9;
  --color-breathtaking-evening-200: #dfcfd6;
  --color-breathtaking-evening-300: #c4b1ba;
  --color-breathtaking-evening-400: #ad98a2;
  --color-breathtaking-evening-500: #967e8a;
  --color-breathtaking-evening-600: #7f6b75;
  --color-breathtaking-evening-700: #66555d;
  --color-breathtaking-evening-800: #4b3e45;
  --color-breathtaking-evening-900: #342b2f;
  --color-breathtaking-evening-950: #1f181c;
}

SCSS

$breathtaking-evening: #c3acb7;
$breathtaking-evening-rgb: 195, 172, 183;
$breathtaking-evening-light: mix(#fff, $breathtaking-evening, 20%);
$breathtaking-evening-dark: mix(#000, $breathtaking-evening, 20%);

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