SASS Color Functions

Sass has an extensive set of color functions are helpful when you need to adjust the value, saturation, and hue for a base color.

// green
$greenBase: #03BD88;

// a darker shade of green
$greenShade1: darken($greenBase,10);

// an even darker green
$greenShade2: darken($greenBase,30);

Think about a beveled CSS3 button and how many colors need to go into the button surface, the shadow, the highlight, plus the hover and active states for all of those. All of these colors can be made by adjusting the lightness and darkness of a single base color.

Chrome's Developer Tools

Chrome Dev Tools

The color picker in Chrome's Developer Tools is a godsend because it dynamically updates what you're looking at on the page as you interact with it.

In addition, you can adjust the output to be hex, rgb, or hsl, then easily copy and paste it to your CSS.

DigitalColor Meter

DigitalColor Meter

Mixing color is intuitive and easy in Photoshop, but copying those hex values over to the code is obnoxious. One of OS X’s best kept secrets is this light color metering app.

With DigitalColor Meter, just eyedrop any color on the screen into a paste-ready hex color by pressing Command+Shift+C.

W3C's color swatch cheat sheet

Aside from discovering many creatively named swatches like PeachPuff and MistyRose, this W3C resource lists the 147 colors defined in the HTML and CSS color specification.

Packages for Sublime Text 2

Chances are your favorite text-editor has some feature that helps with picking and seeing CSS color swatches. Sublime Text 2 has a couple packages:

LiveCSS – highlights all hex, rgb, and named colors with the actual color.


ColorPicker – adds a fully featured color picker


While Photoshop and other graphic editing tools will be hard to compete with in terms of a fast and intuitive tool for establishing a color palette, there exists some tools to help make color creation in the browser more visual and intuitive.