Morning Sky

CSS

:root {
  --morning-sky: #c7ecea;
  --morning-sky-rgb: 199 236 234;
  --morning-sky-oklch: oklch(0.916 0.039 192.5);
}

.element {
  color: var(--morning-sky);
  background-color: hsl(177 49% 85%);
  border-color: oklch(0.916 0.039 192.5);
}

Tailwind CSS v4

@theme {
  --color-morning-sky: #c7ecea;
  --color-morning-sky-50: #e9f9f8;
  --color-morning-sky-100: #daecec;
  --color-morning-sky-200: #c2dad9;
  --color-morning-sky-300: #a2bebd;
  --color-morning-sky-400: #85a6a4;
  --color-morning-sky-500: #688f8d;
  --color-morning-sky-600: #597977;
  --color-morning-sky-700: #47615f;
  --color-morning-sky-800: #334745;
  --color-morning-sky-900: #233130;
  --color-morning-sky-950: #121d1c;
}

SCSS

$morning-sky: #c7ecea;
$morning-sky-rgb: 199, 236, 234;
$morning-sky-light: mix(#fff, $morning-sky, 20%);
$morning-sky-dark: mix(#000, $morning-sky, 20%);

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