javascript - 如何使用javascript根据背景颜色更改文本颜色？

Question

我想根据背景更改文本颜色，从浅色到深色。

我想做的事情如下:

[背景颜色] + -------- - 带背景的文本

因此，如果我选择背景绿色，那么“带有背景的文本”文本颜色可以使用+ -从较浅的颜色切换到较深的颜色

我使用了下面的代码。

代码

<input type="range" name="bgopacity" id="bgopacity" value="0" min="0" max="765" step="1" onchange="rangevalue.value=value">

<span class="txtcolor">Text With Background</span>

<script>
    var rval = bval = gval = 0;
    $('#bgopacity').on('change keyup mouseout keypress click mouseenter mouseup', function (value) {

        var valcnt = $(this).val();

        if (valcnt <= 255) {
            rval = valcnt;
            gval = bval = 0;
        } else if (valcnt >= 255 && valcnt <= 510) {
            rval = 255;
            gval = valcnt - rval;
            bval = 0;
        } else if (valcnt >= 510) {
            rval =  gval = 255;
            bval = valcnt - (gval + rval);
        }

        $('.txtcolor').css('color','rgb('+Math.round(rval)+','+Math.round(gval)+','+Math.round(bval)+')');
    });
</script>

这段代码工作完美，但只有一些颜色发生了变化。所以我需要在 0 到 765 之间进行更多颜色切换。

你能帮我找出相关代码吗？提前致谢。

Answer 1

如果我理解正确的话，您希望用户选择一种颜色，然后有一个 slider 允许用户使所选颜色变亮或变暗。

我建议您查看 HSL model，而不是 RGB 模型(红色、绿色和蓝色分别为 0 - 255) .

HSL 代表色调、饱和度和亮度。这个CodePen project很好地展示了 HSL 和 RGB 的区别。

• 色调是 0° - 360° 之间的 Angular (CSS 中的 deg 后缀是可选的)

  • 它定义了您正在使用的颜色。红色在 0°，绿色在 120°，蓝色在 240°，在 360° 循环回到红色。您可以在 0° 到 360° 之间选择任何美丽的色彩细微差别。

    

• 饱和度是从 0% 到 100% 的百分比(在 CSS 中带有 % 后缀)

  • 它定义了颜色的多彩程度。 100% 饱和度意味着颜色已充分发挥其潜力。 0% 饱和度只是一团悲伤、灰色的困惑。

    

• 亮度是从 0% 到 100% 的百分比(在 CSS 中带有 % 后缀)

  • 它定义颜色的亮度，以及与黑色或白色的接近程度。

    

CSS 中的 hsl() 用法与 rgb() 非常相似:

element {
    color: hsl(190, 90%, 55%);  /* this is a beautiful cyan color */
}

基本上，在 RGB 中，您必须选择每种颜色相加的数量，而在 HSL 中，您可以选择什么颜色以及如何处理它。

<小时/>

因此，在您的情况下，用户首先会选择 H(色调)部分，它定义了它的颜色。

然后您可以有一个 L(亮度) slider ，并让用户定义背景颜色的亮度。

<小时/>

这是您的任务的工作示例，但使用 HSL(我也添加了饱和度，但如果不需要，可以轻松删除):

var hue_picker = document.getElementById("hue-picker");
var sat_picker = document.getElementById("sat-picker");
var lum_picker = document.getElementById("lum-picker");
var txt = document.getElementById("txt");
var div = document.getElementById("div");

function filter_input(input, min, max) {
    return Math.max(min, Math.min(input, max))
}

function update_color() {
    // Filter out inputs that are greater than max or lesser than min
    var hue = filter_input(hue_picker.value, 0, 360);
    var sat = filter_input(sat_picker.value, 0, 100);
    var lum = filter_input(lum_picker.value, 0, 100);

    // (background has a fixed 50% luminosity)
    div.style.backgroundColor = "hsl(" + hue + ", " + sat  + "%, 50%)";
    txt.style.color = "hsl(" + hue + ", " + sat  + "%, " + lum + "%)";
    
    // Update the text to display current HSL values
    txt.innerText = "background-color: hsl(" + hue + ", " + sat  + "%, 50%);\n"
                  + "color: hsl(" + hue + ", " + sat  + "%, " + lum + "%);";
}

hue_picker.onchange = hue_picker.oninput = update_color;
sat_picker.onchange = sat_picker.oninput = update_color;
lum_picker.onchange = lum_picker.oninput = update_color;

#div {
    height: 100px;
    width: 300px;
}

#txt {
    font-family: monospace;
}

<input type="range" id="hue-picker" value="0" min="0" max="360" step="1"/>
<input type="range" id="sat-picker" value="100" min="0" max="100" step="1"/>
<input type="range" id="lum-picker" value="75" min="0" max="100" step="1"/>
<div id="div">
    <span id="txt">Text With Background</span>
</div>

希望这对您仍然相关/有用!干杯!