Earth Brown Violet

CSS

:root {
  --earth-brown-violet: #705364;
  --earth-brown-violet-rgb: 112 83 100;
  --earth-brown-violet-oklch: oklch(0.478 0.046 343);
}

.element {
  color: var(--earth-brown-violet);
  background-color: hsl(325 15% 38%);
  border-color: oklch(0.478 0.046 343);
}

Tailwind CSS v4

@theme {
  --color-earth-brown-violet: #705364;
  --color-earth-brown-violet-50: #fff0f8;
  --color-earth-brown-violet-100: #f4e2eb;
  --color-earth-brown-violet-200: #e4cdd9;
  --color-earth-brown-violet-300: #caaebd;
  --color-earth-brown-violet-400: #b394a6;
  --color-earth-brown-violet-500: #9d7a8e;
  --color-earth-brown-violet-600: #846878;
  --color-earth-brown-violet-700: #6a5360;
  --color-earth-brown-violet-800: #4e3c47;
  --color-earth-brown-violet-900: #362931;
  --color-earth-brown-violet-950: #21171d;
}

SCSS

$earth-brown-violet: #705364;
$earth-brown-violet-rgb: 112, 83, 100;
$earth-brown-violet-light: mix(#fff, $earth-brown-violet, 20%);
$earth-brown-violet-dark: mix(#000, $earth-brown-violet, 20%);

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