Black Squeeze

CSS

:root {
  --black-squeeze: #e5e6df;
  --black-squeeze-rgb: 229 230 223;
  --black-squeeze-oklch: oklch(0.922 0.009 113.2);
}

.element {
  color: var(--black-squeeze);
  background-color: hsl(69 12% 89%);
  border-color: oklch(0.922 0.009 113.2);
}

Tailwind CSS v4

@theme {
  --color-black-squeeze: #e5e6df;
  --color-black-squeeze-50: #f5f5f2;
  --color-black-squeeze-100: #e8e8e5;
  --color-black-squeeze-200: #d4d5d0;
  --color-black-squeeze-300: #b7b8b3;
  --color-black-squeeze-400: #9e9f99;
  --color-black-squeeze-500: #868780;
  --color-black-squeeze-600: #71726c;
  --color-black-squeeze-700: #5b5b57;
  --color-black-squeeze-800: #42433f;
  --color-black-squeeze-900: #2e2e2b;
  --color-black-squeeze-950: #1b1b19;
}

SCSS

$black-squeeze: #e5e6df;
$black-squeeze-rgb: 229, 230, 223;
$black-squeeze-light: mix(#fff, $black-squeeze, 20%);
$black-squeeze-dark: mix(#000, $black-squeeze, 20%);

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