Blue Marguerite

CSS

:root {
  --blue-marguerite: #6a5bb1;
  --blue-marguerite-rgb: 106 91 177;
  --blue-marguerite-oklch: oklch(0.527 0.132 289.1);
}

.element {
  color: var(--blue-marguerite);
  background-color: hsl(250 36% 53%);
  border-color: oklch(0.527 0.132 289.1);
}

Tailwind CSS v4

@theme {
  --color-blue-marguerite: #6a5bb1;
  --color-blue-marguerite-50: #f5efff;
  --color-blue-marguerite-100: #e7e1ff;
  --color-blue-marguerite-200: #d4cbff;
  --color-blue-marguerite-300: #b7acf6;
  --color-blue-marguerite-400: #9c90e7;
  --color-blue-marguerite-500: #8575d7;
  --color-blue-marguerite-600: #7063b5;
  --color-blue-marguerite-700: #5a4f92;
  --color-blue-marguerite-800: #403a6d;
  --color-blue-marguerite-900: #2c284d;
  --color-blue-marguerite-950: #191533;
}

SCSS

$blue-marguerite: #6a5bb1;
$blue-marguerite-rgb: 106, 91, 177;
$blue-marguerite-light: mix(#fff, $blue-marguerite, 20%);
$blue-marguerite-dark: mix(#000, $blue-marguerite, 20%);

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