Aztec Sky

CSS

:root {
  --aztec-sky: #4db5d7;
  --aztec-sky-rgb: 77 181 215;
  --aztec-sky-oklch: oklch(0.726 0.107 222.9);
}

.element {
  color: var(--aztec-sky);
  background-color: hsl(195 63% 57%);
  border-color: oklch(0.726 0.107 222.9);
}

Tailwind CSS v4

@theme {
  --color-aztec-sky: #4db5d7;
  --color-aztec-sky-50: #d6fcff;
  --color-aztec-sky-100: #c3f0ff;
  --color-aztec-sky-200: #a3dff7;
  --color-aztec-sky-300: #78c3e1;
  --color-aztec-sky-400: #4baccc;
  --color-aztec-sky-500: #0095b9;
  --color-aztec-sky-600: #057e9c;
  --color-aztec-sky-700: #07657d;
  --color-aztec-sky-800: #014a5c;
  --color-aztec-sky-900: #023440;
  --color-aztec-sky-950: #001f29;
}

SCSS

$aztec-sky: #4db5d7;
$aztec-sky-rgb: 77, 181, 215;
$aztec-sky-light: mix(#fff, $aztec-sky, 20%);
$aztec-sky-dark: mix(#000, $aztec-sky, 20%);

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