Standardista

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 element.style{} in the style console.


About The Author

My name is Estelle Weyl. I am a consulting web developer, write for Community MX, speak about web development on occasion, and have a full time job as Senior Web Developer for a small startup. I’ve been coding CSS, XHTML, JavaScript and PHP since 1999, tableless CSS since 2003. If you have any recommendations on topics for me to hit, please let me know via comments.

Comments

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.