Generate Color Schemes From Images in 2 Minutes
Step One: Pick Your Image
Let’s imagine that we’re designing a website for a beach resort. Just pick an image that is most appealing to you or an image that you would use on your website banner. In my case I used a stock image of a small ship in a beach from Stock.xchng. Take note not to pick an image with a watermark because it will affect the output of our palette.
Step Two: Pixelate Your Image
Open up your image in Photoshop, then go to the Filter menu, select Pixelate then Mosaic.
The Mosaic command will turn your image into huge pixels. The larger the cell size, the fewer colors you have to deal with but the colors become more muted. A cell size of 50 to 100 for a 72 dpi web image is enough. You might need to make your cell size larger for images with higher resolutions.
Step Three: Pick your colors!
Once you have applied the Mosaic filter, you can now select your favorite colors. You can do this is by double-clicking the foreground palette in the toolbar. This will open up the color picker dialog box in which you can get the hex number of a color.
Below is the color palette I’ve chosen. You can just list down the hex value of each color so you can use it in your CSS file.
I hope this little tip will be helpful in creating your color palettes. Do you have any other methods that you would like to share? I would love to hear them in the comments. Thank you.
Nice tip Raymond. I’m always grabbing colors from images to use in a color palette, but I never thought to pixelate the image first. Thanks. I will be using this.
Fast and smart indeed. Thank you!
Nice, simple method. I’ll definitely keep this in mind. Thanks.
http://colorhunter.com/ – there is an easier option. This site does all the work
Great tip! Will be using this one in the future for sure.
very good tip! thx
Thank you so much for the comment guys!
@Steven: Yeah, the tip was so simple and amazing!
@Max: Thanks for suggesting Color Hunter
Hi,
If you haven’t tried http://kuler.adobe.com then you definitely should. You can upload a photo and really mess with the colours.
I’ve enjoyed your blog articles! Thanks for this quick and easy tip.
Or use http://pictaculous.com/ – a nice service that does exactly this.
[Not affiliated with them]
Nice tip! Very simple and very useful!