Presumption

CSS

:root {
  --presumption: #5e6277;
  --presumption-rgb: 94 98 119;
  --presumption-oklch: oklch(0.5 0.034 276.6);
}

.element {
  color: var(--presumption);
  background-color: hsl(230 12% 42%);
  border-color: oklch(0.5 0.034 276.6);
}

Tailwind CSS v4

@theme {
  --color-presumption: #5e6277;
  --color-presumption-50: #f3f4ff;
  --color-presumption-100: #e5e7f3;
  --color-presumption-200: #d1d3e3;
  --color-presumption-300: #b3b6c9;
  --color-presumption-400: #999db3;
  --color-presumption-500: #80859d;
  --color-presumption-600: #6c7085;
  --color-presumption-700: #575a6a;
  --color-presumption-800: #3f424e;
  --color-presumption-900: #2b2d36;
  --color-presumption-950: #181a21;
}

SCSS

$presumption: #5e6277;
$presumption-rgb: 94, 98, 119;
$presumption-light: mix(#fff, $presumption, 20%);
$presumption-dark: mix(#000, $presumption, 20%);

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