Red Rock Panorama

CSS

:root {
  --red-rock-panorama: #b29e9d;
  --red-rock-panorama-rgb: 178 158 157;
  --red-rock-panorama-oklch: oklch(0.716 0.024 21.1);
}

.element {
  color: var(--red-rock-panorama);
  background-color: hsl(3 12% 66%);
  border-color: oklch(0.716 0.024 21.1);
}

Tailwind CSS v4

@theme {
  --color-red-rock-panorama: #b29e9d;
  --color-red-rock-panorama-50: #fcf3f2;
  --color-red-rock-panorama-100: #f0e5e4;
  --color-red-rock-panorama-200: #ded1cf;
  --color-red-rock-panorama-300: #c3b3b2;
  --color-red-rock-panorama-400: #ac9998;
  --color-red-rock-panorama-500: #95807f;
  --color-red-rock-panorama-600: #7e6d6c;
  --color-red-rock-panorama-700: #655756;
  --color-red-rock-panorama-800: #4a3f3f;
  --color-red-rock-panorama-900: #342c2b;
  --color-red-rock-panorama-950: #1f1919;
}

SCSS

$red-rock-panorama: #b29e9d;
$red-rock-panorama-rgb: 178, 158, 157;
$red-rock-panorama-light: mix(#fff, $red-rock-panorama, 20%);
$red-rock-panorama-dark: mix(#000, $red-rock-panorama, 20%);

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