Pale Shrimp

CSS

:root {
  --pale-shrimp: #f8dbd6;
  --pale-shrimp-rgb: 248 219 214;
  --pale-shrimp-oklch: oklch(0.914 0.033 29.4);
}

.element {
  color: var(--pale-shrimp);
  background-color: hsl(9 71% 91%);
  border-color: oklch(0.914 0.033 29.4);
}

Tailwind CSS v4

@theme {
  --color-pale-shrimp: #f8dbd6;
  --color-pale-shrimp-50: #fef2ef;
  --color-pale-shrimp-100: #f3e4e1;
  --color-pale-shrimp-200: #e2cfcc;
  --color-pale-shrimp-300: #c8b2ad;
  --color-pale-shrimp-400: #b19893;
  --color-pale-shrimp-500: #9b7e7a;
  --color-pale-shrimp-600: #836b67;
  --color-pale-shrimp-700: #695652;
  --color-pale-shrimp-800: #4d3e3c;
  --color-pale-shrimp-900: #362b29;
  --color-pale-shrimp-950: #211817;
}

SCSS

$pale-shrimp: #f8dbd6;
$pale-shrimp-rgb: 248, 219, 214;
$pale-shrimp-light: mix(#fff, $pale-shrimp, 20%);
$pale-shrimp-dark: mix(#000, $pale-shrimp, 20%);

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