Blue Sage

CSS

:root {
  --blue-sage: #57747a;
  --blue-sage-rgb: 87 116 122;
  --blue-sage-oklch: oklch(0.539 0.035 211.7);
}

.element {
  color: var(--blue-sage);
  background-color: hsl(190 17% 41%);
  border-color: oklch(0.539 0.035 211.7);
}

Tailwind CSS v4

@theme {
  --color-blue-sage: #57747a;
  --color-blue-sage-50: #ebf8fb;
  --color-blue-sage-100: #dcebef;
  --color-blue-sage-200: #c4d8dd;
  --color-blue-sage-300: #a4bcc2;
  --color-blue-sage-400: #88a4aa;
  --color-blue-sage-500: #6c8d94;
  --color-blue-sage-600: #5c777d;
  --color-blue-sage-700: #495f64;
  --color-blue-sage-800: #354649;
  --color-blue-sage-900: #243033;
  --color-blue-sage-950: #131d1e;
}

SCSS

$blue-sage: #57747a;
$blue-sage-rgb: 87, 116, 122;
$blue-sage-light: mix(#fff, $blue-sage, 20%);
$blue-sage-dark: mix(#000, $blue-sage, 20%);

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