Paris White

CSS

:root {
  --paris-white: #bfcdc0;
  --paris-white-rgb: 191 205 192;
  --paris-white-oklch: oklch(0.834 0.023 147.4);
}

.element {
  color: var(--paris-white);
  background-color: hsl(124 12% 78%);
  border-color: oklch(0.834 0.023 147.4);
}

Tailwind CSS v4

@theme {
  --color-paris-white: #bfcdc0;
  --color-paris-white-50: #f1f7f2;
  --color-paris-white-100: #e3eae4;
  --color-paris-white-200: #ced7cf;
  --color-paris-white-300: #afbbb1;
  --color-paris-white-400: #96a297;
  --color-paris-white-500: #7c8b7d;
  --color-paris-white-600: #69756a;
  --color-paris-white-700: #545e55;
  --color-paris-white-800: #3d453d;
  --color-paris-white-900: #2a2f2a;
  --color-paris-white-950: #181c18;
}

SCSS

$paris-white: #bfcdc0;
$paris-white-rgb: 191, 205, 192;
$paris-white-light: mix(#fff, $paris-white, 20%);
$paris-white-dark: mix(#000, $paris-white, 20%);

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