Echo

CSS

:root {
  --echo: #d7e7e0;
  --echo-rgb: 215 231 224;
  --echo-oklch: oklch(0.914 0.019 167.9);
}

.element {
  color: var(--echo);
  background-color: hsl(154 25% 87%);
  border-color: oklch(0.914 0.019 167.9);
}

Tailwind CSS v4

@theme {
  --color-echo: #d7e7e0;
  --color-echo-50: #f0f7f4;
  --color-echo-100: #e2eae7;
  --color-echo-200: #cdd7d3;
  --color-echo-300: #aebbb6;
  --color-echo-400: #94a29c;
  --color-echo-500: #7a8b84;
  --color-echo-600: #68756f;
  --color-echo-700: #535e59;
  --color-echo-800: #3c4541;
  --color-echo-900: #292f2d;
  --color-echo-950: #171c1a;
}

SCSS

$echo: #d7e7e0;
$echo-rgb: 215, 231, 224;
$echo-light: mix(#fff, $echo, 20%);
$echo-dark: mix(#000, $echo, 20%);

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