Melancholy

CSS

:root {
  --melancholy: #dd8899;
  --melancholy-rgb: 221 136 153;
  --melancholy-oklch: oklch(0.72 0.106 7.1);
}

.element {
  color: var(--melancholy);
  background-color: hsl(348 56% 70%);
  border-color: oklch(0.72 0.106 7.1);
}

Tailwind CSS v4

@theme {
  --color-melancholy: #dd8899;
  --color-melancholy-50: #ffe9ef;
  --color-melancholy-100: #ffdae0;
  --color-melancholy-200: #fdc2cb;
  --color-melancholy-300: #e7a1ac;
  --color-melancholy-400: #d48493;
  --color-melancholy-500: #c0667a;
  --color-melancholy-600: #a25767;
  --color-melancholy-700: #824552;
  --color-melancholy-800: #60323d;
  --color-melancholy-900: #44222a;
  --color-melancholy-950: #2b1118;
}

SCSS

$melancholy: #dd8899;
$melancholy-rgb: 221, 136, 153;
$melancholy-light: mix(#fff, $melancholy, 20%);
$melancholy-dark: mix(#000, $melancholy, 20%);

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