6 ms·

The inconsistencies in your site's color palette

63 points by beghbali 14y ago

geon 14y ago
If a site use css gradients with carefully tuned values -say, for glass buttons- they will easily "use" 5-10 colors for each gradient. It would still look like a solid color + gloss, caustics and shadow, so from a design point of view it might be fair to treat each gradient as one "color".
- acoleman616 14y ago
  Exactly. My first thought, in regards to the great number of colors used by some sites, was also gradients.
bitsweet 14y ago
Main branding colors should be consistent - where unique colors will crop up is for things like borders, hover-states, text-shadows that will not necessarily work again in another context. Coderwall also deliberately has a slightly different color palette for each area of the site so it's not a big surprise to see our colors quickly stack up to the 44 colors the article mentions. It might be a little excessive to have >100 colors like some of the sites mentioned.
rshm 14y ago
Script does not take care of images and image backgrounds. You can use, http://cutycapt.sourceforge.net/ http://cutycapt.sourceforge.net/ to render the site into png, and analyze the pixels from it.
- deleted 14y ago
  [deleted]
- revx 14y ago
  Yes but one jpg of, say, a tree might contain thousands of colors and would completely throw off the data.
noonat 14y ago
Although a site may have a primary color palette, colors will often look very different in context. Our vision is full of tricks and assumptions that can cause the same color value to look drastically different in different situations. The color in your swatch might look different when used on a different background color, or might not appear as bright when used as a link color, and so on. It's reasonable to expect some variation in the color palette to deal with these issues. Some of these counts seem a bit excessive, though.
- geon 14y ago
  True. For dark text on a light background, I have often had to lighten up headlines to make the larger area match the percieved darkness of the body text. (And vice-versa.)
- meanguy 14y ago
  Exactly. Sass/Less have functions to adjust brightness and saturation for just this reason. I routinely tweak saturation so link and hover colors "read" the same on a white background versus even a light grey header.
- dictum 14y ago
  http://24ways.org/2006/cheating-color http://24ways.org/2006/cheating-color
k3n 14y ago
How is it the site with one of the most conservative designs -- Github -- has by & large the most colors? From memory, I only see a few shades of gray when I picture the site, though I know there's a few colors that accent the UI, but hell, 331 is more than the entire old "web safe palette". I wonder if there's some sort of anomaly or bug causing the number to be so high... perhaps they use far less images, and instead use CSS instead? Maybe they have a CSS-based color-picker somewhere in their source?
- pflats 14y ago
  Among other things, I'm sure syntax highlighting doesn't help.
  - nickknw 14y ago
    That would be my guess as to what's propelling it so high.
  - k3n 14y ago
    Ah yes, that. I can sleep now!
- J-H 14y ago
  lots of different shades of grey?
  - ericgsmith 14y ago
    ...50?
- nickknw 14y ago
  I think there is a bug. I ran it on my own site (http://nickknowlson.com http://nickknowlson.com) which is pretty simple in terms of colour. I got a large list of colours (33!) that contains colours I can verify are not in the stylesheet or present anywhere on the page. EDIT: Nevermind, false alarm. Forgot about the syntax.css file for pygments.
tylerxprice 14y ago
Could some of the 'used once' colors just be a shading or bevel on an element of the main color? Rather than just someone picking a color that is 'close enough'.
lazerwalker 14y ago
I'd bet part of why this happens on some of the more egregious 'offenders' (although it's arguable whether this is actually a problem or not) is the use of CSS preprocessors. It's a lot easier for a designer to add in one-off slight variations to a color when you have something like Compass or LESS's color manipulation functions.
- nfm 14y ago
  The converse is that if you're not using a preprocessor, it's very easy to 'adjust' a color and miss a few instances of it.
  - joahua 14y ago
    Search replace? :) Agree that if you've got well defined color variables setup the preprocessor route is potentially simpler.
babuskov 14y ago
It would be nice if results would be presented as colored boxes rather than color codes.
ecmendenhall 14y ago
Interesting. I understand the value of keeping design simple and CSS readable, but are there performance implications (page load times, &c.) to using a large color palette?
- cutie 14y ago
  Unlikely with modern computers and bandwidth.
notJim 14y ago
Our perception of color varies a lot based on context—size of the swatch, background color, surrounding colors, etc. It is unsurprising that even on sites with a seemingly-consistent color palette, you'd see a lot of variation. Colors that are "the same" will also vary based on how they're being used, e.g. I might use "the same" blue for a highlight as I do for a shadow, but if you look at the RGB values, they're totally different. The reason is that your brain is seeing a shadow, and separating the brightness component (reduced, since it's a shadow), from the color component. Man, isn't your brain incredible. It would be interesting to take this script and make it so that it does some kind of clustering, or looks at different components of the color—for example, you could just count the hues. One might expect to see a lot variation in lightness, but relatively little in hue, for example. On the other hand, maybe it's not that scientific, and designers just grab a color picker and fiddle until it looks right.
sudonim 14y ago
One thing I do is start with something like 5 base colors and then in my stylesheets (with SASS), I lighten or darken those colors. Using this analysis it would appear that we're all over the place. But in reality there are subtle changes using lighten and darken in sass to address what notJim is talking about in his comment -- "perception of color varies on size, background color, surrounding colors".
asder1 14y ago
HN has a orange background as inline HTML.. so actually this software it's just to extract color palette from CSS files
- esampaio 14y ago
  Yeah and several websites (google.com for instance) have their stylesheets on the HTML document to reduce the number of http requests, this program does not read them either.
deleted 14y ago
[deleted]
josephcooney 14y ago
I'm surprised the author chose to visualise this data the way they did. This is crying out for a stacked bar-graph, where each 'bar' is the colour in question, and the height of the bar is the frequency.
- kimmiller 14y ago
  This made me laugh. I've never heard anyone so passionately call for a stacked bar chart before - rightfully so it seems. Good job.
ahoge 14y ago
This is often due to color profiles. You take a screenshot (or a mockup), grab the color, and use that value. If you didn't explicitly disable color management beforehand, you've created a new color. Another reason are JPEGs. You get a mockup as JPEG and you use color values from that image. I recommend to put a list of colors at the top of your primary style sheet. That's where others will look for it.
evincarofautumn 14y ago
As a pixel artist, here’s my take on it: You ought to choose a palette that is as small as possible while remaining versatile. Each entry should serve a distinct purpose, and should look different (and look good) next to various other entries. For example: a mid-saturation, mid-lightness violet, say around #793D58, can be used as (1) a dark background for light elements, (2) a text or link colour on a light background, or (3) a shadow for bluish or reddish elements. Knowing how colours are perceived, and how to use them well, drastically reduces the size of a palette—the vast majority of pixel art uses fewer than 20 colours, and fewer than 10 is common. In particular, there is usually no need to create ad-hoc colours for different contexts, such as with LESS colour transformations. These can be useful tools, but they can also create inconsistency because they take control out of your hands. And when it comes to design, I for one prefer not to leave things to chance.

63 points by beghbali 14y ago

geon 14y ago

If a site use css gradients with carefully tuned values -say, for glass buttons- they will easily "use" 5-10 colors for each gradient. It would still look like a solid color + gloss, caustics and shadow, so from a design point of view it might be fair to treat each gradient as one "color".

acoleman616 14y ago
Exactly. My first thought, in regards to the great number of colors used by some sites, was also gradients.

bitsweet 14y ago

Main branding colors should be consistent - where unique colors will crop up is for things like borders, hover-states, text-shadows that will not necessarily work again in another context. Coderwall also deliberately has a slightly different color palette for each area of the site so it's not a big surprise to see our colors quickly stack up to the 44 colors the article mentions. It might be a little excessive to have >100 colors like some of the sites mentioned.

rshm 14y ago

Script does not take care of images and image backgrounds. You can use, http://cutycapt.sourceforge.net/ http://cutycapt.sourceforge.net/ to render the site into png, and analyze the pixels from it.

deleted 14y ago
[deleted]
revx 14y ago
Yes but one jpg of, say, a tree might contain thousands of colors and would completely throw off the data.

noonat 14y ago

Although a site may have a primary color palette, colors will often look very different in context. Our vision is full of tricks and assumptions that can cause the same color value to look drastically different in different situations. The color in your swatch might look different when used on a different background color, or might not appear as bright when used as a link color, and so on. It's reasonable to expect some variation in the color palette to deal with these issues. Some of these counts seem a bit excessive, though.

geon 14y ago
True. For dark text on a light background, I have often had to lighten up headlines to make the larger area match the percieved darkness of the body text. (And vice-versa.)
meanguy 14y ago
Exactly. Sass/Less have functions to adjust brightness and saturation for just this reason. I routinely tweak saturation so link and hover colors "read" the same on a white background versus even a light grey header.
dictum 14y ago
http://24ways.org/2006/cheating-color http://24ways.org/2006/cheating-color

k3n 14y ago

How is it the site with one of the most conservative designs -- Github -- has by & large the most colors? From memory, I only see a few shades of gray when I picture the site, though I know there's a few colors that accent the UI, but hell, 331 is more than the entire old "web safe palette". I wonder if there's some sort of anomaly or bug causing the number to be so high... perhaps they use far less images, and instead use CSS instead? Maybe they have a CSS-based color-picker somewhere in their source?

pflats 14y ago
Among other things, I'm sure syntax highlighting doesn't help.
- nickknw 14y ago
  That would be my guess as to what's propelling it so high.
- k3n 14y ago
  Ah yes, that. I can sleep now!
J-H 14y ago
lots of different shades of grey?
- ericgsmith 14y ago
  ...50?
nickknw 14y ago
I think there is a bug. I ran it on my own site (http://nickknowlson.com http://nickknowlson.com) which is pretty simple in terms of colour. I got a large list of colours (33!) that contains colours I can verify are not in the stylesheet or present anywhere on the page. EDIT: Nevermind, false alarm. Forgot about the syntax.css file for pygments.

tylerxprice 14y ago

Could some of the 'used once' colors just be a shading or bevel on an element of the main color? Rather than just someone picking a color that is 'close enough'.

lazerwalker 14y ago

I'd bet part of why this happens on some of the more egregious 'offenders' (although it's arguable whether this is actually a problem or not) is the use of CSS preprocessors. It's a lot easier for a designer to add in one-off slight variations to a color when you have something like Compass or LESS's color manipulation functions.

nfm 14y ago
The converse is that if you're not using a preprocessor, it's very easy to 'adjust' a color and miss a few instances of it.
- joahua 14y ago
  Search replace? :) Agree that if you've got well defined color variables setup the preprocessor route is potentially simpler.

babuskov 14y ago

It would be nice if results would be presented as colored boxes rather than color codes.

ecmendenhall 14y ago

Interesting. I understand the value of keeping design simple and CSS readable, but are there performance implications (page load times, &c.) to using a large color palette?

cutie 14y ago
Unlikely with modern computers and bandwidth.

notJim 14y ago

Our perception of color varies a lot based on context—size of the swatch, background color, surrounding colors, etc. It is unsurprising that even on sites with a seemingly-consistent color palette, you'd see a lot of variation. Colors that are "the same" will also vary based on how they're being used, e.g. I might use "the same" blue for a highlight as I do for a shadow, but if you look at the RGB values, they're totally different. The reason is that your brain is seeing a shadow, and separating the brightness component (reduced, since it's a shadow), from the color component. Man, isn't your brain incredible. It would be interesting to take this script and make it so that it does some kind of clustering, or looks at different components of the color—for example, you could just count the hues. One might expect to see a lot variation in lightness, but relatively little in hue, for example. On the other hand, maybe it's not that scientific, and designers just grab a color picker and fiddle until it looks right.

sudonim 14y ago

One thing I do is start with something like 5 base colors and then in my stylesheets (with SASS), I lighten or darken those colors. Using this analysis it would appear that we're all over the place. But in reality there are subtle changes using lighten and darken in sass to address what notJim is talking about in his comment -- "perception of color varies on size, background color, surrounding colors".

asder1 14y ago

HN has a orange background as inline HTML.. so actually this software it's just to extract color palette from CSS files

esampaio 14y ago
Yeah and several websites (google.com for instance) have their stylesheets on the HTML document to reduce the number of http requests, this program does not read them either.

deleted 14y ago

[deleted]

josephcooney 14y ago

I'm surprised the author chose to visualise this data the way they did. This is crying out for a stacked bar-graph, where each 'bar' is the colour in question, and the height of the bar is the frequency.

kimmiller 14y ago
This made me laugh. I've never heard anyone so passionately call for a stacked bar chart before - rightfully so it seems. Good job.

ahoge 14y ago

This is often due to color profiles. You take a screenshot (or a mockup), grab the color, and use that value. If you didn't explicitly disable color management beforehand, you've created a new color. Another reason are JPEGs. You get a mockup as JPEG and you use color values from that image. I recommend to put a list of colors at the top of your primary style sheet. That's where others will look for it.

evincarofautumn 14y ago

As a pixel artist, here’s my take on it: You ought to choose a palette that is as small as possible while remaining versatile. Each entry should serve a distinct purpose, and should look different (and look good) next to various other entries. For example: a mid-saturation, mid-lightness violet, say around #793D58, can be used as (1) a dark background for light elements, (2) a text or link colour on a light background, or (3) a shadow for bluish or reddish elements. Knowing how colours are perceived, and how to use them well, drastically reduces the size of a palette—the vast majority of pixel art uses fewer than 20 colours, and fewer than 10 is common. In particular, there is usually no need to create ad-hoc colours for different contexts, such as with LESS colour transformations. These can be useful tools, but they can also create inconsistency because they take control out of your hands. And when it comes to design, I for one prefer not to leave things to chance.