Faraway Sky

CSS

:root {
  --faraway-sky: #8980c1;
  --faraway-sky-rgb: 137 128 193;
  --faraway-sky-oklch: oklch(0.634 0.097 289.7);
}

.element {
  color: var(--faraway-sky);
  background-color: hsl(248 34% 63%);
  border-color: oklch(0.634 0.097 289.7);
}

Tailwind CSS v4

@theme {
  --color-faraway-sky: #8980c1;
  --color-faraway-sky-50: #f5f1ff;
  --color-faraway-sky-100: #e8e3ff;
  --color-faraway-sky-200: #d4cefb;
  --color-faraway-sky-300: #b8afe6;
  --color-faraway-sky-400: #9d95d4;
  --color-faraway-sky-500: #857bc2;
  --color-faraway-sky-600: #7168a4;
  --color-faraway-sky-700: #5a5383;
  --color-faraway-sky-800: #413d62;
  --color-faraway-sky-900: #2c2a45;
  --color-faraway-sky-950: #1a172d;
}

SCSS

$faraway-sky: #8980c1;
$faraway-sky-rgb: 137, 128, 193;
$faraway-sky-light: mix(#fff, $faraway-sky, 20%);
$faraway-sky-dark: mix(#000, $faraway-sky, 20%);

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