Lucky Point

CSS

:root {
  --lucky-point: #292d4f;
  --lucky-point-rgb: 41 45 79;
  --lucky-point-oklch: oklch(0.311 0.061 277.1);
}

.element {
  color: var(--lucky-point);
  background-color: hsl(234 32% 24%);
  border-color: oklch(0.311 0.061 277.1);
}

Tailwind CSS v4

@theme {
  --color-lucky-point: #292d4f;
  --color-lucky-point-50: #f1f4ff;
  --color-lucky-point-100: #e3e6fd;
  --color-lucky-point-200: #ced2ef;
  --color-lucky-point-300: #b0b5d7;
  --color-lucky-point-400: #959cc3;
  --color-lucky-point-500: #7c83af;
  --color-lucky-point-600: #696f94;
  --color-lucky-point-700: #545976;
  --color-lucky-point-800: #3c4158;
  --color-lucky-point-900: #292d3d;
  --color-lucky-point-950: #171a27;
}

SCSS

$lucky-point: #292d4f;
$lucky-point-rgb: 41, 45, 79;
$lucky-point-light: mix(#fff, $lucky-point, 20%);
$lucky-point-dark: mix(#000, $lucky-point, 20%);

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