Mata Hari

CSS

:root {
  --mata-hari: #544859;
  --mata-hari-rgb: 84 72 89;
  --mata-hari-oklch: oklch(0.42 0.032 316);
}

.element {
  color: var(--mata-hari);
  background-color: hsl(282 11% 32%);
  border-color: oklch(0.42 0.032 316);
}

Tailwind CSS v4

@theme {
  --color-mata-hari: #544859;
  --color-mata-hari-50: #f9f2fb;
  --color-mata-hari-100: #ece5ef;
  --color-mata-hari-200: #dad0dd;
  --color-mata-hari-300: #beb3c2;
  --color-mata-hari-400: #a699ab;
  --color-mata-hari-500: #8f8095;
  --color-mata-hari-600: #796c7e;
  --color-mata-hari-700: #615765;
  --color-mata-hari-800: #463f4a;
  --color-mata-hari-900: #312c33;
  --color-mata-hari-950: #1d191f;
}

SCSS

$mata-hari: #544859;
$mata-hari-rgb: 84, 72, 89;
$mata-hari-light: mix(#fff, $mata-hari, 20%);
$mata-hari-dark: mix(#000, $mata-hari, 20%);

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