Costume Blue

CSS

:root {
  --costume-blue: #6477a0;
  --costume-blue-rgb: 100 119 160;
  --costume-blue-oklch: oklch(0.57 0.068 265.1);
}

.element {
  color: var(--costume-blue);
  background-color: hsl(221 24% 51%);
  border-color: oklch(0.57 0.068 265.1);
}

Tailwind CSS v4

@theme {
  --color-costume-blue: #6477a0;
  --color-costume-blue-50: #ecf5ff;
  --color-costume-blue-100: #dee8ff;
  --color-costume-blue-200: #c7d4f2;
  --color-costume-blue-300: #a8b7db;
  --color-costume-blue-400: #8b9ec7;
  --color-costume-blue-500: #7086b4;
  --color-costume-blue-600: #5f7198;
  --color-costume-blue-700: #4c5a7a;
  --color-costume-blue-800: #36425a;
  --color-costume-blue-900: #252e3f;
  --color-costume-blue-950: #141b28;
}

SCSS

$costume-blue: #6477a0;
$costume-blue-rgb: 100, 119, 160;
$costume-blue-light: mix(#fff, $costume-blue, 20%);
$costume-blue-dark: mix(#000, $costume-blue, 20%);

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