Less Color Generator

Computers love repetition and it can be a time consuming task to start a project with the same process time after time. A common solution to this is to have the computer generate repeating patterns for you. This technique is called Automatic programming. HTML and CSS involve a lot of repeating patterns, and LESS is a tool that makes generating CSS a lot easier. So what happens when you want to make LESS faster? Introducing "Less Colors"!

What is it?

Less Colors is a small web tool that we have developed and have used internally. It's a simple example of the ways we save development time with the same tools we use to make your software.

What is it really?

Initially, Less Colors serves as a basic color picker. It takes in either a HEX value or HSL (Hue Saturation, Light) values through a triple slider.

Once you pick a type of color scheme, Less Colors will process the color you input and use it as a base color in a color scheme. Then it will output your base color and selected color scheme type and give you a full color palette as less color functions of your base color.

Why?

Having a 5-color color scheme that is derived from a single HEX value in your CSS can be extremely useful. It allows you to easily change your base color hex value and the rest of your scheme in one step. This makes changing the look or a site for mockup much faster.

How do you use Less Color?

We find it to be most useful in producing very quick in-the-browser mockups and wireframes.

Let's assume that you are making a mockup of a web app for a client and all you've been given is a logo. With Less Colors, you can input the the main color from the logo, then pick a color scheme type, integrate this less code into your bootstrap variables.less file and mockup the layout as you normally would with Bootstrap. What if the client would like the colors to be darker or more red? That’s an easy fix. You just need to change the base color or pick a different color scheme and your mockup will adjust accordingly.

Why Less?

We like less because bootstrap is built on less. This makes it extremely easy to integrate the Less Color output into a typical bootstrap installation. Just add the Less Color output to the Bootstrap variables.less file, and map the bootstrap default variables to your color variables.

Want to try it out?

You can check it out at Less Colors. Also make sure to checkout this code pen to mess around with the options: Less Colors Code Pen Example