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?  ...
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
itscasey profile image
Casey 💎

This is awesome - great job!

Collapse
 
georgedoescode profile image
George Francis

Thank you Casey!

Collapse
 
djchrispurple profile image
Chris Mugnier

Simply great!

Collapse
 
georgedoescode profile image
George Francis

Thanks so much, Chris!

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
 
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
 
levirs565 profile image
Levi Rizki Saputra

Great article! Thank you

Collapse
 
georgedoescode profile image
George Francis

Thank you!

Collapse
 
curious_web_addicts profile image
Curious Web Addicts

Awesome tutorial, thanks!

Collapse
 
georgedoescode profile image
George Francis

No worries! Thanks for reading!

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
 
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
 
georgedoescode profile image
George Francis

Thank you very much!

Collapse
 
tris profile image
tris

Fantastic, thanks!