Blue Astro

CSS

:root {
  --blue-astro: #50a7d9;
  --blue-astro-rgb: 80 167 217;
  --blue-astro-oklch: oklch(0.695 0.111 236.6);
}

.element {
  color: var(--blue-astro);
  background-color: hsl(202 64% 58%);
  border-color: oklch(0.695 0.111 236.6);
}

Tailwind CSS v4

@theme {
  --color-blue-astro: #50a7d9;
  --color-blue-astro-50: #d9fbff;
  --color-blue-astro-100: #c7eeff;
  --color-blue-astro-200: #a8dcff;
  --color-blue-astro-300: #80c0ea;
  --color-blue-astro-400: #57a8d8;
  --color-blue-astro-500: #2690c6;
  --color-blue-astro-600: #237aa7;
  --color-blue-astro-700: #1c6286;
  --color-blue-astro-800: #0f4863;
  --color-blue-astro-900: #0a3245;
  --color-blue-astro-950: #001e2d;
}

SCSS

$blue-astro: #50a7d9;
$blue-astro-rgb: 80, 167, 217;
$blue-astro-light: mix(#fff, $blue-astro, 20%);
$blue-astro-dark: mix(#000, $blue-astro, 20%);

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