Mayan Blue

CSS

:root {
  --mayan-blue: #006b6c;
  --mayan-blue-rgb: 0 107 108;
  --mayan-blue-oklch: oklch(0.478 0.082 195.9);
}

.element {
  color: var(--mayan-blue);
  background-color: hsl(181 100% 21%);
  border-color: oklch(0.478 0.082 195.9);
}

Tailwind CSS v4

@theme {
  --color-mayan-blue: #006b6c;
  --color-mayan-blue-50: #dbfdfd;
  --color-mayan-blue-100: #c9f1f2;
  --color-mayan-blue-200: #ace0e1;
  --color-mayan-blue-300: #85c5c6;
  --color-mayan-blue-400: #5faeae;
  --color-mayan-blue-500: #349798;
  --color-mayan-blue-600: #2e8080;
  --color-mayan-blue-700: #256667;
  --color-mayan-blue-800: #194b4b;
  --color-mayan-blue-900: #103434;
  --color-mayan-blue-950: #03201f;
}

SCSS

$mayan-blue: #006b6c;
$mayan-blue-rgb: 0, 107, 108;
$mayan-blue-light: mix(#fff, $mayan-blue, 20%);
$mayan-blue-dark: mix(#000, $mayan-blue, 20%);

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