Blue Atoll

CSS

:root {
  --blue-atoll: #00b3e1;
  --blue-atoll-rgb: 0 179 225;
  --blue-atoll-oklch: oklch(0.713 0.135 224.7);
}

.element {
  color: var(--blue-atoll);
  background-color: hsl(192 100% 44%);
  border-color: oklch(0.713 0.135 224.7);
}

Tailwind CSS v4

@theme {
  --color-blue-atoll: #00b3e1;
  --color-blue-atoll-50: #cdfeff;
  --color-blue-atoll-100: #b9f2ff;
  --color-blue-atoll-200: #94e1ff;
  --color-blue-atoll-300: #63c5ed;
  --color-blue-atoll-400: #1aaeda;
  --color-blue-atoll-500: #0096c8;
  --color-blue-atoll-600: #007fa9;
  --color-blue-atoll-700: #006688;
  --color-blue-atoll-800: #004b64;
  --color-blue-atoll-900: #003446;
  --color-blue-atoll-950: #00202e;
}

SCSS

$blue-atoll: #00b3e1;
$blue-atoll-rgb: 0, 179, 225;
$blue-atoll-light: mix(#fff, $blue-atoll, 20%);
$blue-atoll-dark: mix(#000, $blue-atoll, 20%);

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