How to check if my browser supports HSL colors in Javascript?

Question

I want to determine if the browser supports HSL colors, if not, then I want to return to the generated RGB colors (I have both generated). Is there a way to do this without actually checking which browser the user is using?

Answer 1

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

, background-color HSLA, rgba hsla . , HSLA. :

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
})

, CSS metrobalderas answer , .

Answer 2

, :

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

, , , . , .

, , HSL.

Answer 3

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

Also see the following question:
Convert HSL colors to RGB