Evening Hush

CSS

:root {
  --evening-hush: #7b8ca8;
  --evening-hush-rgb: 123 140 168;
  --evening-hush-oklch: oklch(0.637 0.047 260.4);
}

.element {
  color: var(--evening-hush);
  background-color: hsl(217 21% 57%);
  border-color: oklch(0.637 0.047 260.4);
}

Tailwind CSS v4

@theme {
  --color-evening-hush: #7b8ca8;
  --color-evening-hush-50: #eef6ff;
  --color-evening-hush-100: #e0e8f8;
  --color-evening-hush-200: #cad5e9;
  --color-evening-hush-300: #abb8d0;
  --color-evening-hush-400: #8f9fbb;
  --color-evening-hush-500: #7487a6;
  --color-evening-hush-600: #63728c;
  --color-evening-hush-700: #4f5b70;
  --color-evening-hush-800: #394353;
  --color-evening-hush-900: #272e3a;
  --color-evening-hush-950: #151b24;
}

SCSS

$evening-hush: #7b8ca8;
$evening-hush-rgb: 123, 140, 168;
$evening-hush-light: mix(#fff, $evening-hush, 20%);
$evening-hush-dark: mix(#000, $evening-hush, 20%);

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