Color and typography for Web Developers and Digital Designers.
From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.
You will find them here, Dribbble, Instagram, Pinterest and Twitter.
Since 2017 - 2022
Top comments (7)
Question - If you were going to use these five colors in a design system, would there be a name for each one? Like primary, secondary, etc? And how would you choose which color to make primary, secondary, etc?
Also, why do you choose 5 colors?
I enjoy your posts, thanks!
Hey Sandra, wrote my answer but I pressed dismiss, instead of submit, my longa answer went to the bin.
Let me get home, and I'll write it again, sorry for the long ong wait.
Oof I hate it when that happens. Bad UX maybe! 😅
Looking forward to your answer!
I guess it was that, most likely....
So here goes my anwser.
So in this case, we have 5 colors where the main colors are the darkest shades.
So the main colors are 3. Fucsia, purple and Orange.
I would normally do this.
Fromo right to left.
Fucsia
Fucsia-500
Purple
Purple-500
Purple-400
Orange
Orange-300
Orange-500
As you can see they are derivatives, so at the end of the day, you will always have a combination of two or three which are the main color palette.
At least is what i normally do, use two/three and then use derivatives, darker or brighter.
you can see what I built here apesoflondon.studio
Thanks for explaining that. I need to learn more about design systems. I like making UI components but I don't have any idea how to choose colors. Your color palettes are a nice inspiration.
UI Components are my thing too. I created wickedblocks.dev and wickedtemplates.com but they got acquired now :-) so I am barely creating components 😅
Components are fun.
Well, in that case look at Greg's videos.
Greg is my go to to learn.
Thanks for the great recommendation. Just watched the first one and that was incredibly helpful.
Congrats on your company. That's pretty cool. Now you can focus on helping those of us who are aspiring to be great at UX/UI/Design!