Mesa Red

CSS

:root {
  --mesa-red: #92555b;
  --mesa-red-rgb: 146 85 91;
  --mesa-red-oklch: oklch(0.521 0.081 13.9);
}

.element {
  color: var(--mesa-red);
  background-color: hsl(354 26% 45%);
  border-color: oklch(0.521 0.081 13.9);
}

Tailwind CSS v4

@theme {
  --color-mesa-red: #92555b;
  --color-mesa-red-50: #ffeced;
  --color-mesa-red-100: #ffdedf;
  --color-mesa-red-200: #f5c7c8;
  --color-mesa-red-300: #dea7a9;
  --color-mesa-red-400: #ca8b90;
  --color-mesa-red-500: #b56f76;
  --color-mesa-red-600: #995e64;
  --color-mesa-red-700: #7b4b50;
  --color-mesa-red-800: #5b363b;
  --color-mesa-red-900: #402528;
  --color-mesa-red-950: #281416;
}

SCSS

$mesa-red: #92555b;
$mesa-red-rgb: 146, 85, 91;
$mesa-red-light: mix(#fff, $mesa-red, 20%);
$mesa-red-dark: mix(#000, $mesa-red, 20%);

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