Dreaming Blue

CSS

:root {
  --dreaming-blue: #8ac2d6;
  --dreaming-blue-rgb: 138 194 214;
  --dreaming-blue-oklch: oklch(0.782 0.065 222.1);
}

.element {
  color: var(--dreaming-blue);
  background-color: hsl(196 48% 69%);
  border-color: oklch(0.782 0.065 222.1);
}

Tailwind CSS v4

@theme {
  --color-dreaming-blue: #8ac2d6;
  --color-dreaming-blue-50: #e2faff;
  --color-dreaming-blue-100: #d2edf8;
  --color-dreaming-blue-200: #b8dbe9;
  --color-dreaming-blue-300: #94bfd0;
  --color-dreaming-blue-400: #73a7ba;
  --color-dreaming-blue-500: #5390a5;
  --color-dreaming-blue-600: #477a8b;
  --color-dreaming-blue-700: #386270;
  --color-dreaming-blue-800: #274852;
  --color-dreaming-blue-900: #1a3239;
  --color-dreaming-blue-950: #0a1e23;
}

SCSS

$dreaming-blue: #8ac2d6;
$dreaming-blue-rgb: 138, 194, 214;
$dreaming-blue-light: mix(#fff, $dreaming-blue, 20%);
$dreaming-blue-dark: mix(#000, $dreaming-blue, 20%);

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