Sound of Silence

CSS

:root {
  --sound-of-silence: #333b33;
  --sound-of-silence-rgb: 51 59 51;
  --sound-of-silence-oklch: oklch(0.342 0.017 145.2);
}

.element {
  color: var(--sound-of-silence);
  background-color: hsl(120 7% 22%);
  border-color: oklch(0.342 0.017 145.2);
}

Tailwind CSS v4

@theme {
  --color-sound-of-silence: #333b33;
  --color-sound-of-silence-50: #f2f6f2;
  --color-sound-of-silence-100: #e4e9e4;
  --color-sound-of-silence-200: #d0d6d0;
  --color-sound-of-silence-300: #b2bab2;
  --color-sound-of-silence-400: #98a198;
  --color-sound-of-silence-500: #7f897f;
  --color-sound-of-silence-600: #6c746c;
  --color-sound-of-silence-700: #565d56;
  --color-sound-of-silence-800: #3f443f;
  --color-sound-of-silence-900: #2b2f2b;
  --color-sound-of-silence-950: #191c18;
}

SCSS

$sound-of-silence: #333b33;
$sound-of-silence-rgb: 51, 59, 51;
$sound-of-silence-light: mix(#fff, $sound-of-silence, 20%);
$sound-of-silence-dark: mix(#000, $sound-of-silence, 20%);

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