London Square

CSS

:root {
  --london-square: #7f909d;
  --london-square-rgb: 127 144 157;
  --london-square-oklch: oklch(0.644 0.028 240.9);
}

.element {
  color: var(--london-square);
  background-color: hsl(206 13% 56%);
  border-color: oklch(0.644 0.028 240.9);
}

Tailwind CSS v4

@theme {
  --color-london-square: #7f909d;
  --color-london-square-50: #eff6fd;
  --color-london-square-100: #e0e9f1;
  --color-london-square-200: #cbd6df;
  --color-london-square-300: #acb9c5;
  --color-london-square-400: #91a1ae;
  --color-london-square-500: #768997;
  --color-london-square-600: #647480;
  --color-london-square-700: #505d66;
  --color-london-square-800: #3a444b;
  --color-london-square-900: #282f34;
  --color-london-square-950: #161b20;
}

SCSS

$london-square: #7f909d;
$london-square-rgb: 127, 144, 157;
$london-square-light: mix(#fff, $london-square, 20%);
$london-square-dark: mix(#000, $london-square, 20%);

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