Cosmic Sky

CSS

:root {
  --cosmic-sky: #aaaac4;
  --cosmic-sky-rgb: 170 170 196;
  --cosmic-sky-oklch: oklch(0.747 0.037 285.5);
}

.element {
  color: var(--cosmic-sky);
  background-color: hsl(240 18% 72%);
  border-color: oklch(0.747 0.037 285.5);
}

Tailwind CSS v4

@theme {
  --color-cosmic-sky: #aaaac4;
  --color-cosmic-sky-50: #f4f4ff;
  --color-cosmic-sky-100: #e7e6f4;
  --color-cosmic-sky-200: #d3d2e4;
  --color-cosmic-sky-300: #b6b5ca;
  --color-cosmic-sky-400: #9c9cb4;
  --color-cosmic-sky-500: #83839e;
  --color-cosmic-sky-600: #6f6f86;
  --color-cosmic-sky-700: #59596b;
  --color-cosmic-sky-800: #40414f;
  --color-cosmic-sky-900: #2c2d37;
  --color-cosmic-sky-950: #191a22;
}

SCSS

$cosmic-sky: #aaaac4;
$cosmic-sky-rgb: 170, 170, 196;
$cosmic-sky-light: mix(#fff, $cosmic-sky, 20%);
$cosmic-sky-dark: mix(#000, $cosmic-sky, 20%);

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