Difference between revisions of "HSL color"

m (included link to other languages)
m (Color range from 0 - 255 to 0 - 1)
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
The [https://secure.wikimedia.org/wikipedia/en/wiki/HSL_and_HSV HSL color space] is based on how humans perceive color, and as such, makes various aesthetically-pleasing color transformations very simple.
+
The [https://secure.wikimedia.org/wikipedia/en/wiki/HSL_and_HSV HSL color space] is based on how humans perceive color, and as such, makes various aesthetically-pleasing color transformations very simple. Instead of saying how much light a monitor will emit (not a very natural way to think about colors), colors are described in terms of Hue, Saturation, and Lightness.
  
*'''Hue''' describes where in the spectrum the color is. As Hue increases, a color will transition in the following order: Red, orange, yellow, green, teal, blue, violet, purple, magenta, red.
+
*'''Hue''' describes where in the spectrum the color is. As Hue increases, a color will transition in the following order: Red, orange, yellow, green, cyan, blue, violet, purple, magenta, red.
 
*'''Saturation''' denotes how vibrant a color is. Ranges from grey to pure color.
 
*'''Saturation''' denotes how vibrant a color is. Ranges from grey to pure color.
 
*'''Lightness''' is how light or dark a color is. Ranges from black to white. In the middle is either grey (if low saturation) or a color (if high saturation).
 
*'''Lightness''' is how light or dark a color is. Ranges from black to white. In the middle is either grey (if low saturation) or a color (if high saturation).
Line 7: Line 7:
 
Here is a function [[User:Taehl|Taehl]] wrote to convert HSL colors to RGB:
 
Here is a function [[User:Taehl|Taehl]] wrote to convert HSL colors to RGB:
 
<source lang="lua">
 
<source lang="lua">
-- Converts HSL to RGB. (input and output range: 0 - 255)
+
-- Converts HSL to RGB. (input and output range: 0 - 1)
function HSL(h, s, l)
+
function HSL(h, s, l, a)
if s <= 0 then return l,l,l end
+
if s<=0 then return l,l,l,a end
h, s, l = h/256*6, s/255, l/255
+
h, s, l = h*6, s, l
 
local c = (1-math.abs(2*l-1))*s
 
local c = (1-math.abs(2*l-1))*s
 
local x = (1-math.abs(h%2-1))*c
 
local x = (1-math.abs(h%2-1))*c
Line 20: Line 20:
 
elseif h < 5 then r,g,b = x,0,c
 
elseif h < 5 then r,g,b = x,0,c
 
else              r,g,b = c,0,x
 
else              r,g,b = c,0,x
end return math.ceil((r+m)*256),
+
end return r+m, g+m, b+m, a
          math.ceil((g+m)*256),
 
          math.ceil((b+m)*256)
 
 
end
 
end
 
</source>
 
</source>
  
This could be used, for example, like this: <code>[[love.graphics.setColor]](HSL(150,100,200))</code> (this would color things a greyish blue)
+
This could be used, for example, like this: <code>[[love.graphics.setColor]](HSL(0.59,0.39,0.78))</code> (this would color things a greyish blue)
  
 
[[Category:Snippets]]
 
[[Category:Snippets]]
 
+
{{#set:Author=User:Taehl}}
 +
{{#set:LOVE Version=any}}
 +
{{#set:Description=An alternate colorspace, allowing for aesthetically-pleasing color transformations.}}
 
== Other Languages ==
 
== Other Languages ==
 
{{i18n|HSL color}}
 
{{i18n|HSL color}}

Latest revision as of 18:24, 2 March 2022

The HSL color space is based on how humans perceive color, and as such, makes various aesthetically-pleasing color transformations very simple. Instead of saying how much light a monitor will emit (not a very natural way to think about colors), colors are described in terms of Hue, Saturation, and Lightness.

  • Hue describes where in the spectrum the color is. As Hue increases, a color will transition in the following order: Red, orange, yellow, green, cyan, blue, violet, purple, magenta, red.
  • Saturation denotes how vibrant a color is. Ranges from grey to pure color.
  • Lightness is how light or dark a color is. Ranges from black to white. In the middle is either grey (if low saturation) or a color (if high saturation).

Here is a function Taehl wrote to convert HSL colors to RGB:

-- Converts HSL to RGB. (input and output range: 0 - 1)
function HSL(h, s, l, a)
	if s<=0 then return l,l,l,a end
	h, s, l = h*6, s, l
	local c = (1-math.abs(2*l-1))*s
	local x = (1-math.abs(h%2-1))*c
	local m,r,g,b = (l-.5*c), 0,0,0
	if h < 1     then r,g,b = c,x,0
	elseif h < 2 then r,g,b = x,c,0
	elseif h < 3 then r,g,b = 0,c,x
	elseif h < 4 then r,g,b = 0,x,c
	elseif h < 5 then r,g,b = x,0,c
	else              r,g,b = c,0,x
	end return r+m, g+m, b+m, a
end

This could be used, for example, like this: love.graphics.setColor(HSL(0.59,0.39,0.78)) (this would color things a greyish blue)


Other Languages