Glass Sapphire

CSS

:root {
  --glass-sapphire: #587b9b;
  --glass-sapphire-rgb: 88 123 155;
  --glass-sapphire-oklch: oklch(0.569 0.064 246.8);
}

.element {
  color: var(--glass-sapphire);
  background-color: hsl(209 28% 48%);
  border-color: oklch(0.569 0.064 246.8);
}

Tailwind CSS v4

@theme {
  --color-glass-sapphire: #587b9b;
  --color-glass-sapphire-50: #e8f7ff;
  --color-glass-sapphire-100: #d8eafd;
  --color-glass-sapphire-200: #c0d7ef;
  --color-glass-sapphire-300: #9fbbd7;
  --color-glass-sapphire-400: #80a3c3;
  --color-glass-sapphire-500: #638aae;
  --color-glass-sapphire-600: #547593;
  --color-glass-sapphire-700: #435e76;
  --color-glass-sapphire-800: #2f4557;
  --color-glass-sapphire-900: #20303d;
  --color-glass-sapphire-950: #101c26;
}

SCSS

$glass-sapphire: #587b9b;
$glass-sapphire-rgb: 88, 123, 155;
$glass-sapphire-light: mix(#fff, $glass-sapphire, 20%);
$glass-sapphire-dark: mix(#000, $glass-sapphire, 20%);

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