Color and contrast #

One aspect in our designs, that is not only important for aesthetic aspect, but also crucial for usability and accsessibility, is color. Or, to be more precise: combination on colors used together.

Since you already know from your previous courses about color theory, harmonies, gestalt theory etc, let's focus here to color on screen.

Practical guidelines #

You can find a lot of good practical tips about how to use color here:

• UXPlanet: Ultimate Guide to Color in UX/UI Design 📌
• Learn UI: Color in UI Design: A (Practical) Framework
• Flux Academy: How to strategically use color in website design

📺 Video from DesignerUp: "Super Practical Guide to Color Theory, Color Models and Perfect Color Palettes"

📺 Another useful and super practical video by Joseph from LearnSketch․com

Other useful content #

• Smashing Magazine: A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH
• HTMLBurger: Psychology of Color to Improve Your Web Designs: Part 1
• HTMLBurger: Psychology of Color to Improve Your Web Designs: Part 2
• Baseline.hq design course colour section
  • Colour Basics
  • The Structure of Colour Palettes
  • How to Create a Colour Palette
  • Using Colour in Figma
  • Working With Colour
  • Ten Colour Tips

Rune Madsens book #

Rune Madsen has written about color in his magnificent book Programming Design Systems. This should give us a solid foundation to understand the theory of color spaces and models.

• A short history of color theory
• Color models and color spaces
• Color schemes

Color and accessibility #

• dev tools
• a11y checkers (stark etc)
• color blindness

Tools and resources #

• SmashingMag: Color Tools And Resources
• Coolors.co palette generator
• Colordesigner.io palette generator
• Mycolor.space palette generator
• Eva.design palette generator
• Palette.app generator
• Happyhues.co - curated palettes
• Colorhunt.co - curated palettes