Red Rock

CSS

:root {
  --red-rock: #a65052;
  --red-rock-rgb: 166 80 82;
  --red-rock-oklch: oklch(0.538 0.114 20.2);
}

.element {
  color: var(--red-rock);
  background-color: hsl(359 35% 48%);
  border-color: oklch(0.538 0.114 20.2);
}

Tailwind CSS v4

@theme {
  --color-red-rock: #a65052;
  --color-red-rock-50: #ffe9e6;
  --color-red-rock-100: #ffdad7;
  --color-red-rock-200: #ffc2be;
  --color-red-rock-300: #eca09d;
  --color-red-rock-400: #d98282;
  --color-red-rock-500: #c66466;
  --color-red-rock-600: #a75557;
  --color-red-rock-700: #864445;
  --color-red-rock-800: #643133;
  --color-red-rock-900: #462123;
  --color-red-rock-950: #2d1012;
}

SCSS

$red-rock: #a65052;
$red-rock-rgb: 166, 80, 82;
$red-rock-light: mix(#fff, $red-rock, 20%);
$red-rock-dark: mix(#000, $red-rock, 20%);

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