Color picking for the web

Recently, I was in the market for a new color scheme, which means I had to think about things like branding, how colors work together, and, most importantly, how the colors work well together on the web, on a website.

I’m starting to think I’m not very good with colors. I feel like I understand the theory, and maybe I understand colors in the context of, say, painting, or a specific mark (see: the handful of logos I’ve designed). But picking out a color scheme that works well as part of a website isn’t the same as picking colors the vibe well together, there’s so many other factors to consider!

Anyway, this isn’t a philosophical blog post, this is mostly a list of links. Here are some things I’ve used.

• Coolers: I think this site is so good for picking a range of colors that work well together. I like how you can go up or down a shade in a given range, too, when trying to select the right amount of contrast between colors. I’ve found this useful for when I need a full-ish rainbow (like 5 different colors) and I want them all to place nice with each other.
• Happy Hues: This is my newest discovery, really aligned with the problem I expressed above. It’s a couple dozen really nice palettes that you can toggle through and see how they work on a real website, not just in theory.
• Random a11y: I love some of these color combos and how you can keep generating them, and that they’re guaranteed to be accessibility-compliant. This is such a good way to get a duo-tone set together. I like lighter backgrounds though, so I wish there were some more pastel or nuanced-pale-color tones to work with.
• mycolor.space: I like that this works with a predetermined color (if you choose) and gives you a big range of ways to work with that color and its complementing colors.
• paletton: I used to use this one a lot to pull together complementary colors in a duo or triad or tetrad combination, it’s like a super-sized colorpicker.
• encycolorpedia: This is one I used to use religiously, or it’s close enough to the same concept. I like using this to analyze one color in particular, basically to check if the vibes are right for its intended purpose. There are a few similar sites like this, e.g. color-hex.com and hexcolorpedia.

Oh, and one more bonus! For my last few projects, I’ve worked with Tailwind and they have a nice, flexible palette with ranges to choose from, so that makes things easy.