Pale Terra

CSS

:root {
  --pale-terra: #eaaa96;
  --pale-terra-rgb: 234 170 150;
  --pale-terra-oklch: oklch(0.793 0.081 38.1);
}

.element {
  color: var(--pale-terra);
  background-color: hsl(14 67% 75%);
  border-color: oklch(0.793 0.081 38.1);
}

Tailwind CSS v4

@theme {
  --color-pale-terra: #eaaa96;
  --color-pale-terra-50: #ffeee4;
  --color-pale-terra-100: #ffe0d4;
  --color-pale-terra-200: #f4c9bb;
  --color-pale-terra-300: #ddaa98;
  --color-pale-terra-400: #c98e7c;
  --color-pale-terra-500: #b5735e;
  --color-pale-terra-600: #996150;
  --color-pale-terra-700: #7a4e40;
  --color-pale-terra-800: #5b382f;
  --color-pale-terra-900: #40261f;
  --color-pale-terra-950: #28150f;
}

SCSS

$pale-terra: #eaaa96;
$pale-terra-rgb: 234, 170, 150;
$pale-terra-light: mix(#fff, $pale-terra, 20%);
$pale-terra-dark: mix(#000, $pale-terra, 20%);

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