Mesa Pink

CSS

:root {
  --mesa-pink: #ddb1a8;
  --mesa-pink-rgb: 221 177 168;
  --mesa-pink-oklch: oklch(0.797 0.053 31.6);
}

.element {
  color: var(--mesa-pink);
  background-color: hsl(10 44% 76%);
  border-color: oklch(0.797 0.053 31.6);
}

Tailwind CSS v4

@theme {
  --color-mesa-pink: #ddb1a8;
  --color-mesa-pink-50: #fff0eb;
  --color-mesa-pink-100: #f9e2dc;
  --color-mesa-pink-200: #eacdc6;
  --color-mesa-pink-300: #d1aea6;
  --color-mesa-pink-400: #bc938b;
  --color-mesa-pink-500: #a67970;
  --color-mesa-pink-600: #8d675f;
  --color-mesa-pink-700: #71524c;
  --color-mesa-pink-800: #533c38;
  --color-mesa-pink-900: #3a2926;
  --color-mesa-pink-950: #241714;
}

SCSS

$mesa-pink: #ddb1a8;
$mesa-pink-rgb: 221, 177, 168;
$mesa-pink-light: mix(#fff, $mesa-pink, 20%);
$mesa-pink-dark: mix(#000, $mesa-pink, 20%);

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