Sail Into the Horizon

CSS

:root {
  --sail-into-the-horizon: #a3bbdc;
  --sail-into-the-horizon-rgb: 163 187 220;
  --sail-into-the-horizon-oklch: oklch(0.785 0.054 256.4);
}

.element {
  color: var(--sail-into-the-horizon);
  background-color: hsl(215 45% 75%);
  border-color: oklch(0.785 0.054 256.4);
}

Tailwind CSS v4

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

SCSS

$sail-into-the-horizon: #a3bbdc;
$sail-into-the-horizon-rgb: 163, 187, 220;
$sail-into-the-horizon-light: mix(#fff, $sail-into-the-horizon, 20%);
$sail-into-the-horizon-dark: mix(#000, $sail-into-the-horizon, 20%);

.element {
  color: $sail-into-the-horizon;
  box-shadow: 0 0 0 2px rgba($sail-into-the-horizon, 0.35);
}