Morning Glory

CSS

:root {
  --morning-glory: #9ed1d3;
  --morning-glory-rgb: 158 209 211;
  --morning-glory-oklch: oklch(0.826 0.053 199.2);
}

.element {
  color: var(--morning-glory);
  background-color: hsl(182 38% 72%);
  border-color: oklch(0.826 0.053 199.2);
}

Tailwind CSS v4

@theme {
  --color-morning-glory: #9ed1d3;
  --color-morning-glory-50: #e5fafb;
  --color-morning-glory-100: #d5eeef;
  --color-morning-glory-200: #bbdbde;
  --color-morning-glory-300: #98c0c3;
  --color-morning-glory-400: #79a8aa;
  --color-morning-glory-500: #5a9193;
  --color-morning-glory-600: #4d7b7d;
  --color-morning-glory-700: #3d6264;
  --color-morning-glory-800: #2c4849;
  --color-morning-glory-900: #1d3232;
  --color-morning-glory-950: #0d1e1e;
}

SCSS

$morning-glory: #9ed1d3;
$morning-glory-rgb: 158, 209, 211;
$morning-glory-light: mix(#fff, $morning-glory, 20%);
$morning-glory-dark: mix(#000, $morning-glory, 20%);

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