Blue Titmouse

CSS

:root {
  --blue-titmouse: #4466ff;
  --blue-titmouse-rgb: 68 102 255;
  --blue-titmouse-oklch: oklch(0.579 0.23 268.5);
}

.element {
  color: var(--blue-titmouse);
  background-color: hsl(229 100% 63%);
  border-color: oklch(0.579 0.23 268.5);
}

Tailwind CSS v4

@theme {
  --color-blue-titmouse: #4466ff;
  --color-blue-titmouse-50: #dcf3ff;
  --color-blue-titmouse-100: #cbe4ff;
  --color-blue-titmouse-200: #afceff;
  --color-blue-titmouse-300: #8cadff;
  --color-blue-titmouse-400: #6790ff;
  --color-blue-titmouse-500: #4a6fff;
  --color-blue-titmouse-600: #3f5fee;
  --color-blue-titmouse-700: #324cc0;
  --color-blue-titmouse-800: #1e3890;
  --color-blue-titmouse-900: #132666;
  --color-blue-titmouse-950: #061347;
}

SCSS

$blue-titmouse: #4466ff;
$blue-titmouse-rgb: 68, 102, 255;
$blue-titmouse-light: mix(#fff, $blue-titmouse, 20%);
$blue-titmouse-dark: mix(#000, $blue-titmouse, 20%);

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