Connecticut Lilac

CSS

:root {
  --connecticut-lilac: #ccbbee;
  --connecticut-lilac-rgb: 204 187 238;
  --connecticut-lilac-oklch: oklch(0.823 0.073 300.1);
}

.element {
  color: var(--connecticut-lilac);
  background-color: hsl(260 60% 83%);
  border-color: oklch(0.823 0.073 300.1);
}

Tailwind CSS v4

@theme {
  --color-connecticut-lilac: #ccbbee;
  --color-connecticut-lilac-50: #f9f1ff;
  --color-connecticut-lilac-100: #ece3fd;
  --color-connecticut-lilac-200: #dacdef;
  --color-connecticut-lilac-300: #beafd7;
  --color-connecticut-lilac-400: #a595c4;
  --color-connecticut-lilac-500: #8d7bb0;
  --color-connecticut-lilac-600: #786894;
  --color-connecticut-lilac-700: #605377;
  --color-connecticut-lilac-800: #453d58;
  --color-connecticut-lilac-900: #302a3e;
  --color-connecticut-lilac-950: #1c1727;
}

SCSS

$connecticut-lilac: #ccbbee;
$connecticut-lilac-rgb: 204, 187, 238;
$connecticut-lilac-light: mix(#fff, $connecticut-lilac, 20%);
$connecticut-lilac-dark: mix(#000, $connecticut-lilac, 20%);

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