Peach Ash

CSS

:root {
  --peach-ash: #efc4bb;
  --peach-ash-rgb: 239 196 187;
  --peach-ash-oklch: oklch(0.855 0.051 31.9);
}

.element {
  color: var(--peach-ash);
  background-color: hsl(10 62% 84%);
  border-color: oklch(0.855 0.051 31.9);
}

Tailwind CSS v4

@theme {
  --color-peach-ash: #efc4bb;
  --color-peach-ash-50: #fff0ec;
  --color-peach-ash-100: #f8e2dd;
  --color-peach-ash-200: #e9cdc6;
  --color-peach-ash-300: #d0afa7;
  --color-peach-ash-400: #bb948c;
  --color-peach-ash-500: #a57a71;
  --color-peach-ash-600: #8c6760;
  --color-peach-ash-700: #70534d;
  --color-peach-ash-800: #533c38;
  --color-peach-ash-900: #3a2926;
  --color-peach-ash-950: #241715;
}

SCSS

$peach-ash: #efc4bb;
$peach-ash-rgb: 239, 196, 187;
$peach-ash-light: mix(#fff, $peach-ash, 20%);
$peach-ash-dark: mix(#000, $peach-ash, 20%);

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