GET WEBSITE COLOR PALETTE FROM IMAGE FULL
GET WEBSITE COLOR PALETTE FROM IMAGE CODE
GET WEBSITE COLOR PALETTE FROM IMAGE FREE

I discard color categories with very few pixel counts. divide each H,S,B by 8,5,5 instead of 16,10,10.Ĭount up the most prevalent color categories, sort and display. Within each category, you can still find the exact color of each pixel, but for the most part the categories themselves are a close color match to the source image.Ĭhoose to divide the HSB into finer divisions if you want better color replication from the categories. So a pixel with HSB of 223,64,76 would be in the category 14,6,8 This helps group pixels into categories of similar colors. Round the result up or down to an integer. Loop through each pixel present in the resized image, reading the RGB values for each pixel, convert the RGB to HSB and store the HSB values to an array.įor each pixel color found, I then divide the Hue range (0,255) by 16, the Saturation range (0,100) by 10, and Brightness range (0,100) by 10. 400 px on largest dimension.) This actually helps convert subtle local color differences into fewer pixels with an average of those colors. I start with imagemagick and resize a large image down to a workable size (i.e. I do this to find the palette used for images (of artwork). Within those areas, you should have either: two colors, text and background, in which case your text is the lesser-used color or you'll have several colors, text and background image colors, in which case the text color is the most common color. Tweaking the color scheme can best be done in HSV space convert your colors to HSV space, and if the users want it to be 'Brighter', increase the Value, if they want it to be more 'Colorful', increase the Saturation, etc.ĭetermining the text color can best be done by characterizing areas of high variability (high frequency in Fourier space). Effectively, just enforce a certain amount of distance between your colors chosen from the histogram. Edit: if gradients are used, you'll want to pick distinct 'peaks' of colors that is, you may have a whole bunch of colors right around 'orange' if orange is one of the main colors used in the gradients. The top X colors in the histogram are the theme. To find the primary X colors, screencap the app.

GET WEBSITE COLOR PALETTE FROM IMAGE FREE

Feel free to check them out and ask yourself, 'How would I duplicate this? How could I improve it?' There are several existing sites that perform a similar function. Describing a method for reliably determining the main text color used in the website screenshot (will likely require its own, separate, algo).Allowing the user to tweak the color scheme according to various 'moods' such as 'Colorful', 'Bright', 'Muted', 'Deep', etc.

GET WEBSITE COLOR PALETTE FROM IMAGE CODE

Code is how we create - keep it simple and beautiful.

Describing an algorithm that is simple yet effective.

( Note: Please simply describe your algorithm - there's no need to post actual pseudocode.)īonus points (street cred points, not actual SO points) for:

GET WEBSITE COLOR PALETTE FROM IMAGE FULL

The image used in our particular situation is a screenshot of the user's website, taken at full resolution (e.g.

Given an image, how do you create a corresponding color scheme? In other words, how do you select the primary X colors in an image (where X is defined by the web app). However, we have an image (a screenshot of the user's website), so why can't we just satiate their laziness and do it for them? Answer: We can, and it will be a fun programming exercise! :) The Challenge A portion of the existing app requires the user to select a color scheme to use. In fact, the more work we do for them, the more they love the service. And, we've found that our users are obsessed with being lazy. So, I'm working on a fresh iteration of a web app.

Get website color palette from image