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
2
votes
2 answers

compare two components with their colors

i want to compare to components with their filled colors if they are equal or not i do the following algorithm , i do averaging for the rgb as following double avg1 =(comp[0].Red+comp[0].Blue+comp[0].Green)/3; double…
user690069
  • 330
  • 4
  • 13
2
votes
0 answers

hsl with alpha channel separated by a slash

I was sure that the proper way to use hsla() is something like background: hsla(0deg, 100%, 50%, 0.5); /* The same as rgba(255, 0, 0, 0.5); */ However, if I create a paragraph with background: rgba(255, 0, 0, 0.5) and shift-click that color in…
john c. j.
  • 725
  • 5
  • 28
  • 81
2
votes
1 answer

How to change hue, saturation, and luminance of an image in android

I want to change the hue for specific color on image. I have searched many times but found nothing. Currently I'm using this piece of code i get from SO for changing image hue. public static class ColorFilterGenerator { static ColorFilter…
ps_who
  • 137
  • 2
  • 9
2
votes
1 answer

Changing Bonmin options (IPOPT linear solver) within Pyomo

I am using Bonmin through Pyomo/Python, on an Windows machine. Bonmin is being using via binaries, and HSL solvers as well. I could change the default solver successfully for Bonmin but IPOPT is still using MUMPS as a linear solver. I've tried…
Gebbran
  • 21
  • 2
2
votes
1 answer

JavaFX Color vs HSL Web definitions

i implement a graphics generator and noticed something - lets call it strange? WEB: HSLA - a color standard, where color pickers 1 are available and you can even test those colors on html as background color. for example: (one) representation of…
lumo
  • 790
  • 1
  • 8
  • 23
2
votes
1 answer

How does Photoshop Camera RAW/Lightroom's Color Calibration Tool Work?

I want to try and reverse engineer the camera calibration panel in the camera raw filter in Photoshop/Lightroom. Photoshop Colour Calibration Tool It can create some pretty cool effects, so I want to write a program what will help automate these…
2
votes
1 answer

How to keep RGB and HSL integer values consistent when converting back and forth?

I have code that converts RGB values to HSL values as well as HSL to RGB. It works fine, however, I have a color picker that can work in either rgb or hsl. The problem is, that they both use integer values.. So if I convert RGB to HSL, I get…
user3591153
  • 409
  • 4
  • 14
2
votes
3 answers

RGB to HSL conversion seems OK value-vise, but not visually

a noob question here. let's say I have RGB values of: R:53,G:37 and B:11 so i set a background color of a rectangle with: [UIColor colorWithRed:0.53 green:0.37 blue:0.11 alpha:1.00]; now I do a RGB to HSL conversion that yields: H:0.10,is S:0.16…
EarlGrey
  • 2,514
  • 4
  • 34
  • 63
2
votes
1 answer

hsl() colors: individually control hue, saturation or luminosity

Is it possible today or in any upcoming standards to individually control the hue, saturation and luminosity of a hsl() colour in css? What can and cannot be done with pure CSS, and what alternative solutions might there be with jquery? Ideally,…
augustin
  • 14,373
  • 13
  • 66
  • 79
2
votes
3 answers

Why jQuery replaces hsl() with rgb()?

I wanted to add some spans dynamically with hsl background-color applied to style attribute, like this: Here is my jQuery doing this: var hues = [ 172, 178, 184, 190, 196, 202, 208…
DamianoPantani
  • 1,168
  • 2
  • 13
  • 23
2
votes
1 answer

Why does the text-shadow property change the hsla text color?

I have a header that when hovered over, changes color to be slightly clear and to have a black outline (I make with 4 text-shadows). This does not work when I use hsla() to define the color, though. The color is set to black with 100% opacity, and…
2
votes
3 answers

WebGL: Change color saturation or luminosity in fragment shader

i found this great page hls picker, and i'm wondering if there is possibility to achieve similar effect in WebGL. I'm passing to my fragment shader some color, for example #FF7400, what is the easiest way to convert it to hsl and change its…
blindepl
  • 277
  • 4
  • 14
2
votes
1 answer

Converting a JPEG from RGB to HSL in C

I'm trying to convert a JPEG from RGB into HSL. I made a read and a write function for opening the file (I use libjpeg functions) and making an ASCII draw from this pic from its HSL values (Hue, Saturation, Luminance) so I found a pseudocode for…
Henley n
  • 3,593
  • 2
  • 10
  • 13
2
votes
2 answers

jQuery - HSL color background

I've run into a strange problem with Javascript/jQuery. I need to update background color with the HSL color model using function written below: function updateColorPreviewHSV(hsv){ var hue = Math.round(hsv.getHue(), 0); var saturation =…
user3549358
  • 41
  • 1
  • 6
2
votes
1 answer

OpenCV HLS color space range

Look my code, why the second line in console is 170 10 121. H is 170, S is 10, but why L is 121. Because L must be less than 100:
blue
  • 47
  • 1
  • 1
  • 4