Little Pond

CSS

:root {
  --little-pond: #a6d1eb;
  --little-pond-rgb: 166 209 235;
  --little-pond-oklch: oklch(0.839 0.058 234.9);
}

.element {
  color: var(--little-pond);
  background-color: hsl(203 63% 79%);
  border-color: oklch(0.839 0.058 234.9);
}

Tailwind CSS v4

@theme {
  --color-little-pond: #a6d1eb;
  --color-little-pond-50: #e6f8ff;
  --color-little-pond-100: #d7ebf9;
  --color-little-pond-200: #bed9ea;
  --color-little-pond-300: #9cbdd2;
  --color-little-pond-400: #7da5bc;
  --color-little-pond-500: #5f8da7;
  --color-little-pond-600: #51778d;
  --color-little-pond-700: #415f71;
  --color-little-pond-800: #2e4653;
  --color-little-pond-900: #1f303a;
  --color-little-pond-950: #0e1d24;
}

SCSS

$little-pond: #a6d1eb;
$little-pond-rgb: 166, 209, 235;
$little-pond-light: mix(#fff, $little-pond, 20%);
$little-pond-dark: mix(#000, $little-pond, 20%);

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