Patient Pink

CSS

:root {
  --patient-pink: #ffaba5;
  --patient-pink-rgb: 255 171 165;
  --patient-pink-oklch: oklch(0.821 0.1 24);
}

.element {
  color: var(--patient-pink);
  background-color: hsl(4 100% 82%);
  border-color: oklch(0.821 0.1 24);
}

Tailwind CSS v4

@theme {
  --color-patient-pink: #ffaba5;
  --color-patient-pink-50: #ffebe6;
  --color-patient-pink-100: #ffdcd7;
  --color-patient-pink-200: #fcc5be;
  --color-patient-pink-300: #e6a49d;
  --color-patient-pink-400: #d38782;
  --color-patient-pink-500: #c06a65;
  --color-patient-pink-600: #a25a56;
  --color-patient-pink-700: #824845;
  --color-patient-pink-800: #603433;
  --color-patient-pink-900: #442322;
  --color-patient-pink-950: #2b1211;
}

SCSS

$patient-pink: #ffaba5;
$patient-pink-rgb: 255, 171, 165;
$patient-pink-light: mix(#fff, $patient-pink, 20%);
$patient-pink-dark: mix(#000, $patient-pink, 20%);

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