Questions tagged [hsl]

HSV is cylindrical color model that determines colors by hue (0°-360°), saturation (color intensity) and lightness (from black over the color to white).

The HSL model describes colors in terms of hue, saturation, and lightness (also called luminance). (Note: the definition of saturation in HSL is substantially different from HSV) The model has two prominent properties:

  • The transition from black to a hue to white is symmetric and is controlled solely by increasing lightness

    • Shading and tinting are controlled by a single value, lightness
  • Decreasing saturation transitions to a shade of gray dependent on the lightness, thus keeping the overall intensity relatively constant

    • Tones are controlled by a single value, saturation

The properties mentioned above have led to the wide use of HSL, in particular, in the CSS3 color model. As in HSV, hue corresponds directly to the concept of hue in the Color Basics section. The advantages of using hue are

  • The relationship between tones around the color circle is easily identified
  • Shades, tints, and tones can be generated easily without affecting the hue

http://xahlee.info/js/i/HSL_color_model.png

Lightness combines the concepts of shading and tinting from the Color Basics section. Assuming full saturation, lightness is neutral at the midpoint value, for example 50%, and the hue displays unaltered. As lightness decreases below the midpoint, it has the effect of shading. Zero lightness produces black. As lightness increases above 50%, it has the effect of tinting, and full lightness produces white.

At zero saturation, lightness controls the resulting shade of gray. A value of zero still produces black, and full lightness still produces white. The midpoint value results in the "middle" shade of gray, with an RGB value of (128,128,128).

As saturation decreases, it produces tones of the reference hue that converge on a shade of gray that is determined by the lightness. This keeps the total intensity relatively constant.


Note that the physical nature of additive color prevents the scheme from working exactly except for hues halfway between the primary and secondary hues. However, the total intensity of the tones resulting from decreasing saturation are much closer than tinting alone, as in HSV.

265 questions
-1
votes
1 answer

How can I get color decorations for CSS variable references to work in VS Code?

I'm working on CSS custom properties and their modification. It seems that the best way to add/change the alpha channel to colors is to use hsl notation: :root { --green: 120deg, 100%, 50%; } .box { background: hsl(var(--green), 0.5); } The…
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
-1
votes
1 answer

CSS hsl calc bug in IE11

IE11 does not seem to calculate hsl(31, 86, calc(54% - 10%)), but all other browsers do. I want to use calc in hsl value with CSS Custom Properties(css variables). And I don't want to use SASS functions. (I use this polyfill to use css variables for…
ayame
  • 3
  • 1
-1
votes
1 answer

converting hsl to rgb in python3

I have a numpy array-an 2D numpy array of [H, S, L] for each pixel-and I want to convert these into rgb variables. There wasn't a hsl-rgb converter in matplotlib.colors and I couldn't find a converter that uses arrays as a input. So I had to make it…
김성준
  • 1
  • 3
-1
votes
1 answer

HSL to RGB conversion help needed

This may be a very stupid question but just wanted to clarify my issue. Having seen a few different algorithms for conversion between RGB & HSL, I have seen var_1 and var_2. I was just wondering what these variables actually are? I knew they'd show…
IFKCode
  • 43
  • 1
  • 5
-1
votes
2 answers

RGB to HSL, hue calculation is wrong

I'm trying to convert a RGB32 value to HSL because I want to use the Hue component. I have used some examples that I found online to create this class: public class HSLColor { public Double Hue; public Double Saturation; …
Mervin
  • 1,103
  • 4
  • 18
  • 26
-1
votes
1 answer

How to calculate HSL Histogram in C#

I want to calculate the histogram for an image in C# using the Hue, Saturation, Luminance values not the traditional RGB values. Is there any way to achieve that or not? Best regards.
-1
votes
1 answer

Can someone see why do i have an a floating point exception here?

I saw on google it was about a division by zero but i don't see where or only in the case where d = 0 and *l<=0.5 ... (line 15) It's a function for converting the RGB values of a pixel from a JPEG file, into HSL values (Hue, Saturation,…
Henley n
  • 3,593
  • 2
  • 10
  • 13
-1
votes
1 answer

How to apply saturation to photo using php gd

I want to apply saturation to photo using php gd but I only know that to do image editing. I need to: Change BGR to HSL do something which I don't know. Change the result back from HSL to BGR. Anyone know what is the logic/algorithm for step…
ATZ
  • 353
  • 2
  • 7
  • 18
-2
votes
1 answer

RGB/HEX/HSL Split 16777216 colors in basic 16 color ranges

Hello i need to know 16 basic color ranges one of these RGB or HEX or HSL. I take example as RGB. RGB split in three color mix R-red, G-green B-blue, each of the color have 256 color shades from 0 to 255 so in total is 256*256*256=16777216 colors.…
user3778390
  • 375
  • 1
  • 6
  • 16
-5
votes
1 answer

Algorithm for color picker

I'm looking to understand the basic algorithm behind a color picker like this: I'd like to implement something like this from scratch but want to understand the basic algorithm first.
Dalton Sandbothe
  • 501
  • 2
  • 7
  • 16
1 2 3
17
18