Grasshopper Pie

CSS

:root {
  --grasshopper-pie: #bcdabb;
  --grasshopper-pie-rgb: 188 218 187;
  --grasshopper-pie-oklch: oklch(0.858 0.053 144.2);
}

.element {
  color: var(--grasshopper-pie);
  background-color: hsl(118 30% 79%);
  border-color: oklch(0.858 0.053 144.2);
}

Tailwind CSS v4

@theme {
  --color-grasshopper-pie: #bcdabb;
  --color-grasshopper-pie-50: #ecfaec;
  --color-grasshopper-pie-100: #ddedde;
  --color-grasshopper-pie-200: #c6dbc7;
  --color-grasshopper-pie-300: #a7bfa8;
  --color-grasshopper-pie-400: #8ca78b;
  --color-grasshopper-pie-500: #719070;
  --color-grasshopper-pie-600: #607a5f;
  --color-grasshopper-pie-700: #4c614c;
  --color-grasshopper-pie-800: #384736;
  --color-grasshopper-pie-900: #263125;
  --color-grasshopper-pie-950: #151d14;
}

SCSS

$grasshopper-pie: #bcdabb;
$grasshopper-pie-rgb: 188, 218, 187;
$grasshopper-pie-light: mix(#fff, $grasshopper-pie, 20%);
$grasshopper-pie-dark: mix(#000, $grasshopper-pie, 20%);

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