More-Colors.less by Jason Robb

More-Colors.less on Github →

Don't be silly, use LessCSS.

White, black, and grayscale variables for easier color manipulation while designing in the browser.

Color exploration in the browser

Thanks to LessCSS, I do most of my color exploration in the browser instead of the Photoshop color palette. Sure, I could be using hsla(0,0,0,0.5) instead of my shorthand @black50, but that's a lot more characters and shift key usage than just typing @black50 and being done with it.

Are there better ways to do this? Probably. Anything that's designed by a human is fallible, and so there's always a better way to do it.

White, Black to transparent

Use any variable from @white1 to @white99, the lower the number, the more transparent the color.

Black and white work the same way. The higher the suffix number, the more solid (i.e. not transparent) the color will be.

Original color: #09c

@white10 @white30 @white50 @white70 @white90

@black10 @black30 @black50 @black70 @black90

// syntax: 	@white##
// 		@black##

@white: #fff;

@white1:  fade(@white, 1%);
@white2:  fade(@white, 2%);
@white3:  fade(@white, 3%);
@white4:  fade(@white, 4%);
...
@white96: fade(@white, 96%);
@white97: fade(@white, 97%);
@white98: fade(@white, 98%);
@white99: fade(@white, 99%);

Solid grayscale colors

Grayscale colors are solid, as in they have no transparency. I found these to be useful sometimes when I didn't want the background-color to bleed through. @gray99 is closest to white, while @gray1 is closest to black.

Color: #808080 (@gray50)

@gray10 @gray20 @gray30 @gray40 @gray55

@gray60 @gray70 @gray80 @gray90 @gray97

// syntax: @gray##

@black: #000;
@white: #fff;

@gray99: mix(@black, @white, 1%);
@gray98: mix(@black, @white, 2%);
@gray97: mix(@black, @white, 3%);
@gray96: mix(@black, @white, 4%);
...
@gray4: mix(@black, @white, 96%);
@gray3: mix(@black, @white, 97%);
@gray2: mix(@black, @white, 98%);
@gray1: mix(@black, @white, 99%);

More examples

Horizontal rules

Make an <hr /> with a light top border and a dark bottom border; the horizontal rules on this page were made with these variables.

// Horizontal rules
hr {
	margin: 3em 0;
	border: 0;
	border-top: 1px solid @black10;
	border-bottom: 1px solid @white90;
}

Links

The links in the header of this page use these styles.

// Header links
.header {
	a {
		border-color: @white20;
		color: @white70;
		text-decoration: none;
		}
	
	a:hover {
		color: @white90;
		}
	}

How this project evolved

TextExpander is an amazing piece of software. I was using a snippet in #!/bin/sh mode to generate lists really quickly. I needed to create lists super fast and a shell script was just the way to do it.

Anyhow, I edited that shell script to work with these color variables. And voila, incremented numbers from 1–99. Here's that shell script, in you're interested.

#!/bin/sh

numberA=0
numberB=%fill:numbers%

until [ $numberA == %fill:numbers% ]; do
    echo "@black$numberB: fadeout(@black, $numberA%);"
    numberA=$((numberA + 1))
    numberB=$((numberB - 1))
done

And the same script without those TextExpander placeholder variables %fill:numbers%:

#!/bin/sh

numberA=0
numberB=10 # has to match the until == 10

until [ $numberA == 10 ]; do
    echo "@black$numberB: fadeout(@black, $numberA%);"
    numberA=$((numberA + 1))
    numberB=$((numberB - 1))
done

I've included the snippet in the folder /assets/ in this project.

About Jason Robb

I’m a designer based in Boston, MA, USA. I design and build software, websites, and web apps. Occassionaly illustrate seemingly complex ideas in a simple way. Say hello on Twitter @jasonrobb.