Mermaid’s Cove

CSS

:root {
  --mermaid-s-cove: #8aa786;
  --mermaid-s-cove-rgb: 138 167 134;
  --mermaid-s-cove-oklch: oklch(0.697 0.057 141.7);
}

.element {
  color: var(--mermaid-s-cove);
  background-color: hsl(113 16% 59%);
  border-color: oklch(0.697 0.057 141.7);
}

Tailwind CSS v4

@theme {
  --color-mermaid-s-cove: #8aa786;
  --color-mermaid-s-cove-50: #ecfaeb;
  --color-mermaid-s-cove-100: #ddeddc;
  --color-mermaid-s-cove-200: #c6dbc5;
  --color-mermaid-s-cove-300: #a7bfa5;
  --color-mermaid-s-cove-400: #8ca788;
  --color-mermaid-s-cove-500: #71906d;
  --color-mermaid-s-cove-600: #607a5c;
  --color-mermaid-s-cove-700: #4c624a;
  --color-mermaid-s-cove-800: #384734;
  --color-mermaid-s-cove-900: #263124;
  --color-mermaid-s-cove-950: #151d13;
}

SCSS

$mermaid-s-cove: #8aa786;
$mermaid-s-cove-rgb: 138, 167, 134;
$mermaid-s-cove-light: mix(#fff, $mermaid-s-cove, 20%);
$mermaid-s-cove-dark: mix(#000, $mermaid-s-cove, 20%);

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