Misty Blush

CSS

:root {
  --misty-blush: #ddc9c6;
  --misty-blush-rgb: 221 201 198;
  --misty-blush-oklch: oklch(0.852 0.023 27.8);
}

.element {
  color: var(--misty-blush);
  background-color: hsl(8 25% 82%);
  border-color: oklch(0.852 0.023 27.8);
}

Tailwind CSS v4

@theme {
  --color-misty-blush: #ddc9c6;
  --color-misty-blush-50: #fcf3f1;
  --color-misty-blush-100: #efe5e3;
  --color-misty-blush-200: #ded1ce;
  --color-misty-blush-300: #c3b3b0;
  --color-misty-blush-400: #ac9a97;
  --color-misty-blush-500: #95817e;
  --color-misty-blush-600: #7e6d6b;
  --color-misty-blush-700: #655755;
  --color-misty-blush-800: #4a3f3e;
  --color-misty-blush-900: #332c2b;
  --color-misty-blush-950: #1f1918;
}

SCSS

$misty-blush: #ddc9c6;
$misty-blush-rgb: 221, 201, 198;
$misty-blush-light: mix(#fff, $misty-blush, 20%);
$misty-blush-dark: mix(#000, $misty-blush, 20%);

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