TPCS: Turbo-powered color schemes for Less

This is Turbo, a new colormap from Anton Mikhailov at Google. Turbo's great for visualization. TPCS brings that greatness to CSS/Less color schemes.

View the Github repo

Define a @base-color and this library will give you 9 semantic colors which work with the base color:

@base-color: lightgreen;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

That's it. That's all it does! Nine semantic colors generated with the help of the Turbo colormap.

Examples make up the rest of this page, along with the How to Use It section.

TPCS gives you color schemes, not palettes. In TPCS, each color has some information associated with it, which is captured in the variable name.

@base-color: skyblue;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

@base-color: tomato;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

TPCS is designed to work with any base color. The Turbo colormap helps the library pick distinct, meaningful colors.

@base-color: royalblue;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

@base-color: greenyellow;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

@base-color: crimson;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

Very light colors still get bright, meaningful color schemes useful for user interface design.

@base-color: lemonchiffon;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

So do dark colors:

@base-color: navy;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

How to use it

Just import the tpcs.less file and define your own @base-color:

@import "tpcs.less";
@base-color: #4180DD;

After that, all nine semantic color variables should be available for your use in Less.

If you need help getting started with Less, check out their helpful overview.

More examples:

@base-color: peachpuff;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

@base-color: aqua;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight

@base-color: lightskyblue;

@base-color
@action	@info	@success
@reaction	@warning	@failure
@alternate	@accent	@highlight