Welcome

LogRocket

Building a color palette with CSS

  1. The 60-30-10 design rule:
    • primary: 60%
    • secondary: 30%
    • accent: 10% (CTA, buttons, hyperlinks)
  2. Concepts of color harmony and contrast:
    • complementary colors: +180
    • analogous colors: -30 & +30
  3. Hue values:
    • hue: $hue
    • hueComplement: $hue +180
    • rightAnalogousColor: $hue -30
    • leftAnalogousColor: $hue +30
  4. Color palette:
    • primary100: hsl($hue 25% 95%)
    • primary500: hsl($hue 20% 85%)
    • primary600: hsl($hue 20% 75%)
    • secondary100: hsl($hueComplement 5% 20%)
    • secondary700: hsl($hueComplement 5% 30%)
    • secondary800: hsl($hueComplement 5% 25%)
    • secondary900: hsl($hueComplement 5% 95%)
    • accentR100: hsl($hueRightAnalogous 40% 95%)
    • accentR600: hsl($hueRightAnalogous 40% 40%)
    • accentL100: hsl($hueLeftAnalogous 40% 90%)
    • accentL600: hsl($hueLeftAnalogous 40% 40%)

Primary:

Secondary:

Accent: