Cool Pink

CSS

:root {
  --cool-pink: #e5ccd1;
  --cool-pink-rgb: 229 204 209;
  --cool-pink-oklch: oklch(0.867 0.029 4.1);
}

.element {
  color: var(--cool-pink);
  background-color: hsl(348 32% 85%);
  border-color: oklch(0.867 0.029 4.1);
}

Tailwind CSS v4

@theme {
  --color-cool-pink: #e5ccd1;
  --color-cool-pink-50: #fdf2f4;
  --color-cool-pink-100: #f1e4e6;
  --color-cool-pink-200: #e0cfd2;
  --color-cool-pink-300: #c5b2b5;
  --color-cool-pink-400: #ae989c;
  --color-cool-pink-500: #987f84;
  --color-cool-pink-600: #806b70;
  --color-cool-pink-700: #675659;
  --color-cool-pink-800: #4b3e41;
  --color-cool-pink-900: #342b2d;
  --color-cool-pink-950: #20181a;
}

SCSS

$cool-pink: #e5ccd1;
$cool-pink-rgb: 229, 204, 209;
$cool-pink-light: mix(#fff, $cool-pink, 20%);
$cool-pink-dark: mix(#000, $cool-pink, 20%);

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