Tint of Earth

CSS

:root {
  --tint-of-earth: #ce9480;
  --tint-of-earth-rgb: 206 148 128;
  --tint-of-earth-oklch: oklch(0.718 0.076 39.8);
}

.element {
  color: var(--tint-of-earth);
  background-color: hsl(15 44% 65%);
  border-color: oklch(0.718 0.076 39.8);
}

Tailwind CSS v4

@theme {
  --color-tint-of-earth: #ce9480;
  --color-tint-of-earth-50: #ffefe5;
  --color-tint-of-earth-100: #ffe0d4;
  --color-tint-of-earth-200: #f2cabb;
  --color-tint-of-earth-300: #daab99;
  --color-tint-of-earth-400: #c68f7d;
  --color-tint-of-earth-500: #b2755f;
  --color-tint-of-earth-600: #966351;
  --color-tint-of-earth-700: #794f41;
  --color-tint-of-earth-800: #59392f;
  --color-tint-of-earth-900: #3f2720;
  --color-tint-of-earth-950: #28150f;
}

SCSS

$tint-of-earth: #ce9480;
$tint-of-earth-rgb: 206, 148, 128;
$tint-of-earth-light: mix(#fff, $tint-of-earth, 20%);
$tint-of-earth-dark: mix(#000, $tint-of-earth, 20%);

.element {
  color: $tint-of-earth;
  box-shadow: 0 0 0 2px rgba($tint-of-earth, 0.35);
}