Basilica Blue

CSS

:root {
  --basilica-blue: #4a9fa7;
  --basilica-blue-rgb: 74 159 167;
  --basilica-blue-oklch: oklch(0.653 0.082 203.6);
}

.element {
  color: var(--basilica-blue);
  background-color: hsl(185 39% 47%);
  border-color: oklch(0.653 0.082 203.6);
}

Tailwind CSS v4

@theme {
  --color-basilica-blue: #4a9fa7;
  --color-basilica-blue-50: #dbfdff;
  --color-basilica-blue-100: #c9f0f5;
  --color-basilica-blue-200: #acdfe5;
  --color-basilica-blue-300: #84c4cc;
  --color-basilica-blue-400: #5eadb4;
  --color-basilica-blue-500: #32969f;
  --color-basilica-blue-600: #2c7f86;
  --color-basilica-blue-700: #24666c;
  --color-basilica-blue-800: #174b4e;
  --color-basilica-blue-900: #0f3436;
  --color-basilica-blue-950: #021f21;
}

SCSS

$basilica-blue: #4a9fa7;
$basilica-blue-rgb: 74, 159, 167;
$basilica-blue-light: mix(#fff, $basilica-blue, 20%);
$basilica-blue-dark: mix(#000, $basilica-blue, 20%);

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