Morning Parlour

CSS

:root {
  --morning-parlour: #acc0bd;
  --morning-parlour-rgb: 172 192 189;
  --morning-parlour-oklch: oklch(0.792 0.022 185.9);
}

.element {
  color: var(--morning-parlour);
  background-color: hsl(171 14% 71%);
  border-color: oklch(0.792 0.022 185.9);
}

Tailwind CSS v4

@theme {
  --color-morning-parlour: #acc0bd;
  --color-morning-parlour-50: #eef7f6;
  --color-morning-parlour-100: #e0eae9;
  --color-morning-parlour-200: #cad7d6;
  --color-morning-parlour-300: #abbbb9;
  --color-morning-parlour-400: #90a3a0;
  --color-morning-parlour-500: #768b88;
  --color-morning-parlour-600: #647673;
  --color-morning-parlour-700: #505e5c;
  --color-morning-parlour-800: #3a4543;
  --color-morning-parlour-900: #28302e;
  --color-morning-parlour-950: #161c1b;
}

SCSS

$morning-parlour: #acc0bd;
$morning-parlour-rgb: 172, 192, 189;
$morning-parlour-light: mix(#fff, $morning-parlour, 20%);
$morning-parlour-dark: mix(#000, $morning-parlour, 20%);

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