CSS3, JavaScript and HTML5 explained

Converting from HSL to RGB() & Hexadecimal Colors

Posted By on May 19, 2010

I created a ‘spreadsheet’ of the HSL() (hue, saturation, lightness) colors. I noticed if you inspect the file in Firebug, the left hand console gives you the rgb() color, and the right hand inspector gives you the hexadecimal #RRGGBB color.

To translate a color from HSL() to RGB() or #FFF, visit the HSL() ‘spreadsheet’ and inspect the color in Firebug. Simple as that.

Of course, you don’t have to use my spreadsheet. Simply declare an inline hsl() value on a div in your own sandbox. Inspecting it in Firebug will give you both the rgb() value (in the left hand firebug console, inline on the element) and in the right hand console, under{} in the style console.

About The Author

My name is Estelle Weyl. I am a consulting web developer, am writing some books with O'Reilly, run frontend workshop,s and speak about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via comments. If you want


2 Responses to “Converting from HSL to RGB() & Hexadecimal Colors”

  1. Theo says:

    Thank you Estelle, that`s very useful !

  2. willabee says:

    Download colorzilla Firefox add-on and you can select any color and read it in all modes. Alternatively, select the color picker to investigate any color on the wheel.