在javascript中更改RGB颜色的色调
Change the Hue of a RGB Color in javascript
类似于此(如何增加亮度),我想更改RGB(十六进制)颜色的色调。
假设changeHue("#FF0000", 40)
返回"#FFAA00"
这是我找到的解决方案。我希望它有用,将来可能会有所帮助。任何改进或进一步的解决方案都是非常受欢迎的。
更改色调
// Changes the RGB/HEX temporarily to a HSL-Value, modifies that value
// and changes it back to RGB/HEX.
function changeHue(rgb, degree) {
var hsl = rgbToHSL(rgb);
hsl.h += degree;
if (hsl.h > 360) {
hsl.h -= 360;
}
else if (hsl.h < 0) {
hsl.h += 360;
}
return hslToRGB(hsl);
}
// exepcts a string and returns an object
function rgbToHSL(rgb) {
// strip the leading # if it's there
rgb = rgb.replace(/^'s*#|'s*$/g, '');
// convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
if(rgb.length == 3){
rgb = rgb.replace(/(.)/g, '$1$1');
}
var r = parseInt(rgb.substr(0, 2), 16) / 255,
g = parseInt(rgb.substr(2, 2), 16) / 255,
b = parseInt(rgb.substr(4, 2), 16) / 255,
cMax = Math.max(r, g, b),
cMin = Math.min(r, g, b),
delta = cMax - cMin,
l = (cMax + cMin) / 2,
h = 0,
s = 0;
if (delta == 0) {
h = 0;
}
else if (cMax == r) {
h = 60 * (((g - b) / delta) % 6);
}
else if (cMax == g) {
h = 60 * (((b - r) / delta) + 2);
}
else {
h = 60 * (((r - g) / delta) + 4);
}
if (delta == 0) {
s = 0;
}
else {
s = (delta/(1-Math.abs(2*l - 1)))
}
return {
h: h,
s: s,
l: l
}
}
// expects an object and returns a string
function hslToRGB(hsl) {
var h = hsl.h,
s = hsl.s,
l = hsl.l,
c = (1 - Math.abs(2*l - 1)) * s,
x = c * ( 1 - Math.abs((h / 60 ) % 2 - 1 )),
m = l - c/ 2,
r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
}
else if (h < 120) {
r = x;
g = c;
b = 0;
}
else if (h < 180) {
r = 0;
g = c;
b = x;
}
else if (h < 240) {
r = 0;
g = x;
b = c;
}
else if (h < 300) {
r = x;
g = 0;
b = c;
}
else {
r = c;
g = 0;
b = x;
}
r = normalize_rgb_value(r, m);
g = normalize_rgb_value(g, m);
b = normalize_rgb_value(b, m);
return rgbToHex(r,g,b);
}
function normalize_rgb_value(color, m) {
color = Math.floor((color + m) * 255);
if (color < 0) {
color = 0;
}
return color;
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
用法
changeHue("#FF0000", 40) --> returns #ffaa00
changeHue("#D61E1E", 180) --> returns #1ed6d6
changeHue("#2244BB", -80) --> returns #21bb66
参考文献
- RGB到HSL
- HSL到RGB
- 初始十六进制到RGB转换
如果你不怕库,几个kb也不会破坏你的项目,你可以尝试sc color,而不是重新实现轮子。。。
这是一个jsfiddle使用sc颜色。代码的关键就在这里:
var c = sc_color("#FF0000").hue(40).hex6();
$("#test").css("background-color", c);
披露:我是sc color
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 用与线条相同的颜色填充多折线图上的点
- 更改使用Chart.js创建的图表中的轴线颜色
- 如何使用jquery更改html中的背景颜色
- 动态更改高图中的系列颜色
- jsf中两个字符串的颜色代码差异
- 我们如何使用css或JavaScript在i/j上更改句点(点)的颜色
- d3.hexbin插件-动态定义颜色域以适应数据
- 文本颜色的随机色调不起作用
- 颜色色调我的谷歌地图
- 使用 ASP.Net/VB.Net/jQuery 更改 PNG 的色调或颜色
- 使用颜色矩阵添加颜色色调效果
- 色调转换一串颜色
- 在javascript中更改RGB颜色的色调
- jQuery颜色动画相对于元素'当前颜色(色调、饱和度、亮度)
- 在画布上改变图像的颜色/色调的最好方法是什么?
- 根据图像主色调改变背景颜色
- 在Lab、Hcl或任何感知均匀的颜色系统中改变色调和亮度
- 随机颜色生成器与色调/饱和度和更多的控制