Grey Scales
Color-Shifted Scales
Copy CSS
:root {
/* Grey scales */
--col-1-0: hsl(8.18,84.62%,94.9%);
--col-1-10: hsl(3.28,93.93%,89.85%);
--col-1-20: hsl(1.72,97.19%,84.04%);
--col-1-30: hsl(0.93,98.78%,76.98%);
--col-1-40: hsl(0.41,99.66%,67.17%);
--col-1-50: hsl(0.18,99.6%,48.57%);
--col-1-60: hsl(0.41,99.1%,43.6%);
--col-1-70: hsl(0.62,98.63%,37.92%);
--col-1-80: hsl(0.91,98.01%,31.18%);
--col-1-90: hsl(1.46,96.85%,22.43%);
--col-1-100: hsl(8.18,84.62%,5.1%);
--col-2-0: hsl(249,76.92%,94.9%);
--col-2-10: hsl(244.34,88.22%,91.5%);
--col-2-20: hsl(242.6,93.23%,87.77%);
--col-2-30: hsl(241.67,96.01%,83.62%);
--col-2-40: hsl(241.09,97.73%,78.86%);
--col-2-50: hsl(240.68,98.86%,73.11%);
--col-2-60: hsl(240.34,99.62%,65.27%);
--col-2-70: hsl(240.13,99.35%,48.36%);
--col-2-80: hsl(240.37,98.18%,39.81%);
--col-2-90: hsl(240.71,96.58%,28.56%);
--col-2-100: hsl(246,76.92%,5.1%);
/* Shifted scales */
--col-1-shift-0: hsl(300,100%,88.04%);
--col-1-shift-10: hsl(345.76,100%,76.86%);
--col-1-shift-20: hsl(1.01,100%,64.9%);
--col-1-shift-30: hsl(0.24,100%,48.43%);
--col-1-shift-40: hsl(0,100%,38.63%);
--col-1-shift-50: hsl(0,100%,27.84%);
--col-1-shift-60: hsl(0,100%,18.63%);
--col-2-shift-0: hsl(0,0%,100%);
--col-2-shift-10: hsl(300,100%,90.98%);
--col-2-shift-20: hsl(257.94,100%,80.98%);
--col-2-shift-30: hsl(240.44,98.54%,73.14%);
--col-2-shift-40: hsl(227.05,61.23%,55.49%);
--col-2-shift-50: hsl(210.19,100%,31.57%);
--col-2-shift-60: hsl(209.47,100%,22.35%);
}