Antigua Blue

CSS

:root {
  --antigua-blue: #06b1c4;
  --antigua-blue-rgb: 6 177 196;
  --antigua-blue-oklch: oklch(0.696 0.119 208.4);
}

.element {
  color: var(--antigua-blue);
  background-color: hsl(186 94% 40%);
  border-color: oklch(0.696 0.119 208.4);
}

Tailwind CSS v4

@theme {
  --color-antigua-blue: #06b1c4;
  --color-antigua-blue-50: #cfffff;
  --color-antigua-blue-100: #baf3fe;
  --color-antigua-blue-200: #97e3f1;
  --color-antigua-blue-300: #66c8d9;
  --color-antigua-blue-400: #26b1c3;
  --color-antigua-blue-500: #009baf;
  --color-antigua-blue-600: #008394;
  --color-antigua-blue-700: #006977;
  --color-antigua-blue-800: #004d57;
  --color-antigua-blue-900: #00363d;
  --color-antigua-blue-950: #002126;
}

SCSS

$antigua-blue: #06b1c4;
$antigua-blue-rgb: 6, 177, 196;
$antigua-blue-light: mix(#fff, $antigua-blue, 20%);
$antigua-blue-dark: mix(#000, $antigua-blue, 20%);

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