我正在寻找一种将HSL颜色转换为RGB的算法。
据我所知，HSL并不是非常常用的颜色表示方式，因此我在搜索转换器时没有太多的运气。
HSL转RGB颜色转换
245
- hhafez
10
3刚刚注意到 less.js 项目有许多颜色处理函数，包括 hsl_to_rgb：http://github.com/cloudhead/less.js/blob/master/lib/less/functions.js - dmkc
1在浏览器端 - d3.js 有很好的 API 来实现这个功能：
https://github.com/mbostock/d3/wiki/Colors - matanster
5尽管在https://stackoverflow.com/help/on-topic中明确指出算法是“主题内”的，但我的问题被标记为“脱离主题”--怎么回事？ - Lee Goddard
5这是我在这个网站上见过的最糟糕的关闭投票，这话可不是说说而已！我是第一个投票重新开放的人。 - Theodore R. Smith
2我十年前问过这个问题，惊讶地发现添加了php和python标签。现在我改回原来的措辞 :) - hhafez
显示剩余5条评论
25个回答
2
我从Brandon Mathis的HSL Picker源代码中得到了这个。
它最初是用CoffeeScript编写的。我使用在线转换器将其转换为JavaScript，并删除了验证用户输入是否为有效RGB值的机制。对于我的用例，这个答案起作用了，因为我发现在这篇文章中最受欢迎的答案没有产生有效的HSL值。
请注意，它返回一个
它最初是用CoffeeScript编写的。我使用在线转换器将其转换为JavaScript，并删除了验证用户输入是否为有效RGB值的机制。对于我的用例，这个答案起作用了，因为我发现在这篇文章中最受欢迎的答案没有产生有效的HSL值。
请注意，它返回一个
hsla值，其中a表示不透明度/透明度。0完全透明，而1完全不透明。function rgbToHsl(rgb) {
var a, add, b, diff, g, h, hue, l, lum, max, min, r, s, sat;
r = parseFloat(rgb[0]) / 255;
g = parseFloat(rgb[1]) / 255;
b = parseFloat(rgb[2]) / 255;
max = Math.max(r, g, b);
min = Math.min(r, g, b);
diff = max - min;
add = max + min;
hue = min === max ? 0 : r === max ? ((60 * (g - b) / diff) + 360) % 360 : g === max ? (60 * (b - r) / diff) + 120 : (60 * (r - g) / diff) + 240;
lum = 0.5 * add;
sat = lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);
h = Math.round(hue);
s = Math.round(sat * 100);
l = Math.round(lum * 100);
a = parseFloat(rgb[3]) || 1;
return [h, s, l, a];
}
- ernbrn
2
我以此为基础编写了一个Python方法。谢谢。 - JayJay123
这不是海湾色到RGB的转换，正如张贴者所询问的那样。 - bryc
2
这是修改过的JavaScript函数，它输出的色调在0-360度之间。
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d ; break;
case g: h = 2 + ( (b - r) / d); break;
case b: h = 4 + ( (r - g) / d); break;
}
h*=60;
if (h < 0) h +=360;
}
return([h, s, l]);
}
alert(rgbToHsl(125,115,145));
- zeros-and-ones
2
使用Typescript将HSL转换为RGB
以上所有选项在我的TS代码中都不能正常工作。
我调整了其中的一个选项，现在它完美地工作了：
type HslType = { h: number; s: number; l: number }
const hslToRgb = (hsl: HslType): RgbType => {
let { h, s, l } = hsl
// IMPORTANT if s and l between 0,1 remove the next two lines:
s /= 100
l /= 100
const k = (n: number) => (n + h / 30) % 12
const a = s * Math.min(l, 1 - l)
const f = (n: number) =>
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
return {
r: Math.round(255 * f(0)),
g: Math.round(255 * f(8)),
b: Math.round(255 * f(4)),
}
}
- Bru Mas Ribera
2
在JavaScript中设置的hsl|a颜色值将立即转换为rgb|a。然后，您只需要访问计算出的样式值。
document.body.style.color = 'hsla(44, 100%, 50%, 0.8)';
console.log(window.getComputedStyle(document.body).color);
// displays: rgba(255, 187, 0, 0.8)
从技术上讲，我想这甚至不算是任何一行代码 - 它只是自动完成的。因此，根据您的环境，您可能只需要这个就可以了。并不是说这里没有很多非常周到的回答。我不知道您的目标是什么。
现在，如果您想从rbg|a转换为hsl|a怎么办？
- stoke motor
1
所有说 Garry Tan 的解决方案从 RGB 转换到 HSL 再转回来有误的人都是对的。这是因为他在代码中省略了数字的小数部分。我纠正了他的代码（JavaScript）。很抱歉链接是俄语，但英文版不存在 - HSL-wiki。
function toHsl(r, g, b)
{
r /= 255.0;
g /= 255.0;
b /= 255.0;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h, s, l = (max + min) / 2.0;
if(max == min)
{
h = s = 0;
}
else
{
var d = max - min;
s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));
if(max == r && g >= b)
{
h = 1.0472 * (g - b) / d ;
}
else if(max == r && g < b)
{
h = 1.0472 * (g - b) / d + 6.2832;
}
else if(max == g)
{
h = 1.0472 * (b - r) / d + 2.0944;
}
else if(max == b)
{
h = 1.0472 * (r - g) / d + 4.1888;
}
}
return {
str: 'hsl(' + parseInt(h / 6.2832 * 360.0 + 0.5) + ',' + parseInt(s * 100.0 + 0.5) + '%,' + parseInt(l * 100.0 + 0.5) + '%)',
obj: { h: parseInt(h / 6.2832 * 360.0 + 0.5), s: parseInt(s * 100.0 + 0.5), l: parseInt(l * 100.0 + 0.5) }
};
};
- 0x000f
1
Mohsen的回答中的Unity3D C#代码。
这是Mohsen在C#中特定用于Unity3D的答案中的代码。它是从Alec Thilenius上面给出的C#答案进行改编的。
using UnityEngine;
using System.Collections;
public class ColorTools {
/// <summary>
/// Converts an HSL color value to RGB.
/// Input: Vector4 ( X: [0.0, 1.0], Y: [0.0, 1.0], Z: [0.0, 1.0], W: [0.0, 1.0] )**strong text**
/// Output: Color ( R: [0.0, 1.0], G: [0.0, 1.0], B: [0.0, 1.0], A: [0.0, 1.0] )
/// </summary>
/// <param name="hsl">Vector4 defining X = h, Y = s, Z = l, W = a. Ranges [0, 1.0]</param>
/// <returns>RGBA Color. Ranges [0.0, 1.0]</returns>
public static Color HslToRgba(Vector4 hsl)
{
float r, g, b;
if (hsl.y == 0.0f)
r = g = b = hsl.z;
else
{
var q = hsl.z < 0.5f ? hsl.z * (1.0f + hsl.y) : hsl.z + hsl.y - hsl.z * hsl.y;
var p = 2.0f * hsl.z - q;
r = HueToRgb(p, q, hsl.x + 1.0f / 3.0f);
g = HueToRgb(p, q, hsl.x);
b = HueToRgb(p, q, hsl.x - 1.0f / 3.0f);
}
return new Color(r, g, b, hsl.w);
}
// Helper for HslToRgba
private static float HueToRgb(float p, float q, float t)
{
if (t < 0.0f) t += 1.0f;
if (t > 1.0f) t -= 1.0f;
if (t < 1.0f / 6.0f) return p + (q - p) * 6.0f * t;
if (t < 1.0f / 2.0f) return q;
if (t < 2.0f / 3.0f) return p + (q - p) * (2.0f / 3.0f - t) * 6.0f;
return p;
}
/// <summary>
/// Converts an RGB color value to HSL.
/// Input: Color ( R: [0.0, 1.0], G: [0.0, 1.0], B: [0.0, 1.0], A: [0.0, 1.0] )
/// Output: Vector4 ( X: [0.0, 1.0], Y: [0.0, 1.0], Z: [0.0, 1.0], W: [0.0, 1.0] )
/// </summary>
/// <param name="rgba"></param>
/// <returns></returns>
public static Vector4 RgbaToHsl(Color rgba)
{
float max = (rgba.r > rgba.g && rgba.r > rgba.b) ? rgba.r :
(rgba.g > rgba.b) ? rgba.g : rgba.b;
float min = (rgba.r < rgba.g && rgba.r < rgba.b) ? rgba.r :
(rgba.g < rgba.b) ? rgba.g : rgba.b;
float h, s, l;
h = s = l = (max + min) / 2.0f;
if (max == min)
h = s = 0.0f;
else
{
float d = max - min;
s = (l > 0.5f) ? d / (2.0f - max - min) : d / (max + min);
if (rgba.r > rgba.g && rgba.r > rgba.b)
h = (rgba.g - rgba.b) / d + (rgba.g < rgba.b ? 6.0f : 0.0f);
else if (rgba.g > rgba.b)
h = (rgba.b - rgba.r) / d + 2.0f;
else
h = (rgba.r - rgba.g) / d + 4.0f;
h /= 6.0f;
}
return new Vector4(h, s, l, rgba.a);
}
}
- James Allen
1
这是一个使用C++实现的代码，性能可能比@Mohsen的代码更好。它使用[0-6]范围表示色调，避免了除以6和乘以6的操作。S和L的范围是[0,1]。
void fromRGBtoHSL(float rgb[], float hsl[])
{
const float maxRGB = max(rgb[0], max(rgb[1], rgb[2]));
const float minRGB = min(rgb[0], min(rgb[1], rgb[2]));
const float delta2 = maxRGB + minRGB;
hsl[2] = delta2 * 0.5f;
const float delta = maxRGB - minRGB;
if (delta < FLT_MIN)
hsl[0] = hsl[1] = 0.0f;
else
{
hsl[1] = delta / (hsl[2] > 0.5f ? 2.0f - delta2 : delta2);
if (rgb[0] >= maxRGB)
{
hsl[0] = (rgb[1] - rgb[2]) / delta;
if (hsl[0] < 0.0f)
hsl[0] += 6.0f;
}
else if (rgb[1] >= maxRGB)
hsl[0] = 2.0f + (rgb[2] - rgb[0]) / delta;
else
hsl[0] = 4.0f + (rgb[0] - rgb[1]) / delta;
}
}
void fromHSLtoRGB(const float hsl[], float rgb[])
{
if(hsl[1] < FLT_MIN)
rgb[0] = rgb[1] = rgb[2] = hsl[2];
else if(hsl[2] < FLT_MIN)
rgb[0] = rgb[1] = rgb[2] = 0.0f;
else
{
const float q = hsl[2] < 0.5f ? hsl[2] * (1.0f + hsl[1]) : hsl[2] + hsl[1] - hsl[2] * hsl[1];
const float p = 2.0f * hsl[2] - q;
float t[] = {hsl[0] + 2.0f, hsl[0], hsl[0] - 2.0f};
for(int i=0; i<3; ++i)
{
if(t[i] < 0.0f)
t[i] += 6.0f;
else if(t[i] > 6.0f)
t[i] -= 6.0f;
if(t[i] < 1.0f)
rgb[i] = p + (q - p) * t[i];
else if(t[i] < 3.0f)
rgb[i] = q;
else if(t[i] < 4.0f)
rgb[i] = p + (q - p) * (4.0f - t[i]);
else
rgb[i] = p;
}
}
}
- Adriel Jr
1
当您需要RGB到HSV或HSV到RGB的转换时，请使用以下内容：
function rgbToHsv(r, g, b)
{
r /= 255, g /= 255, b /= 255;
var min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h = 0, s = 0, v = max;
if (min != max)
{
s = (delta / max);
switch (max)
{
case r: h = (g - b) / delta + (g < b ? 6 : 0); break;
case g: h = (b - r) / delta + 2; break;
case b: h = (r - g) / delta + 4; break;
}
h /= 6;
}
return [h, s, v];
}
function hsvToRgb(h, s, v)
{
var step = h / (1 / 6),
pos = step - Math.floor(step), // the hue position within the current step
m = (Math.floor(step) % 2) ? (1 - pos) * v : pos * v, // mix color value adjusted to the brightness(v)
max = 1 * v,
min = (1 - s) * v,
med = m + ((1 - s) * (v - m)),
r, g, b;
switch (Math.floor(step))
{
case 0:
r = max;
g = med;
b = min;
break;
case 1:
r = med;
g = max;
b = min;
break;
case 2:
r = min;
g = max;
b = med;
break;
case 3:
r = min;
g = med;
b = max;
break;
case 4:
r = med;
g = min;
b = max;
break;
case 5:
r = max;
g = min;
b = med;
break;
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
- Erik
1
Java版本：
/*
Converts color from HSL/A format to RGB/A format
0 <= h <= 360
0 <= s, l, a <= 1
Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#:~:text=%5Bedit%5D-,HSL%20to%20RGB%5Bedit%5D,-Given%20a%20color
*/
public RGB toRGB(double h, double s, double l, Double a) {
double c = (1 - Math.abs(2 * l - 1)) * s;
double x = c * (1 - Math.abs((h / 60) % 2 - 1));
double m = l - c / 2;
int[] RGBTag = Arrays.stream(getRGBTag(c, x)).mapToInt(e -> (int)Math.round((e + m) * 255)).toArray();
return RGB(RGBTag[0], RGBTag[1], RGBTag[2], a);
}
private double[] getRGBTag(double c, double x) {
if (h < 60) {
return new double[] {c, x, 0};
} else if (h < 120) {
return new double[] {x, c, 0};
} else if (h < 180) {
return new double[] {0, c, x};
} else if (h < 240) {
return new double[] {0, x, c};
} else if (h < 300) {
return new double[] {x, 0, c};
}
return new double[] {c, 0, x};
}
- Gal Toubul
1
我修改了@moshen的答案，在Python中使用了numpy向量化。结果比使用colorsys.hsl_to_rgb对图像进行两次for循环快了几百倍。
import time
def hue_to_rgb(p, q, t):
t = t % 1.0
condlist = [t < 1/6, t < 1/2, t < 2/3]
choicelist = [p + (q - p) * 6 * t, q, p + (q - p) * (2/3 - t) * 6]
return np.select(condlist, choicelist, p)
def fast_hls_to_rgb(hls):
h = hls[..., 0]
l = hls[..., 1]
s = hls[..., 2]
q = np.where(l < 0.5, l * (1 + s), l + s - l * s)
p = 2 * l - q
return np.stack((hue_to_rgb(p, q, h + 1/3), hue_to_rgb(p, q, h), hue_to_rgb(p, q, h - 1/3)), axis=-1)
hls = np.empty((image_shape, 3))
hls[..., 0] = hue
hls[..., 1] = lightness
hls[..., 2] = saturation
# compute the rgb using colorssys and report the time required
start = time.perf_counter()
rgb = np.empty((*image_shape, 3))
for i in range(image_shape[0]):
for j in range(image_shape[1]):
rgb[i, j] = colorsys.hls_to_rgb(hls[i, j, 0], hls[i, j, 1], hls[i, j, 2])
end = time.perf_counter()
print(end - start)
# compute the rgb using fast_hsl_to_rgb and report the time required
start = time.perf_counter()
rgb = fast_hls_to_rgb(hls)
end = time.perf_counter()
print(end - start)
plt.figure(figsize=(18, 18))
plt.imshow(rgb)
plt.axis('off')
plt.show()
输出结果为（针对815 x 1024大小的图像）：
1.1594520434737206 # time taken to convert with for loops
0.06863640993833542 # time taken to convert with np vectorized
- ahagen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接