Amfissa Olive

CSS

:root {
  --amfissa-olive: #783e48;
  --amfissa-olive-rgb: 120 62 72;
  --amfissa-olive-oklch: oklch(0.439 0.081 10);
}

.element {
  color: var(--amfissa-olive);
  background-color: hsl(350 32% 36%);
  border-color: oklch(0.439 0.081 10);
}

Tailwind CSS v4

@theme {
  --color-amfissa-olive: #783e48;
  --color-amfissa-olive-50: #ffecef;
  --color-amfissa-olive-100: #ffdde1;
  --color-amfissa-olive-200: #f5c7cb;
  --color-amfissa-olive-300: #dea7ac;
  --color-amfissa-olive-400: #c98b93;
  --color-amfissa-olive-500: #b56f7a;
  --color-amfissa-olive-600: #995e67;
  --color-amfissa-olive-700: #7b4b52;
  --color-amfissa-olive-800: #5b363d;
  --color-amfissa-olive-900: #3f252a;
  --color-amfissa-olive-950: #281417;
}

SCSS

$amfissa-olive: #783e48;
$amfissa-olive-rgb: 120, 62, 72;
$amfissa-olive-light: mix(#fff, $amfissa-olive, 20%);
$amfissa-olive-dark: mix(#000, $amfissa-olive, 20%);

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