按百分比CSS（Javascript）动态将颜色更改为更亮或更暗

Question

我们在网站上有一个很大的应用程序，我们有一些链接，比如说这个网站上的蓝色链接就是蓝色。现在我想做一些其他的链接，但颜色较浅。显然我只能通过添加CSS文件中的十六进制代码来做，但我们的网站允许用户决定他们想要什么颜色的自定义配置文件/网站（如Twitter）。

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

假设以下代码是CSS：

a {
  color: blue;
}

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

OR

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

有没有办法将颜色减少百分比？

Answer 1

现在，您可以使用CSS过滤器执行此操作。支持是跨浏览器，但随着规范继续实施和清理，这将非常方便。

＆＃13;

＆＃13;

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

＆＃13;

<button class="button">Foo lorem ipsum</button>

＆＃13;

＆＃13;

＆＃13;

以下是您可以使用的各种过滤器的阅读材料：http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318

更新

随着过滤器进入主流，这似乎越来越受欢迎。这是当前的兼容性：http://caniuse.com/#feat=css-filters

Answer 2

如果您使用的堆栈允许您使用SASS，则可以使用lighten功能：

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

Answer 3

有“不透明” 这将使背景闪耀：

opacity: 0.5;

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

Answer 4

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

IE9 +，Firefox，Chrome，Safari和Opera 10 +

支持HSL

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

Answer 5

使用filter纯CSS属性。有关filter属性函数的完整说明，请阅读this awesome article。

我遇到了与您相同的问题，并通过使用brightness属性的filter函数来解决此问题：

.my-class {
  background-color: #18d176;
  filter: brightness(90%);
}

Answer 6

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

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

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

Answer 7

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

rgba(0,0,0,0.3)

浅用白色：

rgba(255,255,255,0.3).

Answer 8

据我所知，你无法在CSS中做到这一点。

但我认为，根据您的建议，可以轻松实现一点服务器端逻辑。 CSS样式表通常是静态资产，但没有理由不能通过服务器端代码动态生成它们。您的服务器端脚本将：

1. 检查URL参数以确定用户，从而确定用户选择的颜色。使用URL参数而不是会话变量，以便您仍然可以缓存CSS。
2. 将颜色分解为红色，绿色和蓝色组件
3. 将三个组件中的每一个增加一定量。试验一下，以获得您所追求的结果。
4. 生成包含新颜色的CSS

此CSS生成页面的链接如下所示：

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

如果您不使用.css扩展名，请务必正确设置MIME类型，以便浏览器知道将该文件解释为CSS。

（请注意，要使颜色变浅，您必须提高每个RGB值）

Answer 9

如果您决定使用基于sass的css框架http://compass-style.org/，它会提供非常有用的darken()和lighten() sass函数来动态生成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;
}

Answer 10

您可以使用一些小的javascript来使用rgb（）来计算更暗和更浅的颜色。

Fiddle：不太好，但只是为了说明。

它本质上做的是设置一种颜色，并选择20种颜色相同（相互比较）的rgb只相隔10种颜色。

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

Answer 11

在撰写本文时，这是我发现的用于色彩处理的最佳纯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) + 40), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 40), 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变量支持。

Answer 12

一个简单的答案是在颜色上使用50％透明的白色PNG：

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

其中lighten.png是白色填充的PNG，透明度为50％。

Answer 13

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

一旦找到我的网站的配色方案，我就会将颜色的十六进制代码放在我的样式表顶部的注释部分中。

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

• http://www.colorschemer.com/online.html
• http://colorschemegenerator.com/
• http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

Answer 14

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

该想法基于以下用途：

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

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

在此示例中，我创建了三个类：.dark，.darker和.darkest，它们将使原始颜色分别变深25％，50％和75％：< / p>

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>

Answer 15

你可以使用RGBa（'a'是alpha透明度），但它还没有被广泛支持。但将，所以你现在可以使用它并添加一个后备：

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

Answer 16

尝试：

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

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

Answer 17

我知道现在已经很晚了，你可以使用你的按钮包装并改变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>

Answer 18

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

我认为减轻颜色的简单方法是获取每个RGB组件，添加到0xff并除以2.如果这不能提供您想要的确切结果，请取0xff减去当前值一些常数，然后加回到当前值。例如，如果你想将1/3的方向移向白色，则取（0xff - current）/ 3 + current。

你必须玩它才能看到你得到了什么结果。我担心，这个简单的公式，一个足以使深色褪色的因素可能会使浅色变成完全白色，而一个小到足以让浅色变亮的因素可能会使浅色不够亮。 / p>

尽管如此，我认为距白色的距离只有一小部分比一定数量的步骤更有希望。

Answer 19

如果您需要对其进行暴力破解以实现与旧版浏览器的兼容性，则可以使用Colllor自动选择相似的颜色。

示例（颜色：＃a9dbb4）：

Answer 20

我正在使用原始CSS3和SVG添加答案，而不需要LESS或SASS。

基本上，如果问题是为了使全局悬停效果使颜色变亮10％，25％，50％或变深，则可以创建这样的SVG数据调用

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

出于某种原因（我不知道），SVG不允许我在“填充”属性中输入十六进制值，但“白”和“黑”满足我的需要。

深思熟虑： 如果您不介意使用图像，则只需使用50％透明的PNG作为背景图像即可。如果想花哨的话，可以调用PHP脚本作为背景图片，并将其传递给HEX和OPACITY值，然后将其吐出上面的SVG代码。

Answer 21

如果您只需要更改background的颜色，那么这是一种永不过时的好方法-在linear-gradient图像上使用background方法！

查看以下示例：

document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });

span {
  display: inline-block;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}

.red {
  background-color: red;
}

.red-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) red;
}

:root {
  --color: lime;
}

.dynamic-color {
  background-color: var(--color);
}

.dynamic-color-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) var(--color);
}

<table>
  <tr>
    <td><strong>Static Color</strong></td>
    <td><span class="red"></span></td>
    <td><span class="red-darker"></span></td>
  </tr>
  <tr>
    <td><strong>Dynamic Color</strong></td>
    <td><span class="dynamic-color"></span></td>
    <td><span class="dynamic-color-darker"></span></td>
  </tr>
</table>
<br/>
Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>

积分：https://css-tricks.com/css-custom-properties-theming/

Answer 22

将所有内容整合在一起，纯粹使用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>

Answer 23

我发现了一个允许我在这个服务器端执行的PHP类。我只是输出一个内联CSS颜色样式，无论我需要更轻/更暗。效果很好。

http://www.barelyfitz.com/projects/csscolor/

_{（请注意，该类使用PEAR来抛出错误，但我不想仅仅包含PEAR来修改颜色，所以我只删除了所有PEAR引用）}

我把它变成了一个静态类的静态类，所以我可以称之为“lighten”＆amp;直接“变暗”函数而不创建新对象。

样本使用：

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

Answer 24

您可以使用JXtension等JavaScript库，使用户能够使颜色更亮或更暗。如果您想查找此全新图书馆的文档click here。您还可以使用JXtension将一种颜色与另一种颜色组合。

Answer 25

我为jquery编写了一个插件，这个插件也存在同样的问题。我将颜色作为属性或他们想要的css属性的设置颜色，并通过一些计算运行它。十六进制到RGB，然后乘以偏移百分比，然后返回一个新值。如果你想要一个例子，请告诉我。

Answer 26

看起来jPaq（http://jpaq.org/）是JXtension的替代品。使用jPaq的好处是，您只能下载所需内容而不是完整的JavaScript库。以下是仅用于Color类的下载页面的链接：http://jpaq.org/download/1.0.0.1008。