Vive le Bleu

CSS

:root {
  --vive-le-bleu: #97bee2;
  --vive-le-bleu-rgb: 151 190 226;
  --vive-le-bleu-oklch: oklch(0.786 0.066 246.6);
}

.element {
  color: var(--vive-le-bleu);
  background-color: hsl(209 56% 74%);
  border-color: oklch(0.786 0.066 246.6);
}

Tailwind CSS v4

@theme {
  --color-vive-le-bleu: #97bee2;
  --color-vive-le-bleu-50: #e7f7ff;
  --color-vive-le-bleu-100: #d7eafe;
  --color-vive-le-bleu-200: #bfd7f0;
  --color-vive-le-bleu-300: #9ebbd8;
  --color-vive-le-bleu-400: #7fa3c4;
  --color-vive-le-bleu-500: #618bb0;
  --color-vive-le-bleu-600: #537595;
  --color-vive-le-bleu-700: #425e77;
  --color-vive-le-bleu-800: #2e4558;
  --color-vive-le-bleu-900: #1f303d;
  --color-vive-le-bleu-950: #0f1c27;
}

SCSS

$vive-le-bleu: #97bee2;
$vive-le-bleu-rgb: 151, 190, 226;
$vive-le-bleu-light: mix(#fff, $vive-le-bleu, 20%);
$vive-le-bleu-dark: mix(#000, $vive-le-bleu, 20%);

.element {
  color: $vive-le-bleu;
  box-shadow: 0 0 0 2px rgba($vive-le-bleu, 0.35);
}