Rachel Pink

CSS

:root {
  --rachel-pink: #e8b9ae;
  --rachel-pink-rgb: 232 185 174;
  --rachel-pink-oklch: oklch(0.825 0.057 33.4);
}

.element {
  color: var(--rachel-pink);
  background-color: hsl(11 56% 80%);
  border-color: oklch(0.825 0.057 33.4);
}

Tailwind CSS v4

@theme {
  --color-rachel-pink: #e8b9ae;
  --color-rachel-pink-50: #fff0ea;
  --color-rachel-pink-100: #fae2db;
  --color-rachel-pink-200: #ebccc4;
  --color-rachel-pink-300: #d3aea4;
  --color-rachel-pink-400: #be9389;
  --color-rachel-pink-500: #a8796e;
  --color-rachel-pink-600: #8e665d;
  --color-rachel-pink-700: #72524a;
  --color-rachel-pink-800: #543b36;
  --color-rachel-pink-900: #3b2925;
  --color-rachel-pink-950: #251614;
}

SCSS

$rachel-pink: #e8b9ae;
$rachel-pink-rgb: 232, 185, 174;
$rachel-pink-light: mix(#fff, $rachel-pink, 20%);
$rachel-pink-dark: mix(#000, $rachel-pink, 20%);

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