How do I find the best colors/fonts for my app?
Hi everyone,
I am a developer currently learning about UI/UX to build my side-project apps.
I have no background in UI so I often have a hard time picking the right font/color for my projects. I know the basics: color theory, font types, etc... and I know some great resources like :
However, I can't tell what is the emotion associated with a specific color or font.
Is there any tool out there that can recommend colors/fonts depending on the impression you want to make?
For the experienced developers here, how do you find the best font/color for a product?
Thanks very much in advance!
Trending on Indie Hackers
I made this.
Https://www.colorsandfonts.com
Thanks, @Michael_Andreuzza for the resource 😃. I will add this to my toolbox!
You welcome, hope it helps.
I am in the process of making a free tool to generate website/app color palettes (https://productcolors.com/). It doesn't help you pick the initial colors, but it'll help you generate the shades you'll need to use them in an actual product alongside dark mode. Disclaimer: I am still tweaking it somewhat daily so results will vary day to day.
To generate the initial colors something like coolors.co and https://cssgradient.io/color-shades/ is useful. In addition, Refactoring UI book is excellent and it has a good chapter on selecting colors (https://refactoringui.com/previews/building-your-color-palette/) which influenced my project.
That's a really nice tool. I also like the summary for each color category (primary, secondary, contextual, etc).
Really handy.
Thanks! If you have any feedback, it would be very much appreciated. For context, I am currently working on an update to re-label all the sliders, improve how saturation scaling is done, add tooltips and improve the documentation.
cheers!
Nice.
some suggestions:
Thanks a lot, @sirotkin. Thanks for sharing your website: I have added it to my list of UI resources!
PS: I have actually just found Refactoring UI and will definitely give it a try 😃
Ah it's such a good resource! I also really like https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/ if you ever want to make a dark mode.
Thanks a lot 🙂.
I have started reading Refactoring UI today and in fact, it is very well written + more adapted to developers like me!
Thanks for sharing again another resource !!
Find inspiration on http://dribbble.com, my tip is to search by words around your product. There is a reason why colors are used in the search you did, so just try to fit the perfect color palette to your product.
Also try to save dribbble posts if you thing something on that post could be helpful, however small it may be
Hello @VictorGonz, this is really helpful: a tactic that @akumar0630 also recommended. So I will definitely use that one!
Thanks again 😃
Hey I have alot of struggle with this too! My hacky work around is to go onto Dribbble (https://dribbble.com/) and look at mockups. When I find one that I like, I use Adobe Create (https://color.adobe.com/create/color-wheel) to find a solid color pattern. Then I pick out 2-3 colors and go from there.
Thanks, @akumar0630 for the hack. I will probably try that!
Never tested https://color.adobe.com/create/color-wheel but this is really cool especially the fact that it tests for accessibility 🙂
Hi Fatou I made Snapfont to preview fonts from the google library on any live website. Hope this helps.
Hello @shash7, very nice product! Thanks for sharing.
This will definitely join my toolbox.
PS: you may want to add a link to the PH page or the CSS-Trick article that mentions you 🙂
Try coolors.co
Thanks @BraydenTW for sharing 🙂. From the color suggestions that are made, how do you find the best palette that suits your product?
Go to the color generator (not the pre made ones) and I put a couple colors you want in your palette, lock those colors, and then keep generating until you find your favorite.
@BraydenTW sorry if I was unclear but what I am struggling with is not generating palettes: I have used coolors.co and colorhunt before. My problem is how to pick the color that is best for my use-case.
For example, if I am creating a business site, I would like to find the palette that best suits it. Rather than entering the colors, I would like to enter sentiment or domain and get palettes generated.
Oh sorry. I’m not very sure about how to implement that.
No worries: thanks a lot for the help 🙂. I feel like this needs some design experience which I don't have; I sometimes like a palette but it is not the most appropriate for the business 😔.
Hi Fatou! I don't know of any resources but I am a big font geek, so if you want to share any more info about the project I'd be happy to recommend some fonts to you.
Hi, @joinpalm thanks for your reply 🙂. I don't have a specific project in mind but that is something I struggled with on my previous project: https://sookind-landing-page.web.app/.
I am curious to know how you became a font geek? Could you recommend me some resources?
Thanks !
Hi! Yes of course! A few things that I do:
You can see what fonts the most modern brands are using and can see other websites using those fonts, or similar fonts
You'll start to develop and eye for what the popular fonts are, or styles, and how they are being used. If you check out any of those sites and want to run a few fonts by me, definitely happy to brainstorm!!
Thanks a lot, @joinpalm: you are really a font-addict 😃.
I like how https://www.typewolf.com/ contains so many real-world examples.
Will check the resources and reach out if I have any question!
Thanks a lot 🙂