Slow Down

CSS

:root {
  --slow-down: #dde3dc;
  --slow-down-rgb: 221 227 220;
  --slow-down-oklch: oklch(0.909 0.011 141.3);
}

.element {
  color: var(--slow-down);
  background-color: hsl(111 11% 88%);
  border-color: oklch(0.909 0.011 141.3);
}

Tailwind CSS v4

@theme {
  --color-slow-down: #dde3dc;
  --color-slow-down-50: #f3f6f3;
  --color-slow-down-100: #e6e9e5;
  --color-slow-down-200: #d1d5d1;
  --color-slow-down-300: #b4b9b4;
  --color-slow-down-400: #9ba09a;
  --color-slow-down-500: #828881;
  --color-slow-down-600: #6e736d;
  --color-slow-down-700: #585c57;
  --color-slow-down-800: #404340;
  --color-slow-down-900: #2c2e2c;
  --color-slow-down-950: #191b19;
}

SCSS

$slow-down: #dde3dc;
$slow-down-rgb: 221, 227, 220;
$slow-down-light: mix(#fff, $slow-down, 20%);
$slow-down-dark: mix(#000, $slow-down, 20%);

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