Calculated Color Scheme Generator

Chris Sevilleja
💬 comments

Calculations in web design have been used to help make life easier for web designers. It is also more visually pleasing to the end user. Examples of calculations in design are the 960 grid system and the golden ratio. Color schemes can benefit from this too.

Calculating Colors

​Choosing color schemes by eye isn't the easiest. There's lots of room for error. Using calculated colors based on lightness and darkness helps make the process simpler. There are many color sites out there to help create a color scheme (Color Scheme Designer, kuler, and many more).

The focus of this approach is to have a simple calculated way of getting lighter and darker colors for:

  • Gradients
  • Text Colors
  • Box Shadows
  • Much more...

Creating different web elements is easy when you take a mathematical approach. Using different percentages of lightness and darkness can create gradients and borders, text on background colors, and drop shadows.


Our Open Source Project: Color Monster

We've created a little project (Color Monster) that lets you calculate colors. The GitHub repo is available for everyone that wants to take it and tweak it or add to it.

Choosing a Color

You can choose a color using a colorpicker or just paste in a color you currently have.

color-monster-picker Once you update the color, the entire site (header, buttons, text colors) will update so you can see calculated colors in action.

Color Monster calculates lighter and darker versions of the base color with percentages. 10% difference is considered a different shade.

Getting the Gradient Code

Just clicking on one of the buttons at the top will provide the gradient code for that specific button. Also the gradient code can be found at the bottom of the page.


Tweaking Gradients

You can also click through in the Gradients section to try to build different gradients to your liking.


Ideal Color Combinations

Gradients should be made up of colors that are 2-5 shades away from each other. Borders should be 2-3 shades darker than the base color. Text Colors should be 6 shades lighter than the base color. This will help the text be a subtle pop off of its background instead of having pure white text.

Moving Forward

We understand that this is nowhere near as fully fledged as some of the other great color tools on the market. We just think that a simple tool like this will make it simple to pick colors for projects or create gradients wherever they are needed in web development.

If anyone has suggestions or ideas to improve this project, please contact us, comment, or send pull requests!

Chris Sevilleja

166 posts

Co-founder of Slapping the keyboard until something good happens.