Nobel

CSS

:root {
  --nobel: #a99d9d;
  --nobel-rgb: 169 157 157;
  --nobel-oklch: oklch(0.706 0.014 17.5);
}

.element {
  color: var(--nobel);
  background-color: hsl(0 7% 64%);
  border-color: oklch(0.706 0.014 17.5);
}

Tailwind CSS v4

@theme {
  --color-nobel: #a99d9d;
  --color-nobel-50: #f9f4f3;
  --color-nobel-100: #ece6e6;
  --color-nobel-200: #dad2d2;
  --color-nobel-300: #beb5b4;
  --color-nobel-400: #a79b9b;
  --color-nobel-500: #8f8383;
  --color-nobel-600: #796f6f;
  --color-nobel-700: #615858;
  --color-nobel-800: #474041;
  --color-nobel-900: #312c2d;
  --color-nobel-950: #1d191a;
}

SCSS

$nobel: #a99d9d;
$nobel-rgb: 169, 157, 157;
$nobel-light: mix(#fff, $nobel, 20%);
$nobel-dark: mix(#000, $nobel, 20%);

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