Blue Depression

CSS

:root {
  --blue-depression: #4428bc;
  --blue-depression-rgb: 68 40 188;
  --blue-depression-oklch: oklch(0.423 0.213 280.9);
}

.element {
  color: var(--blue-depression);
  background-color: hsl(251 65% 45%);
  border-color: oklch(0.423 0.213 280.9);
}

Tailwind CSS v4

@theme {
  --color-blue-depression: #4428bc;
  --color-blue-depression-50: #eceeff;
  --color-blue-depression-100: #dddfff;
  --color-blue-depression-200: #c7c8ff;
  --color-blue-depression-300: #a9a6ff;
  --color-blue-depression-400: #8c88ff;
  --color-blue-depression-500: #7567ff;
  --color-blue-depression-600: #6358e2;
  --color-blue-depression-700: #4f46b6;
  --color-blue-depression-800: #363489;
  --color-blue-depression-900: #252361;
  --color-blue-depression-950: #141143;
}

SCSS

$blue-depression: #4428bc;
$blue-depression-rgb: 68, 40, 188;
$blue-depression-light: mix(#fff, $blue-depression, 20%);
$blue-depression-dark: mix(#000, $blue-depression, 20%);

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