Kevin Powell - Community•2y ago

HSL and class number system

why that number system; the hue, saturation and lightness become larger in the colors, but clr number in the class gets smaller; feel like doing it the opposite just curious

:root {
  --clr-accent-500: hsl(12, 60%, 45%);
  --clr-accent-400: hsl(12, 88%, 59%);
  --clr-accent-300: hsl(12, 88%, 75%);
  --clr-accent-100: hsl(13, 100%, 96%);

:root {
  --clr-accent-500: hsl(12, 60%, 45%);
  --clr-accent-400: hsl(12, 88%, 59%);
  --clr-accent-300: hsl(12, 88%, 75%);
  --clr-accent-100: hsl(13, 100%, 96%);

3 Replies

Mannix•2y ago

it's up to you how you set it up there are no rules to follow 🙂

redtypoOooOoOP•2y ago

😬

CodeNascher•2y ago

It's derived from the font-weight system, where a larger number means thicker (= darker) and a smaller number means thinner (= lighter) But it's really up to you

Gaming

Programming

HSL and class number system