DEV Community

Cover image for A beginner's guide to applying color in UI design

A beginner's guide to applying color in UI design

George Francis on February 25, 2021

Is color theory getting you down? Are you tired of the same old preset palettes? Sick of hitting “regenerate” on a magical color palette creator?&n...
Collapse
 
jae profile image
Jae Beojkkoch •

Very useful guide, thank you!

Collapse
 
georgedoescode profile image
George Francis •

I’m glad! Thank you for reading ✨

Collapse
 
jae profile image
Jae Beojkkoch •

I applied the colour checker on my website and saw there were problems there.
Definitely something I should pay more attention to.

Collapse
 
marcellahaller profile image
marcellahaller •

Hi, this is a really good beginner's guide.
Here's a great color guide for UI design - gapsystudio.com/blog/ui-design-col.... This article talks about the psychology of color and the famous 60/30/10 rule. It will definitely help beginners.

Collapse
 
hohonsing profile image
Ho Honsing •

Thanks for producing this article with great amount of effort! 🎉

Collapse
 
georgedoescode profile image
George Francis •

Thank you! Much appreciated!

Collapse
 
mxglt profile image
Maxime Guilbert •

Thanks!
Great job

Collapse
 
georgedoescode profile image
George Francis •

Thanks for reading!

Collapse
 
markstanley profile image
Mark Stanley (he/him) •

This is really clear - thank you! I don't usually use HSL but the way you explained it makes lots of sense. Great article :-)

Collapse
 
georgedoescode profile image
George Francis •

Oh, awesome! That’s great to hear. Thanks for reading :)

Collapse
 
djchrispurple profile image
Chris Mugnier •

Simply great!

Collapse
 
georgedoescode profile image
George Francis •

Thanks so much, Chris!

Collapse
 
nicciwillsolutions profile image
Nicci Williams •

George, this is so helpful, thank you!! I especially love the tinted grays tip 🙌🏾

Collapse
 
georgedoescode profile image
George Francis •

Thank you, Nicci! I'm glad you found the post to be helpful 🙌

Collapse
 
alexandergekov profile image
Alexander Gekov •

Wow. This is really good, thanks for all your effort. 👏👏

Collapse
 
georgedoescode profile image
George Francis •

Thank you! ✨

Collapse
 
olsard profile image
olsard •

Great and nice explained! Thanks for sharing.

Collapse
 
georgedoescode profile image
George Francis • • Edited

Thank you! I'm glad to hear it!

Collapse
 
itscasey profile image
Casey 💎 •

This is awesome - great job!

Collapse
 
georgedoescode profile image
George Francis •

Thank you Casey!

Collapse
 
cipriantepes profile image
Ciprian Tepes •

Thanks for the guide, you deserve at least a coffee :)

Hey, I have one thing that bugs me: why most color generator websites give you 5 colors??? I find that so confusing and don't know what goes where. Any thoughts?

Collapse
 
anmshpndy profile image
Animesh Pandey •

Very informative! Thank you for taking the time to write this, George!

Collapse
 
georgedoescode profile image
George Francis •

Thank you! I’m glad it was helpful!

Collapse
 
elischei profile image
Eli H. Schei •

I love your tone of voice! It makes it fun to read! :D (And it was also a very usefull guide!)

Collapse
 
georgedoescode profile image
George Francis •

Thank you very much! I'm glad!

Collapse
 
levirs565 profile image
Levi Rizki Saputra •

Great article! Thank you

Collapse
 
georgedoescode profile image
George Francis •

Thank you!

Collapse
 
besmabensadoune profile image
Besma Bensadoune •

This was very insightful! Thanks you so much.

Collapse
 
georgedoescode profile image
George Francis •

Ah, I’m happy to hear it! 🙌

Collapse
 
curious_web_addicts profile image
Curious Web Addicts •

Awesome tutorial, thanks!

Collapse
 
georgedoescode profile image
George Francis •

No worries! Thanks for reading!

Collapse
 
pyrenaicus profile image
Pau •

Great tutorial! I'm just starting to learn all this stuff, and it was really helpful. Thanks a lot for it! 😊

Collapse
 
georgedoescode profile image
George Francis •

Thank you for reading! I'm glad the tutorial was helpful 🙌

Collapse
 
tris profile image
tris •

Fantastic, thanks!

Collapse
 
georgedoescode profile image
George Francis •

Thank you very much!