Introducing Palette, a full set of colors for LESS

Oh, I do enjoy playing around with LESS, discovering new turnarounds to address unexpected challenges every second day.

Palette for LESS lists the default swatches of Photoshop, each by its specific name, each as a unique variable. You can save a little bit of your brain’s waves recalling names instead of HEX codes.

Using variables instead of reporting the same value again and again is priceless. LESS changed the way I manage details that need to be coherent in a particular design. Like colors and tones.

Moving a step forward along the same path, I ended up having a file to sum up an entire set of basic tonalities. Palette for LESS is list of variables, each containing a HEX value: a single color. Not much more than that, at the present. Still quite handy.

I use Photoshop (a quite out of date release!) to design templates. Its basic palette isn’t really that bad. The selection of tonalities is great specially for quick text coloring, backgrounds and gradients. Until I decide the precise set of colors, Palette helps me to speed up and test variations.

How does it work?

That’s simple. Import Palette for LESS at the top of your main stylesheet.

@import "palette.less";

From here on, it should be intuitive. Let’s say the text needs to be softy, and the title purple (!!), here we go.

body { color: @gray-85; }
h1, h2 { color: @dark-magenta; }

The future?

I don’t know, the future will probably be pretty. But about Palette for LESS, the next step will probably be adding few useful coloring functions to the pot. But by now the file is already quite useful to me. Perhaps it can benefit your design, too. It’s just a simple list of colors. I may add new groups of colors or palettes in future. The sky is the limit. Indeed I have to refrain to make it bulky!

Feel free to use it at will. Enjoy! And don’t miss to tell me what you think about.