Peppermint Stick

CSS

:root {
  --peppermint-stick: #e8b9be;
  --peppermint-stick-rgb: 232 185 190;
  --peppermint-stick-oklch: oklch(0.829 0.055 11.2);
}

.element {
  color: var(--peppermint-stick);
  background-color: hsl(354 51% 82%);
  border-color: oklch(0.829 0.055 11.2);
}

Tailwind CSS v4

@theme {
  --color-peppermint-stick: #e8b9be;
  --color-peppermint-stick-50: #ffeff1;
  --color-peppermint-stick-100: #fae1e3;
  --color-peppermint-stick-200: #ebcbcd;
  --color-peppermint-stick-300: #d2adaf;
  --color-peppermint-stick-400: #bc9296;
  --color-peppermint-stick-500: #a7777d;
  --color-peppermint-stick-600: #8d656a;
  --color-peppermint-stick-700: #715155;
  --color-peppermint-stick-800: #533b3e;
  --color-peppermint-stick-900: #3a282b;
  --color-peppermint-stick-950: #241618;
}

SCSS

$peppermint-stick: #e8b9be;
$peppermint-stick-rgb: 232, 185, 190;
$peppermint-stick-light: mix(#fff, $peppermint-stick, 20%);
$peppermint-stick-dark: mix(#000, $peppermint-stick, 20%);

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