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.
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:
- 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
Choosing a Color
You can choose a color using a colorpicker or just paste in a color you currently have.
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.
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.
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!