London Hue

CSS

:root {
  --london-hue: #ae94ab;
  --london-hue-rgb: 174 148 171;
  --london-hue-oklch: oklch(0.697 0.045 329.8);
}

.element {
  color: var(--london-hue);
  background-color: hsl(307 14% 63%);
  border-color: oklch(0.697 0.045 329.8);
}

Tailwind CSS v4

@theme {
  --color-london-hue: #ae94ab;
  --color-london-hue-50: #fdf1fb;
  --color-london-hue-100: #f1e3ef;
  --color-london-hue-200: #e0cedd;
  --color-london-hue-300: #c6afc2;
  --color-london-hue-400: #ae95ab;
  --color-london-hue-500: #987c94;
  --color-london-hue-600: #80697e;
  --color-london-hue-700: #675465;
  --color-london-hue-800: #4b3d4a;
  --color-london-hue-900: #342a34;
  --color-london-hue-950: #20181f;
}

SCSS

$london-hue: #ae94ab;
$london-hue-rgb: 174, 148, 171;
$london-hue-light: mix(#fff, $london-hue, 20%);
$london-hue-dark: mix(#000, $london-hue, 20%);

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