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

September 27, 2011 Tim BanksChrome, CSSLeave a comment

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:

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.

HSL value of the color — The last percentage value is for "lightness"

Chrome Dev Tools at Google I/O 2011

May 25, 2011 Tim BanksChrome, dev tools, Firebug, GoogleLeave a comment

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.