Goddess of the Nile

CSS

:root {
  --goddess-of-the-nile: #5d7f9d;
  --goddess-of-the-nile-rgb: 93 127 157;
  --goddess-of-the-nile-oklch: oklch(0.582 0.06 245.7);
}

.element {
  color: var(--goddess-of-the-nile);
  background-color: hsl(208 26% 49%);
  border-color: oklch(0.582 0.06 245.7);
}

Tailwind CSS v4

@theme {
  --color-goddess-of-the-nile: #5d7f9d;
  --color-goddess-of-the-nile-50: #e8f7ff;
  --color-goddess-of-the-nile-100: #d9eafc;
  --color-goddess-of-the-nile-200: #c1d7ed;
  --color-goddess-of-the-nile-300: #a0bbd5;
  --color-goddess-of-the-nile-400: #81a3c0;
  --color-goddess-of-the-nile-500: #648bac;
  --color-goddess-of-the-nile-600: #557591;
  --color-goddess-of-the-nile-700: #445e75;
  --color-goddess-of-the-nile-800: #304556;
  --color-goddess-of-the-nile-900: #21303c;
  --color-goddess-of-the-nile-950: #101c26;
}

SCSS

$goddess-of-the-nile: #5d7f9d;
$goddess-of-the-nile-rgb: 93, 127, 157;
$goddess-of-the-nile-light: mix(#fff, $goddess-of-the-nile, 20%);
$goddess-of-the-nile-dark: mix(#000, $goddess-of-the-nile, 20%);

.element {
  color: $goddess-of-the-nile;
  box-shadow: 0 0 0 2px rgba($goddess-of-the-nile, 0.35);
}