Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In CSS, can HSL values be floats?

Tags:

css

hsl

The CSS3 spec only specifies that:

The format of an HSLA color value in the functional notation is ‘hsla(’ followed by the hue in degrees, saturation and lightness as a percentage, and an , followed by ‘)’.

So am I to understand that these values would be interpreted not as integers but as floats? Example:

hsla(200.2, 90.5%, 10.2%, .2)

That would dramatically expand the otherwise small (relative to RGB) range of colors covered by HSL.

It seems to render fine in Chrome, though I don't know if they simply parse it as an INT value or what.

like image 448
Heilemann Avatar asked Apr 19 '11 21:04

Heilemann


People also ask

What is HSL value in CSS?

HSL Value. In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Does CSS support HSL?

CSS hsl() FunctionThe 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.

Is HSL better than hex?

Formats like RGB and Hex are more machine-readable than human-readable. HSL, the opposite, is meant to be understandable by humans better. HSL is a more recent and spontaneous way to work with colors.

How does HSL Colour work?

In HSL, the Hue determines what color of the rainbow something is. It's represented in 360 degrees, like a traditional color wheel. One of the main advantages of HSL over RGB color is that complementary colors are located across from one another, which makes the whole system very intuitive.


2 Answers

HSL values are converted to hexadecimal RGB values before they are handed off to the system. It's up to the device to clip any resulting RGB value that is outside the "device gamut" - the range of colors that can be displayed - to a displayable value. RGB values are denoted in Hexadecimal. This is the specified algorithm for browsers to convert HSL values to RGB values. Rounding behavior is not specified by the standard - and there are multiple ways of doing rounding since there doesn't appear to be a built-in rounding function in either C or C++.

HOW TO RETURN hsl.to.rgb(h, s, l): 
       SELECT: 
      l<=0.5: PUT l*(s+1) IN m2
      ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

From the proposed recommendation

In other words, you should be able to represent the exact same range of colors in HSLA as you can represent in RGB using fractional values for HSLA.

like image 187
Michael Mullany Avatar answered Sep 27 '22 16:09

Michael Mullany


AFAIK, every browser casts them to INTs. Maybe. If I'm wrong you won't be able to tell the difference anyway. If it really matters, why not just go take screenshots an open them in photoshop or use an on-screen color meter. Nobody here is going to have a definitive answer without testing it, and it takes 2 minutes to test... so...

like image 39
Nobody Avatar answered Sep 27 '22 17:09

Nobody