Galleon Blue

CSS

:root {
  --galleon-blue: #3f95bf;
  --galleon-blue-rgb: 63 149 191;
  --galleon-blue-oklch: oklch(0.635 0.103 233);
}

.element {
  color: var(--galleon-blue);
  background-color: hsl(200 50% 50%);
  border-color: oklch(0.635 0.103 233);
}

Tailwind CSS v4

@theme {
  --color-galleon-blue: #3f95bf;
  --color-galleon-blue-50: #dafbff;
  --color-galleon-blue-100: #c8eeff;
  --color-galleon-blue-200: #aadcfa;
  --color-galleon-blue-300: #82c0e5;
  --color-galleon-blue-400: #5aa9d1;
  --color-galleon-blue-500: #2b91bf;
  --color-galleon-blue-600: #277ba1;
  --color-galleon-blue-700: #1f6281;
  --color-galleon-blue-800: #12485f;
  --color-galleon-blue-900: #0c3243;
  --color-galleon-blue-950: #001e2b;
}

SCSS

$galleon-blue: #3f95bf;
$galleon-blue-rgb: 63, 149, 191;
$galleon-blue-light: mix(#fff, $galleon-blue, 20%);
$galleon-blue-dark: mix(#000, $galleon-blue, 20%);

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