I’m having difficulty picking Colors for my webpage (background,font,footer etc) and wasting hours in Google searching for different colour combinations. So how do you pick Colors for your projects?
I waste hours searching Google for colour combinations! But more seriously, for me personally I:
- Just use black, white and shades of grey for as long as possible. That will get me to a point where everything is readable, and often to somewhere that looks pretty good.
- Once that becomes impossible to go further with, pick a primary colour. I find generally that the ideal element to use to test that is buttons.
- Add that colour in. You need tints and shades of it (for buttons you want to lighten or darken when active for example, or desaturate and lighten when disabled).
- Replace some of the black/white/grey on other bits of the page with shades/tints of that colour. Often, mix the primary colour with the blacks/greys/whites, and start using that for everything (so for example, body text becomes a very dark, almost-but-not-quite-black version of the primary colour).
- Now you have a primary colour, the colour palette tools become a lot more useful: you can normally input your primary colour, and get complements to it. Add those + tints and shades.
- and so on
Things are hella easier if you have some kind of branding to work off, but the above works for me if I have a completely clean slate. YMMV, it’s almost always a slow and painful process unless you get really lucky
There are loads of tools to help, and I’m sure other people will suggest things. I would install Adobe Capture on your phone: it lets you point your camera at interesting stuff and automatically give you colour palettes based on the stuff, it’s really useful if you see some colour scheme you like
I love colours.cafe on instagram.
They post a new palette every day
Maybe you can find some inspiration
As Dan said there are many tools out there, one that I’d like to suggest is:
You can play around with the color wheel, have monochromatic, adjacent, triad colors and it shows you hex, rgb, hsl values and a lot more…
+1 for palleton, I’ve used it for years, it’s imo the best one around.
Google’s Material design docs have a color tool for designing a palette, but what I really like is their color system explanation of how to pick colors for different parts of your UI.
If you don’t have any idea at all using a picture to pick some colors from can give some creative ideas. If you already have a picture for your page that is a good choice. Or just some random pictures that have colors you like.
There are a bunch of online tools. Google search: colors from images, color palette generator
I use https://coolors.co/
It’s pretty nice. Once you see a color you like, you can lock it and keep generating colors that fit the one locked.
This is helpful. Thanks