Morning Zen

CSS

:root {
  --morning-zen: #cbcdb9;
  --morning-zen-rgb: 203 205 185;
  --morning-zen-oklch: oklch(0.841 0.027 111.6);
}

.element {
  color: var(--morning-zen);
  background-color: hsl(66 17% 76%);
  border-color: oklch(0.841 0.027 111.6);
}

Tailwind CSS v4

@theme {
  --color-morning-zen: #cbcdb9;
  --color-morning-zen-50: #f5f6ed;
  --color-morning-zen-100: #e7e9df;
  --color-morning-zen-200: #d4d6c9;
  --color-morning-zen-300: #b7b9aa;
  --color-morning-zen-400: #9ea08e;
  --color-morning-zen-500: #868874;
  --color-morning-zen-600: #727362;
  --color-morning-zen-700: #5b5c4e;
  --color-morning-zen-800: #434339;
  --color-morning-zen-900: #2e2e27;
  --color-morning-zen-950: #1b1b15;
}

SCSS

$morning-zen: #cbcdb9;
$morning-zen-rgb: 203, 205, 185;
$morning-zen-light: mix(#fff, $morning-zen, 20%);
$morning-zen-dark: mix(#000, $morning-zen, 20%);

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