Rare Grey

CSS

:root {
  --rare-grey: #a6a69b;
  --rare-grey-rgb: 166 166 155;
  --rare-grey-oklch: oklch(0.722 0.016 106.8);
}

.element {
  color: var(--rare-grey);
  background-color: hsl(60 6% 63%);
  border-color: oklch(0.722 0.016 106.8);
}

Tailwind CSS v4

@theme {
  --color-rare-grey: #a6a69b;
  --color-rare-grey-50: #f5f5f0;
  --color-rare-grey-100: #e8e8e2;
  --color-rare-grey-200: #d4d5cd;
  --color-rare-grey-300: #b8b8af;
  --color-rare-grey-400: #9f9f95;
  --color-rare-grey-500: #87877b;
  --color-rare-grey-600: #727268;
  --color-rare-grey-700: #5b5b53;
  --color-rare-grey-800: #43433d;
  --color-rare-grey-900: #2e2e2a;
  --color-rare-grey-950: #1b1b17;
}

SCSS

$rare-grey: #a6a69b;
$rare-grey-rgb: 166, 166, 155;
$rare-grey-light: mix(#fff, $rare-grey, 20%);
$rare-grey-dark: mix(#000, $rare-grey, 20%);

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