Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 320
paullb Avatar asked Dec 29 '10 14:12

paullb


People also ask

Is HSL supported by all browsers?

However, although RGB and Hex color codes are supported in most browsers, HSL colors are mainly supported in HTML5 based browsers. You might have used all or some of these methods to set color properties in CSS.

What is HSL in Javascript?

The hsl() function define colors using the Hue-saturation-lightness model (HSL). HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

How do you read HSL colors?

HSL Color ValuesHue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

What does HSL stand for color?

HSL(Hue-Saturation-Lightness) The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak.


3 Answers

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.

like image 77
metrobalderas Avatar answered Oct 08 '22 19:10

metrobalderas


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.

like image 20
devius Avatar answered Oct 08 '22 20:10

devius


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

like image 29
Sygmoral Avatar answered Oct 08 '22 19:10

Sygmoral