Green Sky

CSS

:root {
  --green-sky: #859d66;
  --green-sky-rgb: 133 157 102;
  --green-sky-oklch: oklch(0.663 0.082 127.6);
}

.element {
  color: var(--green-sky);
  background-color: hsl(86 22% 51%);
  border-color: oklch(0.663 0.082 127.6);
}

Tailwind CSS v4

@theme {
  --color-green-sky: #859d66;
  --color-green-sky-50: #eefae2;
  --color-green-sky-100: #dfeed1;
  --color-green-sky-200: #c9dcb7;
  --color-green-sky-300: #aac094;
  --color-green-sky-400: #91a873;
  --color-green-sky-500: #779154;
  --color-green-sky-600: #657a48;
  --color-green-sky-700: #506239;
  --color-green-sky-800: #3b4727;
  --color-green-sky-900: #29321a;
  --color-green-sky-950: #171d0b;
}

SCSS

$green-sky: #859d66;
$green-sky-rgb: 133, 157, 102;
$green-sky-light: mix(#fff, $green-sky, 20%);
$green-sky-dark: mix(#000, $green-sky, 20%);

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