Mid Cypress

CSS

:root {
  --mid-cypress: #779781;
  --mid-cypress-rgb: 119 151 129;
  --mid-cypress-oklch: oklch(0.646 0.048 154.8);
}

.element {
  color: var(--mid-cypress);
  background-color: hsl(139 13% 53%);
  border-color: oklch(0.646 0.048 154.8);
}

Tailwind CSS v4

@theme {
  --color-mid-cypress: #779781;
  --color-mid-cypress-50: #ebfaf0;
  --color-mid-cypress-100: #dcede1;
  --color-mid-cypress-200: #c4dbcc;
  --color-mid-cypress-300: #a4bfae;
  --color-mid-cypress-400: #89a792;
  --color-mid-cypress-500: #6d9078;
  --color-mid-cypress-600: #5c7a66;
  --color-mid-cypress-700: #4a6251;
  --color-mid-cypress-800: #36473a;
  --color-mid-cypress-900: #253128;
  --color-mid-cypress-950: #131d16;
}

SCSS

$mid-cypress: #779781;
$mid-cypress-rgb: 119, 151, 129;
$mid-cypress-light: mix(#fff, $mid-cypress, 20%);
$mid-cypress-dark: mix(#000, $mid-cypress, 20%);

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