Mermaid

CSS

:root {
  --mermaid: #817a65;
  --mermaid-rgb: 129 122 101;
  --mermaid-oklch: oklch(0.58 0.032 91.8);
}

.element {
  color: var(--mermaid);
  background-color: hsl(45 12% 45%);
  border-color: oklch(0.58 0.032 91.8);
}

Tailwind CSS v4

@theme {
  --color-mermaid: #817a65;
  --color-mermaid-50: #f8f5eb;
  --color-mermaid-100: #ebe8dc;
  --color-mermaid-200: #d9d4c5;
  --color-mermaid-300: #bdb7a5;
  --color-mermaid-400: #a59e89;
  --color-mermaid-500: #8e866e;
  --color-mermaid-600: #78715e;
  --color-mermaid-700: #605b4b;
  --color-mermaid-800: #474236;
  --color-mermaid-900: #312e25;
  --color-mermaid-950: #1d1a13;
}

SCSS

$mermaid: #817a65;
$mermaid-rgb: 129, 122, 101;
$mermaid-light: mix(#fff, $mermaid, 20%);
$mermaid-dark: mix(#000, $mermaid, 20%);

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