commoncolors--vars.css

:root {

  --black: color(hsl(0,0%,0%));
  --white: color(hsl(0,0%,100%));

  --gray-1: color(hsl(0,0%,97%));
  --gray-2: color(hsl(0,0%,75%));
  --gray: color(hsl(0,0%,50%));
  --gray-3: color(hsl(0,0%,50%));
  --gray-4: color(hsl(0,0%,20%));

  --red-1: color(hsl(0,100%,97%));
  --red-2: color(hsl(0,100%,75%));
  --red: color(hsl(0,100%,50%));
  --red-3: color(hsl(0,100%,50%));
  --red-4: color(hsl(0,100%,20%));

  --orange-1: color(hsl(30,100%,97%));
  --orange-2: color(hsl(30,100%,75%));
  --orange: color(hsl(30,100%,50%));
  --orange-3: color(hsl(30,100%,50%));
  --orange-4: color(hsl(30,100%,20%));

  --yellow-1: color(hsl(60,100%,97%));
  --yellow-2: color(hsl(60,100%,75%));
  --yellow: color(hsl(60,100%,50%));
  --yellow-3: color(hsl(60,100%,50%));
  --yellow-4: color(hsl(60,100%,20%));

  --green-1: color(hsl(120,100%,97%));
  --green-2: color(hsl(120,100%,75%));
  --green: color(hsl(120,100%,50%));
  --green-3: color(hsl(120,100%,50%));
  --green-4: color(hsl(120,100%,20%));

  --cyan-1: color(hsl(180,100%,97%));
  --cyan-2: color(hsl(180,100%,75%));
  --cyan: color(hsl(180,100%,50%));
  --cyan-3: color(hsl(180,100%,50%));
  --cyan-4: color(hsl(180,100%,20%));

  --blue-1: color(hsl(220,100%,97%));
  --blue-2: color(hsl(220,100%,75%));
  --blue: color(hsl(220,100%,50%));
  --blue-3: color(hsl(220,100%,50%));
  --blue-4: color(hsl(220,100%,20%));

  --violet-1: color(hsl(270,100%,97%));
  --violet-2: color(hsl(270,100%,75%));
  --violet: color(hsl(270,100%,50%));
  --violet-3: color(hsl(270,100%,50%));
  --violet-4: color(hsl(270,100%,20%));

  --magenta-1: color(hsl(300,100%,97%));
  --magenta-2: color(hsl(300,100%,75%));
  --magenta: color(hsl(300,100%,50%));
  --magenta-3: color(hsl(300,100%,50%));
  --magenta-4: color(hsl(300,100%,20%));

  --pink-1: color(hsl(330,100%,97%));
  --pink-2: color(hsl(330,100%,75%));
  --pink: color(hsl(330,100%,50%));
  --pink-3: color(hsl(330,100%,50%));
  --pink-4: color(hsl(330,100%,20%));

}