Keep an eye on the number of different colors in your CSS

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.

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.

   

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.