Blue Dacnis

CSS

:root {
  --blue-dacnis: #44ddee;
  --blue-dacnis-rgb: 68 221 238;
  --blue-dacnis-oklch: oklch(0.826 0.126 206);
}

.element {
  color: var(--blue-dacnis);
  background-color: hsl(186 83% 60%);
  border-color: oklch(0.826 0.126 206);
}

Tailwind CSS v4

@theme {
  --color-blue-dacnis: #44ddee;
  --color-blue-dacnis-50: #ccffff;
  --color-blue-dacnis-100: #b7f4fe;
  --color-blue-dacnis-200: #92e4f0;
  --color-blue-dacnis-300: #5ec9d9;
  --color-blue-dacnis-400: #02b3c3;
  --color-blue-dacnis-500: #009caf;
  --color-blue-dacnis-600: #008494;
  --color-blue-dacnis-700: #006a76;
  --color-blue-dacnis-800: #004e56;
  --color-blue-dacnis-900: #00363c;
  --color-blue-dacnis-950: #002126;
}

SCSS

$blue-dacnis: #44ddee;
$blue-dacnis-rgb: 68, 221, 238;
$blue-dacnis-light: mix(#fff, $blue-dacnis, 20%);
$blue-dacnis-dark: mix(#000, $blue-dacnis, 20%);

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