Harp Strings

CSS

:root {
  --harp-strings: #cbd0d1;
  --harp-strings-rgb: 203 208 209;
  --harp-strings-oklch: oklch(0.854 0.006 211);
}

.element {
  color: var(--harp-strings);
  background-color: hsl(190 6% 81%);
  border-color: oklch(0.854 0.006 211);
}

Tailwind CSS v4

@theme {
  --color-harp-strings: #cbd0d1;
  --color-harp-strings-50: #f3f5f6;
  --color-harp-strings-100: #e6e8e9;
  --color-harp-strings-200: #d2d5d6;
  --color-harp-strings-300: #b4b8b9;
  --color-harp-strings-400: #9b9fa0;
  --color-harp-strings-500: #828788;
  --color-harp-strings-600: #6e7273;
  --color-harp-strings-700: #585b5c;
  --color-harp-strings-800: #404343;
  --color-harp-strings-900: #2c2e2e;
  --color-harp-strings-950: #191b1b;
}

SCSS

$harp-strings: #cbd0d1;
$harp-strings-rgb: 203, 208, 209;
$harp-strings-light: mix(#fff, $harp-strings, 20%);
$harp-strings-dark: mix(#000, $harp-strings, 20%);

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