Pretty in Peach

CSS

:root {
  --pretty-in-peach: #e9af9b;
  --pretty-in-peach-rgb: 233 175 155;
  --pretty-in-peach-oklch: oklch(0.803 0.074 39.9);
}

.element {
  color: var(--pretty-in-peach);
  background-color: hsl(15 64% 76%);
  border-color: oklch(0.803 0.074 39.9);
}

Tailwind CSS v4

@theme {
  --color-pretty-in-peach: #e9af9b;
  --color-pretty-in-peach-50: #ffefe5;
  --color-pretty-in-peach-100: #ffe0d5;
  --color-pretty-in-peach-200: #f1cbbc;
  --color-pretty-in-peach-300: #d9ac9a;
  --color-pretty-in-peach-400: #c5907e;
  --color-pretty-in-peach-500: #b17561;
  --color-pretty-in-peach-600: #956352;
  --color-pretty-in-peach-700: #784f41;
  --color-pretty-in-peach-800: #593930;
  --color-pretty-in-peach-900: #3e2720;
  --color-pretty-in-peach-950: #271510;
}

SCSS

$pretty-in-peach: #e9af9b;
$pretty-in-peach-rgb: 233, 175, 155;
$pretty-in-peach-light: mix(#fff, $pretty-in-peach, 20%);
$pretty-in-peach-dark: mix(#000, $pretty-in-peach, 20%);

.element {
  color: $pretty-in-peach;
  box-shadow: 0 0 0 2px rgba($pretty-in-peach, 0.35);
}