Aquella

CSS

:root {
  --aquella: #59b6d9;
  --aquella-rgb: 89 182 217;
  --aquella-oklch: oklch(0.733 0.101 225.4);
}

.element {
  color: var(--aquella);
  background-color: hsl(196 63% 60%);
  border-color: oklch(0.733 0.101 225.4);
}

Tailwind CSS v4

@theme {
  --color-aquella: #59b6d9;
  --color-aquella-50: #d8fcff;
  --color-aquella-100: #c5efff;
  --color-aquella-200: #a7def6;
  --color-aquella-300: #7ec2e0;
  --color-aquella-400: #54abcc;
  --color-aquella-500: #1c93b9;
  --color-aquella-600: #1d7d9c;
  --color-aquella-700: #17647d;
  --color-aquella-800: #0c4a5c;
  --color-aquella-900: #083340;
  --color-aquella-950: #001f29;
}

SCSS

$aquella: #59b6d9;
$aquella-rgb: 89, 182, 217;
$aquella-light: mix(#fff, $aquella, 20%);
$aquella-dark: mix(#000, $aquella, 20%);

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