Naxos Sky

CSS

:root {
  --naxos-sky: #5dc2db;
  --naxos-sky-rgb: 93 194 219;
  --naxos-sky-oklch: oklch(0.763 0.1 216.4);
}

.element {
  color: var(--naxos-sky);
  background-color: hsl(192 64% 61%);
  border-color: oklch(0.763 0.1 216.4);
}

Tailwind CSS v4

@theme {
  --color-naxos-sky: #5dc2db;
  --color-naxos-sky-50: #d6fdff;
  --color-naxos-sky-100: #c4f1ff;
  --color-naxos-sky-200: #a4dff1;
  --color-naxos-sky-300: #7ac4da;
  --color-naxos-sky-400: #4eadc4;
  --color-naxos-sky-500: #0196b1;
  --color-naxos-sky-600: #0e7f95;
  --color-naxos-sky-700: #0d6678;
  --color-naxos-sky-800: #054b58;
  --color-naxos-sky-900: #04343d;
  --color-naxos-sky-950: #001f27;
}

SCSS

$naxos-sky: #5dc2db;
$naxos-sky-rgb: 93, 194, 219;
$naxos-sky-light: mix(#fff, $naxos-sky, 20%);
$naxos-sky-dark: mix(#000, $naxos-sky, 20%);

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