Blue Dam

CSS

:root {
  --blue-dam: #a2c6d3;
  --blue-dam-rgb: 162 198 211;
  --blue-dam-oklch: oklch(0.805 0.043 221.8);
}

.element {
  color: var(--blue-dam);
  background-color: hsl(196 36% 73%);
  border-color: oklch(0.805 0.043 221.8);
}

Tailwind CSS v4

@theme {
  --color-blue-dam: #a2c6d3;
  --color-blue-dam-50: #e9f8fe;
  --color-blue-dam-100: #daebf3;
  --color-blue-dam-200: #c2d9e2;
  --color-blue-dam-300: #a1bdc8;
  --color-blue-dam-400: #83a5b1;
  --color-blue-dam-500: #678d9b;
  --color-blue-dam-600: #577783;
  --color-blue-dam-700: #465f69;
  --color-blue-dam-800: #32464d;
  --color-blue-dam-900: #223035;
  --color-blue-dam-950: #111d20;
}

SCSS

$blue-dam: #a2c6d3;
$blue-dam-rgb: 162, 198, 211;
$blue-dam-light: mix(#fff, $blue-dam, 20%);
$blue-dam-dark: mix(#000, $blue-dam, 20%);

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