相关疑难解决方法(0)

这是我正在努力以编程方式使特定量的十六进制颜色变亮或变暗的功能.只需输入一个字符串就像"3F6D2A"color(col)和一个base10整数(amt)一样,可以减轻或变暗.要变暗,传入负数(即-20).

我这样做的原因是因为我发现的所有解决方案,到目前为止,它们似乎使问题过于复杂.而且我觉得只需几行代码即可完成.如果您发现任何问题,请告诉我,或者进行任何调整以使其加速.

function LightenDarkenColor(col,amt) {
    col = parseInt(col,16);
    return (((col & 0x0000FF) + amt) | ((((col>> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

对于开发使用,这里是一个更容易阅读的版本:

function LightenDarkenColor(col,amt) {
    var num = parseInt(col,16);
    var r = (num >> 16) + amt;
    var b = ((num >> 8) & 0x00FF) + amt;
    var g = (num & 0x0000FF) + amt;
    var newColor = g | (b << 8) …

我正在寻找某种公式或算法来确定给定RGB值的颜色的亮度.我知道它不能像将RGB值一起添加并且具有更高的总和更简单一样简单,但我有点不知道从哪里开始.

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么？

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

例

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

(演示)

非目标

• 动画.
• 非CSS过滤器解决方案.
• 从黑色以外的颜色开始.
• 关心黑色以外的颜色会发生什么.

结果到目前为止

• 强力搜索固定过滤器列表的参数:https
  ://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).

• 使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励

• 一个drop-shadow解决方案: /sf/answers/3077189741/
  缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

• 如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

  Run Code Online (Sandbox Code Playgroud)

有没有人知道,用于计算十六进制值的互补色的Javascript解决方案？

网上有很多颜色挑选套件和调色板生成器,但我还没有看到任何使用JS计算颜色的颜色.

非常感谢详细的提示或片段.

我需要准确地将HSB转换为RGB,但我不知道如何解决将小数转换为整数而不进行舍入的问题.这是我在colorpicker库中使用的当前函数:

HSBToRGB = function (hsb) {

    var rgb = { };
    var h = Math.round(hsb.h);
    var s = Math.round(hsb.s * 255 / 100);
    var v = Math.round(hsb.b * 255 / 100);

        if (s == 0) {

        rgb.r = rgb.g = rgb.b = v;
        } else {
        var t1 = v;
        var t2 = (255 - s) * v / 255;
        var t3 = (t1 - t2) * (h % 60) / 60;

            if (h == 360) h = 0;

                if …

我正在创建一个拾色器工具,对于HSL滑块,我需要能够将RGB转换为HSL.当我搜索SO以进行转换的方法时,我发现这个问题HSL到RGB颜色转换.

虽然它提供了从RGB转换到HSL的功能,但我没有看到计算中实际发生的事情的解释.为了更好地理解它,我在维基百科上阅读了HSL和HSV.

后来,我使用"HSL和HSV"页面中的计算重写了"HSL到RGB颜色转换"的功能.

如果R是最大值,我会坚持计算色调.请参阅"HSL和HSV"页面中的计算:

这是来自荷兰语的另一个维基页面:

这是从"HSL到RGB颜色转换" 的答案:

case r: h = (g - b) / d + (g < b ? 6 : 0); break; // d = max-min = c

我已经用几个RGB值测试了所有三个,它们似乎产生了类似的(如果不是精确的)结果.我想知道的是他们表演同样的事情吗？对于某些特定的RGB值,我会得到不同的结果吗？我应该使用哪一个？

hue = (g - b) / c;                   // dutch wiki
hue = ((g - b) / c) % 6;             // eng wiki
hue = (g - b) / c + (g < b ? 6 : 0); // SO answer …

我在 Chrome 中设置 HTML 5 日期输入的样式时遇到了一些困难。

使用诸如 的标记 <input type="date" max="2020-06-03" value="2020-06-01">，在 CSS 中使用一些背景和字体颜色样式，在 Chrome 中呈现为：

我想将右侧的日历图标设为白色，以便与文本的颜色相匹配。

::-webkit-calendar-picker-indicator看起来像是一个可能的候选人。在此设置背景颜色会更改图标后面的颜色（如预期）。但是我找不到任何对图标颜色本身有影响的参数。

我一直在编写一个图像处理程序,它通过HTML5画布像素处理来应用效果.我已经实现了Thresholding,Vintaging和ColorGradient像素操作,但令人难以置信的是我无法改变图像的对比度!我已经尝试了多种解决方案但是我总是在图片中获得太多的亮度并且对比效果较少而且我不打算使用任何Javascript库,因为我试图在本地实现这些效果.

基本像素操作代码:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
data[i] = data[i];
data[i+1] = data[i+1];
data[i+2] = data[i+2];
}

像素操作示例

值处于RGB模式,这意味着data [i]是红色.所以如果data [i] = data [i]*2; 对于该像素的红色通道,亮度将增加到两倍.例:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
 //Increases brightness of RGB channel by 2
data[i] = data[i]*2;
data[i+1] = data[i+1]*2; …

有没有人知道javascript中将RGB颜色转换为HSV颜色格式的函数？

(或jQuery)

我可以使用以下代码将RGB值转换为HSV ...

 $r = $r/255;
 $g = $g/255;
 $b = $b/255;

 $h = 0;
 $s = 0;
 $v = 0;

 $min = min(min($r, $g),$b);
 $max = max(max($r, $g),$b);

 $r = $max-$min;
 $v = $max;


 if($r == 0){
  $h = 0;
  $s = 0;
 }
 else {
  $s = $r / $max;

  $hr = ((($max - $r) / 6) + ($r / 2)) / $r;
  $hg = ((($max - $g) / 6) + ($r / 2)) / $r; …