Today I’m going to share with you a quick 2-minute tip on how to generate color schemes from images using Photoshop. I learned this tip from Tessa Blakeley Silver’s WordPress Theme Design book which is a very wonderful resource on learning how to develop WordPress themes and I would suggest you check it out.
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.