Terra Orange

CSS

:root {
  --terra-orange: #cc7661;
  --terra-orange-rgb: 204 118 97;
  --terra-orange-oklch: oklch(0.656 0.113 34.6);
}

.element {
  color: var(--terra-orange);
  background-color: hsl(12 51% 59%);
  border-color: oklch(0.656 0.113 34.6);
}

Tailwind CSS v4

@theme {
  --color-terra-orange: #cc7661;
  --color-terra-orange-50: #ffebdf;
  --color-terra-orange-100: #ffdcce;
  --color-terra-orange-200: #ffc4b3;
  --color-terra-orange-300: #eba38f;
  --color-terra-orange-400: #d88571;
  --color-terra-orange-500: #c56851;
  --color-terra-orange-600: #a75845;
  --color-terra-orange-700: #864637;
  --color-terra-orange-800: #643228;
  --color-terra-orange-900: #46221b;
  --color-terra-orange-950: #2d110b;
}

SCSS

$terra-orange: #cc7661;
$terra-orange-rgb: 204, 118, 97;
$terra-orange-light: mix(#fff, $terra-orange, 20%);
$terra-orange-dark: mix(#000, $terra-orange, 20%);

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