London Grey

CSS

:root {
  --london-grey: #666677;
  --london-grey-rgb: 102 102 119;
  --london-grey-oklch: oklch(0.516 0.027 285.4);
}

.element {
  color: var(--london-grey);
  background-color: hsl(240 8% 43%);
  border-color: oklch(0.516 0.027 285.4);
}

Tailwind CSS v4

@theme {
  --color-london-grey: #666677;
  --color-london-grey-50: #f4f4fd;
  --color-london-grey-100: #e7e7f1;
  --color-london-grey-200: #d3d3df;
  --color-london-grey-300: #b6b6c5;
  --color-london-grey-400: #9c9dae;
  --color-london-grey-500: #848498;
  --color-london-grey-600: #707080;
  --color-london-grey-700: #595967;
  --color-london-grey-800: #41414c;
  --color-london-grey-900: #2d2d34;
  --color-london-grey-950: #1a1a20;
}

SCSS

$london-grey: #666677;
$london-grey-rgb: 102, 102, 119;
$london-grey-light: mix(#fff, $london-grey, 20%);
$london-grey-dark: mix(#000, $london-grey, 20%);

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