Red Terra

CSS

:root {
  --red-terra: #ae4930;
  --red-terra-rgb: 174 73 48;
  --red-terra-oklch: oklch(0.534 0.138 35.1);
}

.element {
  color: var(--red-terra);
  background-color: hsl(12 57% 44%);
  border-color: oklch(0.534 0.138 35.1);
}

Tailwind CSS v4

@theme {
  --color-red-terra: #ae4930;
  --color-red-terra-50: #ffe8da;
  --color-red-terra-100: #ffd9c8;
  --color-red-terra-200: #ffc0aa;
  --color-red-terra-300: #f59e84;
  --color-red-terra-400: #e47e65;
  --color-red-terra-500: #d15e42;
  --color-red-terra-600: #b15039;
  --color-red-terra-700: #8e402d;
  --color-red-terra-800: #6a2d21;
  --color-red-terra-900: #4b1f16;
  --color-red-terra-950: #310e07;
}

SCSS

$red-terra: #ae4930;
$red-terra-rgb: 174, 73, 48;
$red-terra-light: mix(#fff, $red-terra, 20%);
$red-terra-dark: mix(#000, $red-terra, 20%);

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