Polypropylene

CSS

:root {
  --polypropylene: #eaeae8;
  --polypropylene-rgb: 234 234 232;
  --polypropylene-oklch: oklch(0.936 0.003 106.5);
}

.element {
  color: var(--polypropylene);
  background-color: hsl(60 5% 91%);
  border-color: oklch(0.936 0.003 106.5);
}

Tailwind CSS v4

@theme {
  --color-polypropylene: #eaeae8;
  --color-polypropylene-50: #f5f5f4;
  --color-polypropylene-100: #e8e8e7;
  --color-polypropylene-200: #d4d4d3;
  --color-polypropylene-300: #b7b7b6;
  --color-polypropylene-400: #9e9e9d;
  --color-polypropylene-500: #868684;
  --color-polypropylene-600: #727270;
  --color-polypropylene-700: #5b5b59;
  --color-polypropylene-800: #424241;
  --color-polypropylene-900: #2e2e2d;
  --color-polypropylene-950: #1b1b1a;
}

SCSS

$polypropylene: #eaeae8;
$polypropylene-rgb: 234, 234, 232;
$polypropylene-light: mix(#fff, $polypropylene, 20%);
$polypropylene-dark: mix(#000, $polypropylene, 20%);

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