A Guide to Color Inspiration for Designers
You’ll feel like a young Josef Albers in no time
Color (or the absence of it) plays a critical role in our designs. They help us communicate tone, vibe, context, hierarchy, etc. The whole process of crafting color schemes and balancing tones, hues, and tints is magical.
And…hard sometimes. I can try a split-complementary scheme all I want and it still might not “work.” What’s a designer to do?
Glean inspiration from the abundance of color inspiration and help that exists on the Internet! As time is of the essence, both yours and mine, I’m going to keep this snappy with a short intro. Here are some of my favorite online resources for finding color inspiration, putting together schemes, and working on my color theory skills.
Design Seeds
Design Seeds is an oldie but goodie for sure. Celebrating their 10th anniversary this year, this is one of my favorite inspiration sites because of how visual it is. Beautiful photography becomes the subject from which colors are selected and arranged. As a foodie, I personally love looking in the Edible Hues collection for ideas. The layout of the site is gorgeous and each scheme comes with hex codes — so easy.
HTML Color Codes
With a lot of my work being done for the web, I enjoy using the HTML Color Codes Color Picker because it outputs code while helping me up my color theory game at the same time. The UI is gorgeous, displaying colors and their metadata in a rounded card format (I love cards!). The creators did this intentionally, saying, “We built HTML Color Codes because we believe tools for design should be well designed themselves” (Dixon & Moe). The colored cards dynamically change depending on color scheme selection. You can choose from a drop-down list of options that will display triadic, tetradic, complementary, and other color groupings based on the initial color. The site also features links to other curated tools and resources for designers such as stock photo image sites and color palette generators.
Picular
Picular is such a fun concept — “Google, but for colors.” You simply type in a search term and the app returns colors that it “magically” thinks fits that term. I’m not sure it’s always the most accurate representation of what I’m imagining in my mind for a final palette, but the variety and grouping of colors are great for inspiration.
Color Hex
While the UI of Color Hex isn’t quite as cute as some of the others on this list, the amount of information and resources available per color makes it a favorite of mine. I used this more in the past but for some reason had forgotten about it until recently. With just one hex code, Color Hex provides tons of codes (what is Hunter Lab?!) for use in a variety of contexts. As you scroll down, you see the color in a range of tints, shades, tones, complementary combinations and related colors. No need to click a drop-down here, all you need is right on the page. They also showcase color palettes if you click “Palettes” in the top navigation — this one called “Gentle Sunset” is so pretty!
Colordot
Colordot is a new website for me but I’m having fun trying it out! I have to admit, the gestures take a little while to get used to but the concept is really fun. Created by Devin Hunt at HailPixel.com, you use your mouse to manipulate the saturation, hue, and lightness of a color. As you click the screen, you save that color to a column and ultimately end up with a color palette. Devin’s other work is just a visual and interesting to interact with (check out Jelly Mesh) so if you’re a visual designer into creative coding, definitely check out his stuff.
flatuicolorpicker
Here’s another a new website I’m excited to add to my color inspo list. flatuicolorpicker is the personal project of Vasilis Baimas, a WordPress web developer based in Greece. I initially wasn’t sure how to interact with the grid but if you click a color group at the top of the screen, you can choose what code you’d like to use (rgb, hex, hsla) and the grid displays a variety of colors with their corresponding color code. It’s just a beautiful, clean layout and I love that it celebrates flat design.
Color Hunt
I LOVE Color Hunt! This is one of my absolute favorite websites for color scheme inspiration. From the drop down list on the side, you can choose a general color, like orange or blue, and then view a ton of palettes that contain that color. The variety and surprising combinations makes this a go-to resource for me. I personally pulled colors from that bottom right purple palette in the photo above for my Bob Ross quote app. Highly recommend.
BONUS: WebGradients
Who doesn’t love a good CSS gradient?! I found out about WebGradients from a fellow Studio cohort-mate (Jonas Escobedo) and use it a lot. These gradients are beautiful, smooth, and classy. Plus, you can easily copy the CSS snippet and apply it to your web projects in seconds. Plus plus, you can download Sketch or PSD files for use in design comps. Plus x 3, the site’s card layout is beautiful! The UI is nice enough to make me want to browse even if I have no need for a gradient in my design.
Hope you found this helpful and if you think of any other cool resources I’ve missed, comment them below! There are so many I didn’t mention, just because I haven’t used them, so be sure to check out this page for even more websites.
