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

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

我遇到了和你一样的问题，我使用 filter 属性的 brightness 函数修复了它：

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

---

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

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

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

---

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

rgba(0, 0, 0, 0.3);

对于打火机使用白色：

rgba(255, 255, 255, 0.3);

---

这是一个老问题，但是大部分答案都需要使用预处理器或 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 { --清晰度：1； } div { 显示：内联块；高度：100px；宽度：100px；行高：100px；白颜色;文本对齐：居中；字体系列：arial、sans-serif；字体大小：20px；背景：rgba( calc(var(--r) * var(--clarity)), calc(var(--g) * var(--clarity)), calc(var(--b) * var(- -清晰度）））； } .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； }

---

如果您决定使用 http://compass-style.org/，一个基于 sass 的 css 框架，它提供了非常有用的 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;
}

---

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

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

检查 URL 参数以确定用户，从而确定用户选择的颜色。使用 URL 参数而不是会话变量，以便您仍然可以缓存 CSS。将颜色分解为其红色、绿色和蓝色分量 将三个分量中的每一个增量一个设定的量。对此进行试验以获得您所追求的结果。生成包含新颜色的 CSS

指向这个 CSS 生成页面的链接如下所示：

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

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

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

---

如果您只需要更改 background 颜色，这是一种面向未来的好方法 - 在 background 图像上使用 linear-gradient 方法！

看看下面的例子：

document .getElementById('colorpicker') .addEventListener('change', function(event) { document .documentElement .style.setProperty('--color', event.target.value); });跨度{显示：内联块；边框半径：20px；高度：40px；宽度：40px；垂直对齐：中间； } .red { 背景颜色：红色； } .red-darker { 背景：线性渐变（到顶部，rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ）红色； } :root { --color: 石灰； } .dynamic-color { 背景色：var(--color); } .dynamic-color-darker { 背景：线性渐变（到顶部，rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) ) var(--color); }

静态颜色
动态颜色	< /span>

更改动态颜色：

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

---

您可以使用一点 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))      );
};

---

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

一旦我找到了我的网站的配色方案，我将颜色的十六进制代码放在我的样式表顶部的评论部分中并命名它们。

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

http://www.colorschemer.com/online.html

http://colorschemegenerator.com/

http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

---

如果您需要强制使用旧版浏览器兼容性，您可以使用 Colllor 自动选择相似的颜色变化。

示例（颜色：#a9dbb4）：

https://i.stack.imgur.com/UxWQ8.png

---

您可以使用 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 */
    }

---

我正在使用原始 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 代码。

---

尝试：

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

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

---

综合起来，一个纯粹用 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>

---

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

这是一支笔：

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

#wrapper { 宽度：50vw;高度：50vh；背景颜色：#AAA；边距：20px 自动；边框半径：5px；显示：网格；放置项目：中心； } .btn-wrap { 背景颜色：#000;显示：内联块； } 按钮 { 过渡：所有 0.6s 线性；背景颜色：rgba(0, 255, 0, 1);边框：无；大纲：无；颜色：#fff;填充：50px；字体粗细：700；字体大小：2em； } 按钮：悬停 { 背景颜色：rgba(0, 255, 0, .5); }

---

一个过时的简单答案（2013 年）是在颜色上使用 50% 透明的白色 PNG：

div {
    background-color:red;
}

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

其中 lighten.png 是具有 50% 透明度的白色填充的 PNG。

今天有更好的方法来做到这一点。我希望人们现在停止评论。

---

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

我认为使颜色变亮的简单方法是将每个 RGB 分量添加到 0xff 并除以 2。如果这不能给出您想要的确切结果，请将 0xff 减去当前值乘以某个常数然后加回当前值。例如，如果您想将 1/3 的路径移向白色，请采用 (0xff - current)/3+current。

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

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

---

我找到了一个 PHP 类，可以让我做这个服务器端。我只是为我需要更亮/更暗的任何内容输出一个内联 CSS 颜色样式。效果很好。

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

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

我把它变成了一个带有静态方法的静态类，这样我就可以直接调用“变亮”和“变暗”函数而无需创建新对象。

示例用法：

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

---