Lily the Pink

CSS

:root {
  --lily-the-pink: #f5dee2;
  --lily-the-pink-rgb: 245 222 226;
  --lily-the-pink-oklch: oklch(0.92 0.026 5.7);
}

.element {
  color: var(--lily-the-pink);
  background-color: hsl(350 53% 92%);
  border-color: oklch(0.92 0.026 5.7);
}

Tailwind CSS v4

@theme {
  --color-lily-the-pink: #f5dee2;
  --color-lily-the-pink-50: #fcf2f4;
  --color-lily-the-pink-100: #f0e4e6;
  --color-lily-the-pink-200: #dfd0d2;
  --color-lily-the-pink-300: #c4b2b5;
  --color-lily-the-pink-400: #ad989c;
  --color-lily-the-pink-500: #967f83;
  --color-lily-the-pink-600: #7f6c6f;
  --color-lily-the-pink-700: #665659;
  --color-lily-the-pink-800: #4b3f41;
  --color-lily-the-pink-900: #342b2d;
  --color-lily-the-pink-950: #1f191a;
}

SCSS

$lily-the-pink: #f5dee2;
$lily-the-pink-rgb: 245, 222, 226;
$lily-the-pink-light: mix(#fff, $lily-the-pink, 20%);
$lily-the-pink-dark: mix(#000, $lily-the-pink, 20%);

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