Western Pink

CSS

:root {
  --western-pink: #ba816e;
  --western-pink-rgb: 186 129 110;
  --western-pink-oklch: oklch(0.656 0.076 39.2);
}

.element {
  color: var(--western-pink);
  background-color: hsl(15 36% 58%);
  border-color: oklch(0.656 0.076 39.2);
}

Tailwind CSS v4

@theme {
  --color-western-pink: #ba816e;
  --color-western-pink-50: #ffefe5;
  --color-western-pink-100: #ffe0d5;
  --color-western-pink-200: #f2cabc;
  --color-western-pink-300: #daab9a;
  --color-western-pink-400: #c68f7d;
  --color-western-pink-500: #b27460;
  --color-western-pink-600: #966352;
  --color-western-pink-700: #794f41;
  --color-western-pink-800: #5a392f;
  --color-western-pink-900: #3f2720;
  --color-western-pink-950: #281510;
}

SCSS

$western-pink: #ba816e;
$western-pink-rgb: 186, 129, 110;
$western-pink-light: mix(#fff, $western-pink, 20%);
$western-pink-dark: mix(#000, $western-pink, 20%);

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