Relaxed Blue

CSS

:root {
  --relaxed-blue: #698a97;
  --relaxed-blue-rgb: 105 138 151;
  --relaxed-blue-oklch: oklch(0.613 0.042 224.1);
}

.element {
  color: var(--relaxed-blue);
  background-color: hsl(197 18% 50%);
  border-color: oklch(0.613 0.042 224.1);
}

Tailwind CSS v4

@theme {
  --color-relaxed-blue: #698a97;
  --color-relaxed-blue-50: #e9f8fe;
  --color-relaxed-blue-100: #daebf3;
  --color-relaxed-blue-200: #c2d8e2;
  --color-relaxed-blue-300: #a2bcc8;
  --color-relaxed-blue-400: #84a4b1;
  --color-relaxed-blue-500: #688d9b;
  --color-relaxed-blue-600: #587783;
  --color-relaxed-blue-700: #465f69;
  --color-relaxed-blue-800: #32464d;
  --color-relaxed-blue-900: #223035;
  --color-relaxed-blue-950: #111d21;
}

SCSS

$relaxed-blue: #698a97;
$relaxed-blue-rgb: 105, 138, 151;
$relaxed-blue-light: mix(#fff, $relaxed-blue, 20%);
$relaxed-blue-dark: mix(#000, $relaxed-blue, 20%);

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