How can I check if my browser supports HSL colours in Javascript?

Question

I want to be able to determine if a browser supports HSL colours, if not then I want to fall back on generated RGB colours (i have both generated). Is there any way to do that without actually checking what browser the user is using?

Smaltite

Why not stick to RGB and not worry about it? You're going out of your way to do something that makes no difference to the user. – Tannatannage

HSL is easier to work with in terms of generating colours programatically (in my case taking a number between 1 and 5 and choosing a colour from a gradient) also I find it easier to visualise colours when working with HSL – Smaltite

Answer 1

The easy answer would be: http://www.modernizr.com/. You can look at the source code and modify it to use only the part about HSL.

Basically it just creates a new element, sets its background-color using HSLA values, and then looks for the presence of rgba or hsla in the style attributes of the object. If present, then the browser supports HSLA. Very clever:

function supportsHSLA() {
  var style = createElement('a').style
  style.cssText = 'background-color:hsla(120,40%,100%,.5)'

  return style.backgroundColor.indexOf('rgba') > -1 ||
    style.backgroundColor.indexOf('hsla') > -1
})

Note that for regular CSS usage metrobalderas answer below is the way to go, but for the purpose that paulb intended, this is one way to do it.

Washday

Answer 2

Detecting is nice, but adding a fallback is even better:

#element{
   background: rgb(255, 10, 25);
   background: hsl(240, 100%, 50%);
}

First, you set the fallback, the property that browsers mostly will understand, and then you set the new property. If this one is not supported, it will not overwrite the previous one.

Although, I don't know what you would need HSL for.

Triptolemus

This is excellent advice but doesn't work for me as I am trying to use hsl to set the colour of a polyline in Google Maps (not that I mentioned that before though). HSL is easier to work with in terms of generating colours. – Smaltite

Answer 3

If the concern is that working with HSL is easier to generate colors but you are worried about browser support, you can consider working with HSL in your business logic but converting to RGB when applying the colors to the DOM elements.

Also see the following question:
HSL to RGB color conversion

Batsman