Blue Calypso

CSS

:root {
  --blue-calypso: #55a7b6;
  --blue-calypso-rgb: 85 167 182;
  --blue-calypso-oklch: oklch(0.683 0.083 211);
}

.element {
  color: var(--blue-calypso);
  background-color: hsl(189 40% 52%);
  border-color: oklch(0.683 0.083 211);
}

Tailwind CSS v4

@theme {
  --color-blue-calypso: #55a7b6;
  --color-blue-calypso-50: #dbfcff;
  --color-blue-calypso-100: #caf0f8;
  --color-blue-calypso-200: #acdee9;
  --color-blue-calypso-300: #85c3d1;
  --color-blue-calypso-400: #5facba;
  --color-blue-calypso-500: #3495a5;
  --color-blue-calypso-600: #2e7e8c;
  --color-blue-calypso-700: #256570;
  --color-blue-calypso-800: #184a52;
  --color-blue-calypso-900: #103339;
  --color-blue-calypso-950: #021f23;
}

SCSS

$blue-calypso: #55a7b6;
$blue-calypso-rgb: 85, 167, 182;
$blue-calypso-light: mix(#fff, $blue-calypso, 20%);
$blue-calypso-dark: mix(#000, $blue-calypso, 20%);

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