Blue Darknut

CSS

:root {
  --blue-darknut: #0078f8;
  --blue-darknut-rgb: 0 120 248;
  --blue-darknut-oklch: oklch(0.593 0.211 257.1);
}

.element {
  color: var(--blue-darknut);
  background-color: hsl(211 100% 49%);
  border-color: oklch(0.593 0.211 257.1);
}

Tailwind CSS v4

@theme {
  --color-blue-darknut: #0078f8;
  --color-blue-darknut-50: #d1f7ff;
  --color-blue-darknut-100: #beeaff;
  --color-blue-darknut-200: #9dd5ff;
  --color-blue-darknut-300: #72b7ff;
  --color-blue-darknut-400: #3f9cff;
  --color-blue-darknut-500: #007eff;
  --color-blue-darknut-600: #006be3;
  --color-blue-darknut-700: #0056b7;
  --color-blue-darknut-800: #004089;
  --color-blue-darknut-900: #002c61;
  --color-blue-darknut-950: #001843;
}

SCSS

$blue-darknut: #0078f8;
$blue-darknut-rgb: 0, 120, 248;
$blue-darknut-light: mix(#fff, $blue-darknut, 20%);
$blue-darknut-dark: mix(#000, $blue-darknut, 20%);

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