Ethereal Blue

CSS

:root {
  --ethereal-blue: #5ca6ce;
  --ethereal-blue-rgb: 92 166 206;
  --ethereal-blue-oklch: oklch(0.693 0.094 234);
}

.element {
  color: var(--ethereal-blue);
  background-color: hsl(201 54% 58%);
  border-color: oklch(0.693 0.094 234);
}

Tailwind CSS v4

@theme {
  --color-ethereal-blue: #5ca6ce;
  --color-ethereal-blue-50: #dcfaff;
  --color-ethereal-blue-100: #cbeeff;
  --color-ethereal-blue-200: #aedbf8;
  --color-ethereal-blue-300: #88bfe2;
  --color-ethereal-blue-400: #62a8ce;
  --color-ethereal-blue-500: #3a90bb;
  --color-ethereal-blue-600: #337a9e;
  --color-ethereal-blue-700: #29627f;
  --color-ethereal-blue-800: #1a485d;
  --color-ethereal-blue-900: #113241;
  --color-ethereal-blue-950: #031e2a;
}

SCSS

$ethereal-blue: #5ca6ce;
$ethereal-blue-rgb: 92, 166, 206;
$ethereal-blue-light: mix(#fff, $ethereal-blue, 20%);
$ethereal-blue-dark: mix(#000, $ethereal-blue, 20%);

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