Purple Earth

CSS

:root {
  --purple-earth: #624646;
  --purple-earth-rgb: 98 70 70;
  --purple-earth-oklch: oklch(0.425 0.039 18.8);
}

.element {
  color: var(--purple-earth);
  background-color: hsl(0 17% 33%);
  border-color: oklch(0.425 0.039 18.8);
}

Tailwind CSS v4

@theme {
  --color-purple-earth: #624646;
  --color-purple-earth-50: #fff1f0;
  --color-purple-earth-100: #f5e3e2;
  --color-purple-earth-200: #e5cecd;
  --color-purple-earth-300: #cbb0af;
  --color-purple-earth-400: #b49695;
  --color-purple-earth-500: #9e7c7c;
  --color-purple-earth-600: #866969;
  --color-purple-earth-700: #6b5454;
  --color-purple-earth-800: #4f3d3e;
  --color-purple-earth-900: #372a2a;
  --color-purple-earth-950: #221818;
}

SCSS

$purple-earth: #624646;
$purple-earth-rgb: 98, 70, 70;
$purple-earth-light: mix(#fff, $purple-earth, 20%);
$purple-earth-dark: mix(#000, $purple-earth, 20%);

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