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, | + | *'''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 - | + | -- 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 | + | 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 | + | end return r+m, g+m, b+m, a |
− | |||
− | |||
end | end | ||
</source> | </source> | ||
− | This could be used, for example, like this: <code>[[love.graphics.setColor]](HSL( | + | 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
Dansk –
Deutsch –
English –
Español –
Français –
Indonesia –
Italiano –
Lietuviškai –
Magyar –
Nederlands –
Polski –
Português –
Română –
Slovenský –
Suomi –
Svenska –
Türkçe –
Česky –
Ελληνικά –
Български –
Русский –
Српски –
Українська –
עברית –
ไทย –
日本語 –
正體中文 –
简体中文 –
Tiếng Việt –
한국어
More info