Singing the Blues

CSS

:root {
  --singing-the-blues: #2b4d68;
  --singing-the-blues-rgb: 43 77 104;
  --singing-the-blues-oklch: oklch(0.407 0.061 244);
}

.element {
  color: var(--singing-the-blues);
  background-color: hsl(207 41% 29%);
  border-color: oklch(0.407 0.061 244);
}

Tailwind CSS v4

@theme {
  --color-singing-the-blues: #2b4d68;
  --color-singing-the-blues-50: #e8f7ff;
  --color-singing-the-blues-100: #d8eafb;
  --color-singing-the-blues-200: #c0d7ed;
  --color-singing-the-blues-300: #9fbbd5;
  --color-singing-the-blues-400: #80a3c0;
  --color-singing-the-blues-500: #638bac;
  --color-singing-the-blues-600: #547691;
  --color-singing-the-blues-700: #435e74;
  --color-singing-the-blues-800: #2f4556;
  --color-singing-the-blues-900: #20303c;
  --color-singing-the-blues-950: #101c26;
}

SCSS

$singing-the-blues: #2b4d68;
$singing-the-blues-rgb: 43, 77, 104;
$singing-the-blues-light: mix(#fff, $singing-the-blues, 20%);
$singing-the-blues-dark: mix(#000, $singing-the-blues, 20%);

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