Green Hour

CSS

:root {
  --green-hour: #587d79;
  --green-hour-rgb: 88 125 121;
  --green-hour-oklch: oklch(0.561 0.042 187.7);
}

.element {
  color: var(--green-hour);
  background-color: hsl(174 17% 42%);
  border-color: oklch(0.561 0.042 187.7);
}

Tailwind CSS v4

@theme {
  --color-green-hour: #587d79;
  --color-green-hour-50: #e8f9f8;
  --color-green-hour-100: #d9edeb;
  --color-green-hour-200: #c1dad8;
  --color-green-hour-300: #a0bfbc;
  --color-green-hour-400: #83a7a3;
  --color-green-hour-500: #66908b;
  --color-green-hour-600: #577976;
  --color-green-hour-700: #45615e;
  --color-green-hour-800: #324744;
  --color-green-hour-900: #22312f;
  --color-green-hour-950: #111d1c;
}

SCSS

$green-hour: #587d79;
$green-hour-rgb: 88, 125, 121;
$green-hour-light: mix(#fff, $green-hour, 20%);
$green-hour-dark: mix(#000, $green-hour, 20%);

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