Dark Periwinkle

CSS

:root {
  --dark-periwinkle: #665fd1;
  --dark-periwinkle-rgb: 102 95 209;
  --dark-periwinkle-oklch: oklch(0.552 0.17 282);
}

.element {
  color: var(--dark-periwinkle);
  background-color: hsl(244 55% 60%);
  border-color: oklch(0.552 0.17 282);
}

Tailwind CSS v4

@theme {
  --color-dark-periwinkle: #665fd1;
  --color-dark-periwinkle-50: #eeefff;
  --color-dark-periwinkle-100: #e0e1ff;
  --color-dark-periwinkle-200: #cbcbff;
  --color-dark-periwinkle-300: #adabff;
  --color-dark-periwinkle-400: #908fff;
  --color-dark-periwinkle-500: #7871f2;
  --color-dark-periwinkle-600: #6660cc;
  --color-dark-periwinkle-700: #514da4;
  --color-dark-periwinkle-800: #39387b;
  --color-dark-periwinkle-900: #272757;
  --color-dark-periwinkle-950: #15143b;
}

SCSS

$dark-periwinkle: #665fd1;
$dark-periwinkle-rgb: 102, 95, 209;
$dark-periwinkle-light: mix(#fff, $dark-periwinkle, 20%);
$dark-periwinkle-dark: mix(#000, $dark-periwinkle, 20%);

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