Blue Sparkle

CSS

:root {
  --blue-sparkle: #0077ff;
  --blue-sparkle-rgb: 0 119 255;
  --blue-sparkle-oklch: oklch(0.597 0.221 258);
}

.element {
  color: var(--blue-sparkle);
  background-color: hsl(212 100% 50%);
  border-color: oklch(0.597 0.221 258);
}

Tailwind CSS v4

@theme {
  --color-blue-sparkle: #0077ff;
  --color-blue-sparkle-50: #d0f7ff;
  --color-blue-sparkle-100: #bde9ff;
  --color-blue-sparkle-200: #9cd5ff;
  --color-blue-sparkle-300: #71b5ff;
  --color-blue-sparkle-400: #3e9aff;
  --color-blue-sparkle-500: #007cff;
  --color-blue-sparkle-600: #0069e8;
  --color-blue-sparkle-700: #0054bb;
  --color-blue-sparkle-800: #003e8c;
  --color-blue-sparkle-900: #002b63;
  --color-blue-sparkle-950: #001744;
}

SCSS

$blue-sparkle: #0077ff;
$blue-sparkle-rgb: 0, 119, 255;
$blue-sparkle-light: mix(#fff, $blue-sparkle, 20%);
$blue-sparkle-dark: mix(#000, $blue-sparkle, 20%);

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