HomeQuestionBlogAboutMessageToolbox
English

通过百分比动态地将颜色更改为较亮或较深的CSS（JavaScript）

Tom凯2020-03-23

我们在网站上有一个庞大的应用程序，并且我们有一些链接，比如说蓝色，就像该网站上的蓝色链接。现在，我想建立其他一些链接，但颜色要浅一些。显然，我可以简单地通过在CSS文件中添加十六进制代码来完成操作，但是我们的网站允许用户确定其自定义配置文件/网站（例如Twitter）所需的颜色。

所以，我的问题是：我们可以按百分比减少颜色吗？

假设以下代码是CSS：

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

要么

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

有没有一种方法可以减少一定百分比的颜色？

村村2020/03/23 16:06:38

您可以使用JavaScript库（例如JXtension），该库使用户能够使颜色变浅或变深。如果您想查找此全新库的文档，请单击此处。您还可以使用JXtension将一种颜色与另一种颜色组合。

AAEva2020/03/23 16:06:38

请参阅我对Ctford的回复的评论。

我认为减轻颜色的简单方法是采用每个RGB分量，将其加到0xff并除以2。如果不能得到所需的确切结果，则取0xff减去当前值乘以某个常数。然后再添加回当前值。例如，如果要向白色方向移动1/3，则取（0xff-电流）/ 3 +电流。

您必须使用它来查看获得了什么结果。我担心使用这个简单的公式，足够大的系数可以使深色很好地褪色，可能会使浅色完全变成白色，而如果足够小的系数可以使浅色仅稍微变浅，则可能会使深色不足。

不过，我认为，比起固定的步数，到白色的距离要小得多。

GilTom2020/03/23 16:06:38

综上所述，一个纯粹用DIV和CSS完成的表格解决方案，尝试一下；）浏览器应该支持RGBA颜色。

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>
蛋蛋猿2020/03/23 16:06:38

我知道已经晚了，但是，您可以对按钮使用包装器并更改rgba颜色功能的不透明度级别，如其他答案所述，但没有明确的示例。

这是一支笔：

https://codepen.io/aronkof/pen/WzGmjR

#wrapper {
  width: 50vw;
  height: 50vh;
  background-color: #AAA;
  margin: 20px auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
} 

.btn-wrap {
  background-color: #000;
  display: inline-block;
}

button {
  transition: all 0.6s linear;
  background-color: rgba(0, 255, 0, 1);
  border: none;
  outline: none;
  color: #fff;
  padding: 50px;
  font-weight: 700;
  font-size: 2em;
}

button:hover {
  background-color: rgba(0, 255, 0, .5);
}
<div id="wrapper">
  <div class="btn-wrap">
    <button class="btn">HEY!</buutton>
  </div>
</div>

小哥十三2020/03/23 16:06:38

尝试：

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}
卡卡西Near2020/03/23 16:06:38

如果需要蛮力以使其与旧版浏览器兼容，则可以使用Colllor自动选择相似的颜色变化。

示例（颜色：＃a9dbb4）：

在此处输入图片说明

小卤蛋A2020/03/23 16:06:38

不直接，不。但是您可以使用一个网站，例如colorschemedesigner.com，它将为您提供基础色，然后为您提供不同范围的基础色的十六进制和rgb代码。

找到适合自己网站的配色方案后，我将颜色的十六进制代码放入样式表顶部的注释部分内，并命名为它们。

其他一些配色方案生成器包括：

米亚2020/03/23 16:06:37

如果你决定使用http://compass-style.org/，基于SASS-CSS框架，它提供了非常有用的darken()和lighten()青菜功能动态生成CSS。这很干净：

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

产生

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}
达蒙Gil2020/03/23 16:06:37

这是一个古老的问题，但是大多数答案都需要使用预处理器或JavaScript进行操作，否则它们不仅会影响元素的颜色，而且还会影响其中包含的元素的颜色。我将添加一种复杂的纯CSS方法来执行相同的操作。也许将来，随着更高级的CSS功能的出现，它将变得更加容易。

这个想法是基于使用：

  • RGB颜色，因此红色，绿色和蓝色具有单独的值；
  • CSS变量，用于存储颜色值和暗度；和
  • 该calc功能，以应用更改。

默认情况下，暗度将为1（对于100％，是常规颜色），如果乘以0到1之间的数字，则会使颜色变暗。例如，如果您将每个值乘以0.85，则将使颜色变深15％（100％-15％= 85％= 0.85）。

这是一个示例，我创建了三个类：.dark，.darker和.darkest，这将分别使原始颜色变深25％，50％和75％：

html {
  --clarity: 1;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 20px;
  background: rgba(
                  calc(var(--r) * var(--clarity)), 
                  calc(var(--g) * var(--clarity)), 
                  calc(var(--b) * var(--clarity))
                );
}

.dark    { --clarity: 0.75; }
.darker  { --clarity: 0.50; }
.darkest { --clarity: 0.25; }

.red {
  --r: 255;
  --g: 0;
  --b: 0;
}

.purple {
  --r: 205;
  --g: 30;
  --b: 205;
}
<div class="red">0%</div>
<div class="red dark">25%</div>
<div class="red darker">50%</div>
<div class="red darkest">75%</div>

<br/><br/>

<div class="purple">0%</div>
<div class="purple dark">25%</div>
<div class="purple darker">50%</div>
<div class="purple darkest">75%</div>

小胖Gil2020/03/23 16:06:37

如果您想要深色，可以使用rgba不透明度较低的黑色：

rgba(0,0,0,0.3)

打火机使用白色：

rgba(255,255,255,0.3).
蛋蛋2020/03/23 16:06:37

您可以在所有现代浏览器中使用CSS过滤器执行此操作（请参见caniuse兼容性表）。

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}
<button class="button">Foo lorem ipsum</button>

从CSS Tricks可获得更多有关您可以使用的各种过滤器的信息：https : //css-tricks.com/almanac/properties/f/filter/

古一2020/03/23 16:06:37

HSL颜色提供了答案，HSL颜色值指定为：hsl（hue [0,255]，饱和度％，亮度％）。

IE9 +，Firefox，Chrome，Safari和Opera 10+支持HSL。

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}
小小2020/03/23 16:06:37

如果使用的堆栈可以使用SASS，则可以使用以下lighten函数：

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}
Mandy村村2020/03/23 16:06:37

在撰写本文时，这是我发现的用于色彩处理的最佳纯CSS实现：

使用CSS变量以HSL（而不是HEX / RGB格式）定义颜色，然后用于calc()操作它们。

这是一个基本示例：

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}
<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

我还创建了一个CSS框架（仍处于早期阶段），以提供称为root-variables的基本CSS变量支持。

乐2020/03/23 16:06:37

在LESS中，您将使用以下变量：

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

这将采用第一个变量并将其减少20％（或任何其他百分比）。在此示例中，您最终将得到较浅的颜色：#ccc

Gil伽罗小宇宙2020/03/23 16:06:37

存在“不透明”，它将使背景发光：

opacity: 0.5;

但我不确定这是您的意思。定义“减少颜色”：使透明？还是加白？

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox