Paris Grey

CSS

:root {
  --paris-grey: #a6b7c8;
  --paris-grey-rgb: 166 183 200;
  --paris-grey-oklch: oklch(0.772 0.031 248.2);
}

.element {
  color: var(--paris-grey);
  background-color: hsl(210 24% 72%);
  border-color: oklch(0.772 0.031 248.2);
}

Tailwind CSS v4

@theme {
  --color-paris-grey: #a6b7c8;
  --color-paris-grey-50: #eff6fe;
  --color-paris-grey-100: #e0e9f2;
  --color-paris-grey-200: #cbd6e1;
  --color-paris-grey-300: #acb9c7;
  --color-paris-grey-400: #91a0b0;
  --color-paris-grey-500: #77889a;
  --color-paris-grey-600: #657382;
  --color-paris-grey-700: #505c68;
  --color-paris-grey-800: #3a444d;
  --color-paris-grey-900: #282f35;
  --color-paris-grey-950: #161b20;
}

SCSS

$paris-grey: #a6b7c8;
$paris-grey-rgb: 166, 183, 200;
$paris-grey-light: mix(#fff, $paris-grey, 20%);
$paris-grey-dark: mix(#000, $paris-grey, 20%);

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