Yellow Lab Tools now retrieves the list of all colors defined in CSS on a page (thanks to @analyze-css by Maciej Brencz). It then transforms the list in a nice colors palette, where each color is sized by number of occurrences.

YellowLabTools colors palette

How to calculate your own colors palette?

  1. Go to Yellow Lab Tools.

  2. Enter the URL of your webpage.

  3. Once the test is complete, click on the “Different colors” line.

    YellowLabTools colors line

  4. The palette is on this page. Here you go!

Good practices

Try to maintain a small palette.

You can achieve this by switching to a CSS pre-compiler such as Less or Sass. Set a list of authorised colors in variables and don’t allow anyone to set a color property that’s not a variable.

Be extra-careful with colors close to each other. This other tool can help you by telling wich colors could be merged as the human eye wouldn’t see the diffences: css-colorguard.