Morning Forest

CSS

:root {
  --morning-forest: #6dae81;
  --morning-forest-rgb: 109 174 129;
  --morning-forest-oklch: oklch(0.695 0.094 153.2);
}

.element {
  color: var(--morning-forest);
  background-color: hsl(138 29% 55%);
  border-color: oklch(0.695 0.094 153.2);
}

Tailwind CSS v4

@theme {
  --color-morning-forest: #6dae81;
  --color-morning-forest-50: #e1feea;
  --color-morning-forest-100: #d0f2da;
  --color-morning-forest-200: #b5e1c3;
  --color-morning-forest-300: #91c6a3;
  --color-morning-forest-400: #72af84;
  --color-morning-forest-500: #509868;
  --color-morning-forest-600: #448158;
  --color-morning-forest-700: #366746;
  --color-morning-forest-800: #284c31;
  --color-morning-forest-900: #1b3522;
  --color-morning-forest-950: #0b2011;
}

SCSS

$morning-forest: #6dae81;
$morning-forest-rgb: 109, 174, 129;
$morning-forest-light: mix(#fff, $morning-forest, 20%);
$morning-forest-dark: mix(#000, $morning-forest, 20%);

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