Blue Brocade

CSS

:root {
  --blue-brocade: #70b8d0;
  --blue-brocade-rgb: 112 184 208;
  --blue-brocade-oklch: oklch(0.744 0.08 221.4);
}

.element {
  color: var(--blue-brocade);
  background-color: hsl(195 51% 63%);
  border-color: oklch(0.744 0.08 221.4);
}

Tailwind CSS v4

@theme {
  --color-blue-brocade: #70b8d0;
  --color-blue-brocade-50: #defbff;
  --color-blue-brocade-100: #cceefc;
  --color-blue-brocade-200: #b0dcee;
  --color-blue-brocade-300: #8ac1d6;
  --color-blue-brocade-400: #66aac0;
  --color-blue-brocade-500: #4092ac;
  --color-blue-brocade-600: #377c91;
  --color-blue-brocade-700: #2c6374;
  --color-blue-brocade-800: #1d4955;
  --color-blue-brocade-900: #13333b;
  --color-blue-brocade-950: #051e25;
}

SCSS

$blue-brocade: #70b8d0;
$blue-brocade-rgb: 112, 184, 208;
$blue-brocade-light: mix(#fff, $blue-brocade, 20%);
$blue-brocade-dark: mix(#000, $blue-brocade, 20%);

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