Lazurite Blue

CSS

:root {
  --lazurite-blue: #174c60;
  --lazurite-blue-rgb: 23 76 96;
  --lazurite-blue-oklch: oklch(0.392 0.064 227.2);
}

.element {
  color: var(--lazurite-blue);
  background-color: hsl(196 61% 23%);
  border-color: oklch(0.392 0.064 227.2);
}

Tailwind CSS v4

@theme {
  --color-lazurite-blue: #174c60;
  --color-lazurite-blue-50: #e3f9ff;
  --color-lazurite-blue-100: #d3edf9;
  --color-lazurite-blue-200: #b9daea;
  --color-lazurite-blue-300: #96bed2;
  --color-lazurite-blue-400: #76a7bc;
  --color-lazurite-blue-500: #568fa7;
  --color-lazurite-blue-600: #49798d;
  --color-lazurite-blue-700: #3a6171;
  --color-lazurite-blue-800: #294753;
  --color-lazurite-blue-900: #1b313a;
  --color-lazurite-blue-950: #0b1d24;
}

SCSS

$lazurite-blue: #174c60;
$lazurite-blue-rgb: 23, 76, 96;
$lazurite-blue-light: mix(#fff, $lazurite-blue, 20%);
$lazurite-blue-dark: mix(#000, $lazurite-blue, 20%);

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