- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我需要一个颜色转换器来将 hsl 值转换为 rgb 值和十六进制值。我将做类似的事情 this .为此,我正在使用 jquery 和 jquery ui range slider。这是我的代码:
$(function() {
$( "#hsl_hue_range" ).slider({
min: 0,
max: 100,
value: 0,
range: false,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
var hsl_hue = ui.value;
}
});
});
$(function() {
$( "#hsl_saturation_range" ).slider({
min: 0,
max: 100,
value: 0,
range: false,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
var hsl_saturation = ui.value;
}
});
});
$(function() {
$( "#hsl_light_range" ).slider({
min: 0,
max: 100,
value: 0,
range: false,
animate:"slow",
orientation: "horizontal",
slide: function( event, ui ) {
var hsl_light = ui.value;
}
});
});
我想要这样的解决方案:
转换器的输入可以由变量给出。像 hsl_hue
hsl_saturation
hsl_light
.
有什么办法吗?
如果不行,我该怎么办?
最佳答案
新方法(灵感来自 @Kamil-Kiełczewski solution )
获取 degree, percentage, percentage
并返回 css hex
color:
function hslToHex(h, s, l) {
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}`;
}
示例:
hslToHex(360, 100, 50) // "#ff0000" -> red
获取degree, percentage, percentage
并返回css hex
color:
function hslToHex(h, s, l) {
h /= 360;
s /= 100;
l /= 100;
let r, g, b;
if (s === 0) {
r = g = b = l; // achromatic
} else {
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = x => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
示例:
hslToHex(360, 100, 50) // "#ff0000" -> red
关于javascript - 将 Hsl 转换为 rgb 和 hex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36721830/
给定 HSL 中的某种颜色(假设为 hsl(74,64%,59%)),我想计算哪种较深的阴影(具有相同的 h 和 s 值)给我足够的对比度来满足 W3C 颜色对比度要求。 有一些公式可以将 HSL 转
我正在编写一个程序,允许用户在 RGB 中选择各种前景色和背景色。我不想让他们选择太相似的前景和背景,并决定转换为 HSL 并使用 HSL 欧几里德距离作为检查相似性的一种方式。 HSL 空间是否有很
这是我当前用来更改图像的色相、饱和度和亮度的代码。我如何只改变饱和度或亮度而不添加色调?或者如何找到像素的当前色调值以便我可以使用它? public static final int MAX_
我最近一直在开发一个颜色选择器应用程序,它允许用户选择颜色的色调、饱和度和亮度。在用户决定颜色后,我会为用户提供与所选颜色相匹配的不同配色方案。给出的一些配色方案是免费的、拆分免费的、三合会的、类似的
我真的是 jquery 的新手,我正在尝试使用它,以便每次为单词闪烁生成的颜色总是不同的颜色,但无法弄清楚如何这样做。请查看下面我的代码或查看 jsfiddle。 http://jsfiddle.ne
我正在尝试为图像编写色相/饱和度/亮度滤镜(使用 C++)。 RGB->HSL 转换工作正常,但当考虑到每个像素具有不同的初始饱和度和亮度这一事实时,我的问题就来了。 对于每个像素,我计算了源 HSL
我不清楚 HSL 颜色的书写方式。 W3 有这样的: color: hsl(120, 100%, 50%); 而 ThreeJs 是这样要求它们的: h — hue value between 0.0
我还没有找到一种算法/实现可以将 rgb(0, 96, 255) 转换为 HSL 并返回,而不会以稍微不同的值结束 (rgb(0 , 98, 255))。这意味着每个人的算法都被破坏了(包括 Wolf
我有一个复杂的问题,但可以通过这个小问题解决。我想制作一个按像素工作的着色器。 我为图片定义了一个基色(图片中有一些像素具有这种颜色,还有很多其他像素接近这种颜色): Hex: #188DD9 HSL
我使用 LESS ,我想利用各种集成的 color functions 只允许设置几个基本颜色,然后派生其他改变色相,饱和度,亮度,旋转,ecc。 假设我们的着色器中有以下 2 种颜色(在本例中为浅绿
当我尝试使用 jQuery Color 进行简单的 HSL 到 RGB 转换时, $.colors('hsl(100,100%,50%)').toString('rgb'); 我注意到HSL结构中有一
我在使用 Javascript/jQuery 时遇到了一个奇怪的问题。我需要使用下面编写的函数使用 HSL 颜色模型更新背景颜色: function updateColorPreviewHSV(hsv
我正在构建一个星型可视化引擎,需要对从 API 接收到的值进行插值。 HSL 色标是: -.63, hsl: 228° 100% 80%, .165, hsl: 224° 100% 90%, .33,
我正在尝试解析 hsl 颜色字符串并从中获取十六进制颜色字符串。我尝试使用正则表达式但无法弄清楚。我的正则表达式应该如何匹配和解析 hsl 颜色字符串到色调、饱和度和值字段。输入将是以下之一; -
我发现的奇怪的事情。将 #579f2f 转换为 hsl 时,我得到了 hsl(99, 54%, 40%);。将其转换回十六进制时,我得到 #559d2f。我使用各种在线工具对此进行了测试。 我想原因是
有什么方法可以使用 hsl 只调整特定的值吗?例如,如果我只想改变饱和度或亮度并保持色调不变? .red { background-color: #ff0000; /* or, hsl(0,1
在下面显示的代码中,颜色的 hsl 色调分量具有与预期不同的值。 对于:r:255 g:168 b:177 它给出了 353 的 hsl 色调,但在其他网络工具上它产生了 354 QColor rgb
由于 HSL vals 可能会在彩虹中循环,并且在那个众所周知的色调数组 (ROYGBIV) 中有 7 种基本颜色,每个颜色之间的距离,从 0 到 360,应该是 51 或 52。那么为什么这里的颜色
我的问题与Jon P提到的问题不同在这个问题中question pointed to by Jon P并在上面标记为已经提出的问题。这个问题是要显示整个温度梯度。这道题是将单一的色调附加到单一的温度上
如果我有一个 OpenGL 纹理,并且我需要在渲染纹理之前对其执行 HSL 修改,据我所知,我需要一个着色器。问题是,我对着色器一无所知。有谁知道我需要看哪里? 我想编写一个函数,我可以在其中传递一个
我是一名优秀的程序员,十分优秀!