Tusche Blue

CSS

:root {
  --tusche-blue: #0082ad;
  --tusche-blue-rgb: 0 130 173;
  --tusche-blue-oklch: oklch(0.568 0.114 230.5);
}

.element {
  color: var(--tusche-blue);
  background-color: hsl(195 100% 34%);
  border-color: oklch(0.568 0.114 230.5);
}

Tailwind CSS v4

@theme {
  --color-tusche-blue: #0082ad;
  --color-tusche-blue-50: #d6fcff;
  --color-tusche-blue-100: #c3efff;
  --color-tusche-blue-200: #a3ddfd;
  --color-tusche-blue-300: #79c2e8;
  --color-tusche-blue-400: #4caad5;
  --color-tusche-blue-500: #0093c3;
  --color-tusche-blue-600: #097ca5;
  --color-tusche-blue-700: #0a6384;
  --color-tusche-blue-800: #014961;
  --color-tusche-blue-900: #033344;
  --color-tusche-blue-950: #001e2c;
}

SCSS

$tusche-blue: #0082ad;
$tusche-blue-rgb: 0, 130, 173;
$tusche-blue-light: mix(#fff, $tusche-blue, 20%);
$tusche-blue-dark: mix(#000, $tusche-blue, 20%);

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