Mote of Dust

CSS

:root {
  --mote-of-dust: #c1c1c5;
  --mote-of-dust-rgb: 193 193 197;
  --mote-of-dust-oklch: oklch(0.812 0.006 286.3);
}

.element {
  color: var(--mote-of-dust);
  background-color: hsl(240 3% 76%);
  border-color: oklch(0.812 0.006 286.3);
}

Tailwind CSS v4

@theme {
  --color-mote-of-dust: #c1c1c5;
  --color-mote-of-dust-50: #f5f5f7;
  --color-mote-of-dust-100: #e8e7ea;
  --color-mote-of-dust-200: #d4d4d6;
  --color-mote-of-dust-300: #b7b7ba;
  --color-mote-of-dust-400: #9e9ea2;
  --color-mote-of-dust-500: #86868a;
  --color-mote-of-dust-600: #717175;
  --color-mote-of-dust-700: #5a5a5d;
  --color-mote-of-dust-800: #424244;
  --color-mote-of-dust-900: #2e2e2f;
  --color-mote-of-dust-950: #1a1a1c;
}

SCSS

$mote-of-dust: #c1c1c5;
$mote-of-dust-rgb: 193, 193, 197;
$mote-of-dust-light: mix(#fff, $mote-of-dust, 20%);
$mote-of-dust-dark: mix(#000, $mote-of-dust, 20%);

.element {
  color: $mote-of-dust;
  box-shadow: 0 0 0 2px rgba($mote-of-dust, 0.35);
}