Relieved Red

CSS

:root {
  --relieved-red: #e9dbdf;
  --relieved-red-rgb: 233 219 223;
  --relieved-red-oklch: oklch(0.904 0.016 358.1);
}

.element {
  color: var(--relieved-red);
  background-color: hsl(343 24% 89%);
  border-color: oklch(0.904 0.016 358.1);
}

Tailwind CSS v4

@theme {
  --color-relieved-red: #e9dbdf;
  --color-relieved-red-50: #f9f3f5;
  --color-relieved-red-100: #ede6e7;
  --color-relieved-red-200: #dbd1d4;
  --color-relieved-red-300: #bfb4b7;
  --color-relieved-red-400: #a79b9e;
  --color-relieved-red-500: #908286;
  --color-relieved-red-600: #7a6e71;
  --color-relieved-red-700: #61585b;
  --color-relieved-red-800: #474042;
  --color-relieved-red-900: #312c2e;
  --color-relieved-red-950: #1d191b;
}

SCSS

$relieved-red: #e9dbdf;
$relieved-red-rgb: 233, 219, 223;
$relieved-red-light: mix(#fff, $relieved-red, 20%);
$relieved-red-dark: mix(#000, $relieved-red, 20%);

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