Paris M

CSS

:root {
  --paris-m: #312760;
  --paris-m-rgb: 49 39 96;
  --paris-m-oklch: oklch(0.318 0.097 287.6);
}

.element {
  color: var(--paris-m);
  background-color: hsl(251 42% 26%);
  border-color: oklch(0.318 0.097 287.6);
}

Tailwind CSS v4

@theme {
  --color-paris-m: #312760;
  --color-paris-m-50: #f4f1ff;
  --color-paris-m-100: #e6e3ff;
  --color-paris-m-200: #d3cefc;
  --color-paris-m-300: #b6b0e7;
  --color-paris-m-400: #9b96d5;
  --color-paris-m-500: #837bc3;
  --color-paris-m-600: #6f69a5;
  --color-paris-m-700: #585484;
  --color-paris-m-800: #3f3d63;
  --color-paris-m-900: #2c2a45;
  --color-paris-m-950: #19172d;
}

SCSS

$paris-m: #312760;
$paris-m-rgb: 49, 39, 96;
$paris-m-light: mix(#fff, $paris-m, 20%);
$paris-m-dark: mix(#000, $paris-m, 20%);

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