Blue Shock

CSS

:root {
  --blue-shock: #7593cb;
  --blue-shock-rgb: 117 147 203;
  --blue-shock-oklch: oklch(0.663 0.091 262.5);
}

.element {
  color: var(--blue-shock);
  background-color: hsl(219 45% 63%);
  border-color: oklch(0.663 0.091 262.5);
}

Tailwind CSS v4

@theme {
  --color-blue-shock: #7593cb;
  --color-blue-shock-50: #e8f6ff;
  --color-blue-shock-100: #d9e8ff;
  --color-blue-shock-200: #c1d5fc;
  --color-blue-shock-300: #a0b7e7;
  --color-blue-shock-400: #829fd4;
  --color-blue-shock-500: #6586c2;
  --color-blue-shock-600: #5671a4;
  --color-blue-shock-700: #455b84;
  --color-blue-shock-800: #304362;
  --color-blue-shock-900: #202e45;
  --color-blue-shock-950: #101b2c;
}

SCSS

$blue-shock: #7593cb;
$blue-shock-rgb: 117, 147, 203;
$blue-shock-light: mix(#fff, $blue-shock, 20%);
$blue-shock-dark: mix(#000, $blue-shock, 20%);

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