Mermaid Net

CSS

:root {
  --mermaid-net: #22cccc;
  --mermaid-net-rgb: 34 204 204;
  --mermaid-net-oklch: oklch(0.768 0.126 194.8);
}

.element {
  color: var(--mermaid-net);
  background-color: hsl(180 71% 47%);
  border-color: oklch(0.768 0.126 194.8);
}

Tailwind CSS v4

@theme {
  --color-mermaid-net: #22cccc;
  --color-mermaid-net-50: #ccffff;
  --color-mermaid-net-100: #b7f6f6;
  --color-mermaid-net-200: #91e5e7;
  --color-mermaid-net-300: #5dcbcd;
  --color-mermaid-net-400: #00b5b5;
  --color-mermaid-net-500: #009fa0;
  --color-mermaid-net-600: #008687;
  --color-mermaid-net-700: #006b6c;
  --color-mermaid-net-800: #004f4e;
  --color-mermaid-net-900: #003736;
  --color-mermaid-net-950: #002221;
}

SCSS

$mermaid-net: #22cccc;
$mermaid-net-rgb: 34, 204, 204;
$mermaid-net-light: mix(#fff, $mermaid-net, 20%);
$mermaid-net-dark: mix(#000, $mermaid-net, 20%);

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