Cook’s Bay

CSS

:root {
  --cook-s-bay: #014e83;
  --cook-s-bay-rgb: 1 78 131;
  --cook-s-bay-oklch: oklch(0.413 0.11 247.6);
}

.element {
  color: var(--cook-s-bay);
  background-color: hsl(204 98% 26%);
  border-color: oklch(0.413 0.11 247.6);
}

Tailwind CSS v4

@theme {
  --color-cook-s-bay: #014e83;
  --color-cook-s-bay-50: #def8ff;
  --color-cook-s-bay-100: #cdecff;
  --color-cook-s-bay-200: #b1d9ff;
  --color-cook-s-bay-300: #8cbcee;
  --color-cook-s-bay-400: #67a4dc;
  --color-cook-s-bay-500: #438bcb;
  --color-cook-s-bay-600: #3a76ab;
  --color-cook-s-bay-700: #2e5e89;
  --color-cook-s-bay-800: #1e4666;
  --color-cook-s-bay-900: #133047;
  --color-cook-s-bay-950: #051c2f;
}

SCSS

$cook-s-bay: #014e83;
$cook-s-bay-rgb: 1, 78, 131;
$cook-s-bay-light: mix(#fff, $cook-s-bay, 20%);
$cook-s-bay-dark: mix(#000, $cook-s-bay, 20%);

.element {
  color: $cook-s-bay;
  box-shadow: 0 0 0 2px rgba($cook-s-bay, 0.35);
}