Aqua Blue

CSS

:root {
  --aqua-blue: #79b6bc;
  --aqua-blue-rgb: 121 182 188;
  --aqua-blue-oklch: oklch(0.737 0.063 203.7);
}

.element {
  color: var(--aqua-blue);
  background-color: hsl(185 33% 61%);
  border-color: oklch(0.737 0.063 203.7);
}

Tailwind CSS v4

@theme {
  --color-aqua-blue: #79b6bc;
  --color-aqua-blue-50: #e1fbfe;
  --color-aqua-blue-100: #d1eef2;
  --color-aqua-blue-200: #b6dde1;
  --color-aqua-blue-300: #92c1c7;
  --color-aqua-blue-400: #71aaaf;
  --color-aqua-blue-500: #4f9399;
  --color-aqua-blue-600: #437c82;
  --color-aqua-blue-700: #366368;
  --color-aqua-blue-800: #26494c;
  --color-aqua-blue-900: #193334;
  --color-aqua-blue-950: #091e20;
}

SCSS

$aqua-blue: #79b6bc;
$aqua-blue-rgb: 121, 182, 188;
$aqua-blue-light: mix(#fff, $aqua-blue, 20%);
$aqua-blue-dark: mix(#000, $aqua-blue, 20%);

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