Subdue Red

CSS

:root {
  --subdue-red: #ccb8b3;
  --subdue-red-rgb: 204 184 179;
  --subdue-red-oklch: oklch(0.798 0.024 34.3);
}

.element {
  color: var(--subdue-red);
  background-color: hsl(12 20% 75%);
  border-color: oklch(0.798 0.024 34.3);
}

Tailwind CSS v4

@theme {
  --color-subdue-red: #ccb8b3;
  --color-subdue-red-50: #fcf3f0;
  --color-subdue-red-100: #f0e5e2;
  --color-subdue-red-200: #ded1cd;
  --color-subdue-red-300: #c3b3af;
  --color-subdue-red-400: #ac9a95;
  --color-subdue-red-500: #95817c;
  --color-subdue-red-600: #7e6d69;
  --color-subdue-red-700: #655754;
  --color-subdue-red-800: #4a3f3d;
  --color-subdue-red-900: #342c2a;
  --color-subdue-red-950: #1f1918;
}

SCSS

$subdue-red: #ccb8b3;
$subdue-red-rgb: 204, 184, 179;
$subdue-red-light: mix(#fff, $subdue-red, 20%);
$subdue-red-dark: mix(#000, $subdue-red, 20%);

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