How do you guys pick color for your webpage?

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

3 Likes

I love colours.cafe on instagram.
They post a new palette every day :slight_smile:

Maybe you can find some inspiration :+1:

2 Likes

As Dan said there are many tools out there, one that I’d like to suggest is:

http://paletton.com

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…

2 Likes

+1 for palleton, I’ve used it for years, it’s imo the best one around.

2 Likes

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.

2 Likes

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

1 Like

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.

2 Likes

This is helpful. Thanks