Hindsight

CSS

:root {
  --hindsight: #bdc9e3;
  --hindsight-rgb: 189 201 227;
  --hindsight-oklch: oklch(0.835 0.039 265.8);
}

.element {
  color: var(--hindsight);
  background-color: hsl(221 40% 82%);
  border-color: oklch(0.835 0.039 265.8);
}

Tailwind CSS v4

@theme {
  --color-hindsight: #bdc9e3;
  --color-hindsight-50: #f0f5ff;
  --color-hindsight-100: #e2e8f5;
  --color-hindsight-200: #cdd4e5;
  --color-hindsight-300: #afb7cc;
  --color-hindsight-400: #949eb6;
  --color-hindsight-500: #7a86a1;
  --color-hindsight-600: #677288;
  --color-hindsight-700: #535b6d;
  --color-hindsight-800: #3c4250;
  --color-hindsight-900: #292e38;
  --color-hindsight-950: #171b22;
}

SCSS

$hindsight: #bdc9e3;
$hindsight-rgb: 189, 201, 227;
$hindsight-light: mix(#fff, $hindsight, 20%);
$hindsight-dark: mix(#000, $hindsight, 20%);

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