'Extract color palette of a webpage [closed]

I intend to recolor a website with a new palette of colors. I plan to first extract the colors from the webpage and determine its color palette and then perform a one-to-one mapping with the palette. I) Would you recommend a better approach? Regarding this approach, I have the following questions:

  • II) How do I extract the colors from the web page?. My guess is scraping the stylesheets of the page. However, there might be unused styles or colors corresponding to hidden elements. III) Would it be a better idea to find the visible DOM elements and see their computed colors?
  • IV) How do I determine what the primary colors are in the color palette of the webpage? Counting the frequency of colors or the size of the colored elements might be an option and I was wondering what would be a robust solution.
  • In the case, the stylesheets do not exhaustively specify the colors of the web page, the browser might use defaults. V) How do I consider the default colors as well?
  • Finally, VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets?
javascripthtmlcssdomcolors


Solution 1:[1]

I) Would you recommend a better approach? II) How do I extract the colors from the web page? You can use Site Palette for this. It's an amazing Chrome / Safari / FireFox extension that analyzes a site's colors and presents them in a very organized way in just a matter of seconds.

Google Site Palette

III) Would it be a better idea to find the visible DOM elements and see their computed colors? I'm pretty sure the tool only determines the visible elements' colors.

IV) How do I determine what the primary colors are in the color palette of the webpage? This is very subjective. Some people mix all colors of a rainbow in a single webpage. It's hard to tell what the primary color is, assuming it exists.

VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets? The best way to override the colors largely depends on the framework you're using the level of control you have. I don't see why it can't be achieved through User Style Sheets if you're able to identify the elements you're trying to override.

Solution 2:[2]

I would download the images and create a palette from those using a good graphics program (like PhotoShop, Fireworks, or Gimp). Another option (also using one of those programs) would be to use the "eye dropper tool" to sample any color on the webpage that you were curious about (and give you the related rgb# so you can duplicate it).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sheedo
Solution 2 elbrant

Related Questions