Justice

CSS

:root {
  --justice: #606b8e;
  --justice-rgb: 96 107 142;
  --justice-oklch: oklch(0.532 0.057 270.9);
}

.element {
  color: var(--justice);
  background-color: hsl(226 19% 47%);
  border-color: oklch(0.532 0.057 270.9);
}

Tailwind CSS v4

@theme {
  --color-justice: #606b8e;
  --color-justice-50: #eff5ff;
  --color-justice-100: #e1e7fc;
  --color-justice-200: #ccd3ed;
  --color-justice-300: #adb6d5;
  --color-justice-400: #929dc1;
  --color-justice-500: #7885ad;
  --color-justice-600: #667092;
  --color-justice-700: #515a75;
  --color-justice-800: #3a4256;
  --color-justice-900: #282d3c;
  --color-justice-950: #161a26;
}

SCSS

$justice: #606b8e;
$justice-rgb: 96, 107, 142;
$justice-light: mix(#fff, $justice, 20%);
$justice-dark: mix(#000, $justice, 20%);

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