Old Red Crest

CSS

:root {
  --old-red-crest: #d8cbcf;
  --old-red-crest-rgb: 216 203 207;
  --old-red-crest-oklch: oklch(0.854 0.015 356.7);
}

.element {
  color: var(--old-red-crest);
  background-color: hsl(342 14% 82%);
  border-color: oklch(0.854 0.015 356.7);
}

Tailwind CSS v4

@theme {
  --color-old-red-crest: #d8cbcf;
  --color-old-red-crest-50: #f9f3f5;
  --color-old-red-crest-100: #ede6e8;
  --color-old-red-crest-200: #dad2d4;
  --color-old-red-crest-300: #bfb4b7;
  --color-old-red-crest-400: #a79b9e;
  --color-old-red-crest-500: #8f8286;
  --color-old-red-crest-600: #796e72;
  --color-old-red-crest-700: #61585b;
  --color-old-red-crest-800: #474043;
  --color-old-red-crest-900: #312c2e;
  --color-old-red-crest-950: #1d191b;
}

SCSS

$old-red-crest: #d8cbcf;
$old-red-crest-rgb: 216, 203, 207;
$old-red-crest-light: mix(#fff, $old-red-crest, 20%);
$old-red-crest-dark: mix(#000, $old-red-crest, 20%);

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