Fairies in America

CSS

:root {
  --fairies-in-america: #a2badb;
  --fairies-in-america-rgb: 162 186 219;
  --fairies-in-america-oklch: oklch(0.782 0.054 256.4);
}

.element {
  color: var(--fairies-in-america);
  background-color: hsl(215 44% 75%);
  border-color: oklch(0.782 0.054 256.4);
}

Tailwind CSS v4

@theme {
  --color-fairies-in-america: #a2badb;
  --color-fairies-in-america-50: #ecf6ff;
  --color-fairies-in-america-100: #dde9fa;
  --color-fairies-in-america-200: #c6d5ec;
  --color-fairies-in-america-300: #a7b9d4;
  --color-fairies-in-america-400: #8aa0bf;
  --color-fairies-in-america-500: #6f88aa;
  --color-fairies-in-america-600: #5e7390;
  --color-fairies-in-america-700: #4b5c73;
  --color-fairies-in-america-800: #364455;
  --color-fairies-in-america-900: #252f3b;
  --color-fairies-in-america-950: #131b25;
}

SCSS

$fairies-in-america: #a2badb;
$fairies-in-america-rgb: 162, 186, 219;
$fairies-in-america-light: mix(#fff, $fairies-in-america, 20%);
$fairies-in-america-dark: mix(#000, $fairies-in-america, 20%);

.element {
  color: $fairies-in-america;
  box-shadow: 0 0 0 2px rgba($fairies-in-america, 0.35);
}