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"
Quick tip: Get a darker/lighter version of a hex value

Leave a comment