Quick tip: Get a darker/lighter version of a hex value

This tip is for Chrome users.  Inside of the Chrome Developer Tools you can view the color value of an element by inspecting the element.  You will see something like the following:

Hex value of the color

If you click on the colored box, the value will rotate through the other possible values (hex, rgb, hsl).  Click on the box until you see the hsl of the color.  The last value is for “lightness”.  Changing the percentage makes the color lighter (higher percentage) or darker (lower percentage).  After changing the value just click on the colored box again to get back to the hex color value.

The last percentage value is for "lightness"
Advertisements
Quick tip: Get a darker/lighter version of a hex value

Chrome Dev Tools at Google I/O 2011

If you are still using Firefox just for Firebug, I bet you will switch to Chrome after watching this video.  I used to stick with Firefox while developing since Firebug was so good at what it did, but Google is doing great things with their dev tools.  The following talk is from Google I/O 2011 featuring Paul Irish and Pavel Feldman.  The talk mostly covers new features, but you can take a look at their docs site for all the features.

The video clocks in at just over 40 mins but it is well worth the time.

Chrome Dev Tools at Google I/O 2011