Blue Gourami

CSS

:root {
  --blue-gourami: #69a2d5;
  --blue-gourami-rgb: 105 162 213;
  --blue-gourami-oklch: oklch(0.693 0.096 246.7);
}

.element {
  color: var(--blue-gourami);
  background-color: hsl(208 56% 62%);
  border-color: oklch(0.693 0.096 246.7);
}

Tailwind CSS v4

@theme {
  --color-blue-gourami: #69a2d5;
  --color-blue-gourami-50: #e1f8ff;
  --color-blue-gourami-100: #d0ebff;
  --color-blue-gourami-200: #b5d9fc;
  --color-blue-gourami-300: #91bce7;
  --color-blue-gourami-400: #6ea4d4;
  --color-blue-gourami-500: #4c8cc2;
  --color-blue-gourami-600: #4176a4;
  --color-blue-gourami-700: #345f84;
  --color-blue-gourami-800: #234661;
  --color-blue-gourami-900: #173044;
  --color-blue-gourami-950: #081c2c;
}

SCSS

$blue-gourami: #69a2d5;
$blue-gourami-rgb: 105, 162, 213;
$blue-gourami-light: mix(#fff, $blue-gourami, 20%);
$blue-gourami-dark: mix(#000, $blue-gourami, 20%);

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