Blue Bouquet

CSS

:root {
  --blue-bouquet: #0033ee;
  --blue-bouquet-rgb: 0 51 238;
  --blue-bouquet-oklch: oklch(0.465 0.273 264);
}

.element {
  color: var(--blue-bouquet);
  background-color: hsl(227 100% 47%);
  border-color: oklch(0.465 0.273 264);
}

Tailwind CSS v4

@theme {
  --color-blue-bouquet: #0033ee;
  --color-blue-bouquet-50: #d1f4ff;
  --color-blue-bouquet-100: #bde6ff;
  --color-blue-bouquet-200: #9dcfff;
  --color-blue-bouquet-300: #75adff;
  --color-blue-bouquet-400: #478eff;
  --color-blue-bouquet-500: #1f68ff;
  --color-blue-bouquet-600: #1c59ff;
  --color-blue-bouquet-700: #1548d2;
  --color-blue-bouquet-800: #00359e;
  --color-blue-bouquet-900: #012570;
  --color-blue-bouquet-950: #00114f;
}

SCSS

$blue-bouquet: #0033ee;
$blue-bouquet-rgb: 0, 51, 238;
$blue-bouquet-light: mix(#fff, $blue-bouquet, 20%);
$blue-bouquet-dark: mix(#000, $blue-bouquet, 20%);

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