Blue Shell

CSS

:root {
  --blue-shell: #9bb3bc;
  --blue-shell-rgb: 155 179 188;
  --blue-shell-oklch: oklch(0.751 0.029 222.4);
}

.element {
  color: var(--blue-shell);
  background-color: hsl(196 20% 67%);
  border-color: oklch(0.751 0.029 222.4);
}

Tailwind CSS v4

@theme {
  --color-blue-shell: #9bb3bc;
  --color-blue-shell-50: #edf7fb;
  --color-blue-shell-100: #deeaef;
  --color-blue-shell-200: #c8d7de;
  --color-blue-shell-300: #a8bbc3;
  --color-blue-shell-400: #8ca3ab;
  --color-blue-shell-500: #718b94;
  --color-blue-shell-600: #60767e;
  --color-blue-shell-700: #4d5e64;
  --color-blue-shell-800: #37454a;
  --color-blue-shell-900: #263033;
  --color-blue-shell-950: #141c1f;
}

SCSS

$blue-shell: #9bb3bc;
$blue-shell-rgb: 155, 179, 188;
$blue-shell-light: mix(#fff, $blue-shell, 20%);
$blue-shell-dark: mix(#000, $blue-shell, 20%);

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