Blue Cuddle

CSS

:root {
  --blue-cuddle: #7eb4d1;
  --blue-cuddle-rgb: 126 180 209;
  --blue-cuddle-oklch: oklch(0.743 0.07 232.4);
}

.element {
  color: var(--blue-cuddle);
  background-color: hsl(201 47% 66%);
  border-color: oklch(0.743 0.07 232.4);
}

Tailwind CSS v4

@theme {
  --color-blue-cuddle: #7eb4d1;
  --color-blue-cuddle-50: #e3f9ff;
  --color-blue-cuddle-100: #d2ecfc;
  --color-blue-cuddle-200: #b8daee;
  --color-blue-cuddle-300: #95bed6;
  --color-blue-cuddle-400: #74a6c1;
  --color-blue-cuddle-500: #538ead;
  --color-blue-cuddle-600: #477992;
  --color-blue-cuddle-700: #396075;
  --color-blue-cuddle-800: #274756;
  --color-blue-cuddle-900: #1a313c;
  --color-blue-cuddle-950: #0a1d26;
}

SCSS

$blue-cuddle: #7eb4d1;
$blue-cuddle-rgb: 126, 180, 209;
$blue-cuddle-light: mix(#fff, $blue-cuddle, 20%);
$blue-cuddle-dark: mix(#000, $blue-cuddle, 20%);

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