How to Steal a Color Palette
If you prefer to watch a video, here is one of me going over the steps 🤘😎
https://www.loom.com/share/3681a14fb2ed413b96cf52511faf3add
Color is one of the more difficult aspects of a brand identity, for one reason: there are too many options.
Which colors pair well together? What colors are attractive? How do I know I'll get enough contrast between them? And where do I find those darn hex codes the dev team is always asking me for?
All of these questions, on top of creating other visual assets, makes creating a color palette a real pain in the ass.
...and that's why you should steal it instead.
Here's how in 3 steps:
- Choose an attractive photo
Yep, an attractive photo. Think of a person, place, or thing that makes you feel the way you want your users to feel and look for photos of it.
No need to worry on trademark or usage rights, the photo is just a springboard.
Some of my favorite sites for this part:
unsplash.com
stocksy.com
behance.net
images.google.com
I can't stress enough that these photos can come from ANYWHERE. Whether it's an album cover, movie poster, landscape, tv show, or even a wonderfully choreographed plate of food, the key is to find something that strikes a chord with you and your brand.
- Open Adobe Color
This is a free online tool from Adobe that will allow you to extract color themes from photos.
You are going to click over from "Color Wheel" in the top left corner to "Extract Theme."
This will prompt you to upload a photo from your computer.
Once uploaded, you can toggle between different palettes from the photo on the left hand side (Dark, Deep, Muted, etc) and move the color selectors on the image. Play around and see which ones will best suit your brand.
- Check Contrast
The easiest way to check the contrast of your color palette is to look at it in black and white. This can be done right in your browser using the Grayscale Chrome Extension.
What you are looking for here is variety.
You can always brighten or darken a color for special cases, but the baseline palette should have a good mix of dark, light, and medium tones once switched to grayscale.
Keep moving the color selectors around until you've got a solid amount of contrast.
BOOM. Color Palette.
Once you've got your contrast sorted and a group of colors you are stoked on, copy those hex codes and get to work using your new color palette.
What do hex codes look like? A hashtag with a string of six characters following it.
See example below:
#F02B23
You and your team can extract the appropriate RGB and CMYK codes from the hex.
Go get 'em 🤘
If you blur images, you can get pretty cool gradients too—like https://uxdesign.cc/aurora-ui-new-visual-trend-for-2021-c763a7daa7e2#17d0
Ooooh, great addition to this. Thank you!