blocks|key|1423370|text|您可以在所有现代浏览器中使用CSS+filters实现这一点(请参阅caniuse+compatibility+table)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1423371|​|1423372|.button+{
++color:+#ff0000;
}

/*+note:+100%25+is+baseline+so+85%25+is+slightly+darker,+
+++20%25+would+be+significantly+darker+*/
.button:hover+{
++filter:+brightness(85%25);
}|code-block|syntax|javascript|1423373|<button+class="button">Foo+lorem+ipsum</button>|1423374|1423375|下面是来自CSS+Tricks的更多关于你可以使用的各种过滤器的阅读：https://css-tricks.com/almanac/properties/f/filter/|1423376|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/filter|1|http://caniuse.com/#feat=css-filters|2|https://css-tricks.com/almanac/properties/f/filter/^0|E|B|0|Y|R|1|0|0|0|0|0|Z|1F|2|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|P|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]|Z|$5|S|T|U|C|$V|10]]]]

<p>You can do this with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" rel="noreferrer">CSS filters</a> in all modern browsers (see the <a href="http://caniuse.com/#feat=css-filters" rel="noreferrer">caniuse compatibility table</a>).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="button"&gt;Foo lorem ipsum&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>Here's more reading from CSS Tricks about the various filters you can use: <a href="https://css-tricks.com/almanac/properties/f/filter/" rel="noreferrer">https://css-tricks.com/almanac/properties/f/filter/</a></p>


blocks|key|1207843|text|有“不透明度”，这将使背景发光通过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1207844|opacity:+0.5;|code-block|syntax|javascript|1207845|但我不确定这是你的意思。定义“减少颜色”：使透明？或者添加白色？|1207846|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>There is "opacity" 
which will make the background shine through:</p>

<pre><code>opacity: 0.5;
</code></pre>

<p>but I'm not sure this is what you mean. Define "reduce color": Make transparent? Or add white?</p>


blocks|key|1208261|text|HSL颜色提供了答案，HSL颜色值由:hsl(色调0,255，饱和度%25，明度%25)指定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208262|在IE9%2B、火狐、Chrome、Safari和Opera+10%2B中都支持HSL|1208263|a
{
color:hsl(240,65%25,50%25);
}
a.lighter+
{
color:hsl(240,65%25,75%25);
}|code-block|syntax|javascript|1208264|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>HSL Colors provide an answer, 
a HSL color value is specified with: hsl(hue [0,255], saturation %, lightness %).</p>

<p>HSL is supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+</p>

<pre><code>a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}
</code></pre>


blocks|key|1208726|text|在写这篇文章的时候，这是我发现的最好的纯CSS颜色操作实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208727|使用CSS变量来定义HSL而不是十六进制/RGB格式的颜色，然后使用calc()来操作它们。|offset|length|style|CODE|1208728|下面是一个基本的例子：|1208729|​|1208730|:root+{
++--link-color-h:+211;
++--link-color-s:+100%25;
++--link-color-l:+50%25;
++--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)+%2B+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);
}|code-block|syntax|javascript|1208731|<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>|1208732|1208733|我还创建了一个CSS框架(仍处于早期阶段)来提供基本的CSS变量支持，称为root-variables。|1208734|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/sparanoid/root-variables^0|0|Y|6|0|0|0|0|0|0|11|E|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|19|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>At the time of writing, here's the best pure CSS implementation for color manipulation I found:</p>

<p>Use CSS variables to define your colors in HSL instead of HEX/RGB format, then use <code>calc()</code> to manipulate them.</p>

<p>Here's a basic example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>: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 &gt; div {
  flex: 1;
  height: calc(100vw / 10);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Color Manipulation (alpha)&lt;/h3&gt;

&lt;div class="flex"&gt;
  &lt;div style="background-color: var(--link-color-10)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-20)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-30)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-40)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-50)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-60)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-70)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-80)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-90)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color)"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Color Manipulation (Hue)&lt;/h3&gt;

&lt;div class="flex"&gt;
  &lt;div style="background-color: var(--link-color-warm)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-cold)"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Color Manipulation (Saturation)&lt;/h3&gt;

&lt;div class="flex"&gt;
  &lt;div style="background-color: var(--link-color)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-low)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-lowest)"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Color Manipulation (Lightness)&lt;/h3&gt;

&lt;div class="flex"&gt;
  &lt;div style="background-color: var(--link-color-light)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color)"&gt;&lt;/div&gt;
  &lt;div style="background-color: var(--link-color-dark)"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I also created a CSS framework (still in early stage) to provide basic CSS variables support called <a href="https://github.com/sparanoid/root-variables" rel="noreferrer">root-variables</a>.</p>


blocks|key|1208932|text|使用filter纯CSS属性。有关filter属性函数的完整描述，请阅读this+awesome+article。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1208933|我遇到了和您一样的问题，我使用filter属性的brightness函数解决了这个问题：|1208934|.my-class+{
++background-color:+#18d176;
++filter:+brightness(90%25);
}|code-block|syntax|javascript|1208935|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/properties/f/filter/^0|2|6|H|6|10|K|0|0|F|6|O|A|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Use the <code>filter</code> pure CSS property. for a complete description of the <code>filter</code> property functions read <a href="https://css-tricks.com/almanac/properties/f/filter/" rel="noreferrer">this awesome article</a>.</p>

<p>I had a same issue like yours, and I fixed it by using the <code>brightness</code> function of <code>filter</code> property:</p>

<pre class="lang-css prettyprint-override"><code>.my-class {
  background-color: #18d176;
  filter: brightness(90%);
}
</code></pre>


blocks|key|1423100|text|如果你想要更深的颜色，你可以使用低不透明度的rgba黑色：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1423101|rgba(0,+0,+0,+0.3);|code-block|syntax|javascript|1423102|对于较浅的颜色，请使用白色：|1423103|rgba(255,+255,+255,+0.3);|1423104|entityMap^0|M|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>If you want darker color, you can use <code>rgba</code> black with low opacity:</p>
<pre><code>rgba(0, 0, 0, 0.3);
</code></pre>
<p>For lighter use white:</p>
<pre><code>rgba(255, 255, 255, 0.3);
</code></pre>


blocks|key|1208334|text|在LESS中，您将使用以下变量：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208335|@primary-color:+#999;
@primary-color-lighter:+lighten(@primary-color,+20%25);|code-block|syntax|javascript|1208336|这将获取第一个变量，并将其减轻20%25+(或任何其他百分比)。在本例中，您最终会得到较浅的颜色：#ccc|offset|length|style|CODE|1208337|entityMap^0|0|0|1B|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In LESS, you would use the following variables:</p>

<pre><code>@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);
</code></pre>

<p>This would take the 1st variable and  lighten it by 20% (or any other percentage). In this example, you'd end up with your lighter color being: <code>#ccc</code></p>


blocks|key|1423044|text|如果您决定使用http://compass-style.org/，一个基于sass的css框架，它提供了非常有用的darken()和lighten()+sass函数来动态生成css。它非常干净：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1423045|@import+compass/utilities

$link_color:+#bb8f8f
a
++color:+$link_color
a:visited
++color:+$link_color
a:hover
++color:+darken($link_color,10)|code-block|syntax|javascript|1423046|生成|1423047|a+{
++color:+#bb8f8f;
}

a:visited+{
++color:+#bb8f8f;
}

a:hover+{
++color:+#a86f6f;
}|1423048|entityMap|0|LINK|mutability|MUTABLE|url|http://compass-style.org/^0|1L|8|1U|9|7|P|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>if you decide to use <a href="http://compass-style.org/">http://compass-style.org/</a>, a sass-based css framework, it provides very useful <code>darken()</code> and <code>lighten()</code> sass functions to dynamically generate css. it's very clean:</p>

<pre><code>@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)
</code></pre>

<p>generates</p>

<pre><code>a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}
</code></pre>


blocks|key|1208651|text|如果你只需要改变background的颜色，这是一个很好的方法-在background图像上使用linear-gradient方法！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1208652|看看下面的例子：|1208653|​|1208654|document
++.getElementById('colorpicker')
++.addEventListener('change',+function(event)+{
++++document
++++++.documentElement
++++++.style.setProperty('--color',+event.target.value);
++});|code-block|syntax|javascript|1208655|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);
}|1208656|<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"/>|1208657|1208658|致词：https://css-tricks.com/css-custom-properties-theming/|1208659|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/css-custom-properties-theming/^0|8|A|X|A|1C|F|0|0|0|0|0|0|0|3|1H|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|V|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>If you only need to change <code>background</code> color, this is a great approach that is futureproof - Use <code>linear-gradient</code> method on <code>background</code> image!</p>

<p>Check out the example below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;strong&gt;Static Color&lt;/strong&gt;&lt;/td&gt;
    &lt;td&gt;&lt;span class="red"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;td&gt;&lt;span class="red-darker"&gt;&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;strong&gt;Dynamic Color&lt;/strong&gt;&lt;/td&gt;
    &lt;td&gt;&lt;span class="dynamic-color"&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;td&gt;&lt;span class="dynamic-color-darker"&gt;&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;br/&gt;
Change the dynamic color: &lt;input id="colorpicker" value="#00ff00" type="color"/&gt;</code></pre>
</div>
</div>
</p>

<p>Credits: <a href="https://css-tricks.com/css-custom-properties-theming/" rel="noreferrer">https://css-tricks.com/css-custom-properties-theming/</a></p>


blocks|key|1208191|text|您可以使用一个小javascript来使用rgb()计算较暗和较亮的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208192|Fiddle：不是很好，但这只是为了说明。|offset|length|1208193|它主要做的是设置一种颜色，并选择20种具有相同rgb量(相互比较)的颜色，其中只有10种颜色是分开的。|1208194|for+(var+i=-10;+i+<+$('.row:eq(0)+.block').length/2+;+i%2B%2B)+{
+var+r+=+91;
+var+g+=+192;
+var+b+=+222;
+$('.row:eq(1)+.block:eq('%2B(i%2B10)%2B')').css('background'+,+color(r%2B(i*10),g%2B(i*10),b%2B+++(i*10))++++++);
};|code-block|syntax|javascript|1208195|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Aeg5z/^0|0|0|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>You could use a little javascript to calculate the darker and lighter color using the rgb().</p>

<p><a href="http://jsfiddle.net/Aeg5z/" rel="nofollow noreferrer">Fiddle</a> : Not really nice, but it is just for illustration.</p>

<p>What it essentially does is sets a color and selects 20 colors with the same amount (compared to one another) of rgb only with 10 apart.</p>

<pre><code>for (var i=-10; i &lt; $('.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))      );
};
</code></pre>


blocks|key|1208844|text|如果你为了旧版浏览器的兼容性需要暴力破解它，你可以使用Colllor自动选择相似的颜色变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1208845|示例(color：#a9dbb4)：|1208846|​|1208847|📷|atomic|1208848|1208849|entityMap|0|LINK|mutability|MUTABLE|url|http://colllor.com/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3c109f961a793e93e7a210b1ee5b96eb.png|imageAlt^0|R|7|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|K|3|G|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|U|P|V|C|$W|X|Y|-4]]]]

<p>If you need to brute force it for older browser compatibility, you can use <a href="http://colllor.com/" rel="nofollow noreferrer">Colllor</a> to automatically select similar color variations.</p>

<p>Example (color: #a9dbb4):</p>

<p><a href="https://i.stack.imgur.com/UxWQ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UxWQ8.png" alt="enter image description here"></a></p>


blocks|key|1208109|text|一个过时的简单答案(在2013年)是在颜色上使用50%25透明的白色PNG：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208110|div+{
++++background-color:red;
}

div:hover+{
++++background-image:url('lighten.png');
}|code-block|syntax|javascript|1208111|其中lighten.png是具有50%25透明度的白色填充的PNG。|1208112|现在有更好的方法来做到这一点。我希望人们现在不要再评论了。|1208113|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>One outdated simple answer (in 2013) was to use a 50% transparent white PNG over the color:</p>

<pre class="lang-css prettyprint-override"><code>div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}
</code></pre>

<p>Where lighten.png is a PNG of a white fill with 50% transparency.</p>

<p>There's much better ways to do this today. I hope people stop commenting now.</p>


blocks|key|1208348|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208349|a+{
++color:+hsl(240,+100%25,+50%25);
}

a:hover+{
++color:+hsl(240,+100%25,+70%25);
}|code-block|syntax|javascript|1208350|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try:</p>

<pre><code>a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}
</code></pre>


blocks|key|1423474|text|把它们综合起来，一个纯粹用DIV和CSS完成的表格解决方案，试试吧;)浏览器应该支持RGBA颜色……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1423475|<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>|code-block|syntax|javascript|1423476|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Bringing it all together, a table solution done purely with DIV and CSS, try it ;) The browser should support RGBA colors though....</p>

<pre><code>&lt;head&gt;
&lt;style&gt;
    .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) {
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="divtable" class="colored-div-table"&gt;
    &lt;div id="col"&gt;&lt;/div&gt;
    &lt;div id="col"&gt;&lt;/div&gt;
    &lt;div id="col"&gt;&lt;/div&gt;  

    &lt;div id="row"&gt;
        &lt;div&gt;First Line&lt;/div&gt;&lt;div&gt;FL C2&lt;/div&gt;&lt;div&gt;FL C3&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="row"&gt;
        &lt;div&gt;Second Line&lt;/div&gt;&lt;div&gt;SL C2&lt;/div&gt;&lt;div&gt;SL C3&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="row"&gt;
        &lt;div&gt;Third Line&lt;/div&gt;&lt;div&gt;TL C2&lt;/div&gt;&lt;div&gt;TL C3&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="row"&gt;
        &lt;div&gt;Forth Line&lt;/div&gt;&lt;div&gt;FL C2&lt;/div&gt;&lt;div&gt;FL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Fifth Line&lt;/div&gt;&lt;div&gt;FL C2&lt;/div&gt;&lt;div&gt;FL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Sixth Line&lt;/div&gt;&lt;div&gt;SL C2&lt;/div&gt;&lt;div&gt;SL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Seventh Line&lt;/div&gt;&lt;div&gt;SL C2&lt;/div&gt;&lt;div&gt;SL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Eight Line&lt;/div&gt;&lt;div&gt;EL C2&lt;/div&gt;&lt;div&gt;EL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Nineth Line&lt;/div&gt;&lt;div&gt;NL C2&lt;/div&gt;&lt;div&gt;NL C3&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="row"&gt;
        &lt;div&gt;Tenth Line&lt;/div&gt;&lt;div&gt;TL C2&lt;/div&gt;&lt;div&gt;TL C3&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1208585|text|我知道现在已经很晚了，但是，你可以用一个包装器来包装你的按钮，改变一个rgba颜色函数的不透明度级别，就像在其他答案中所说的那样，但没有明确的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1208586|这是一支钢笔：|1208587|https://codepen.io/aronkof/pen/WzGmjR|offset|length|1208588|​|1208589|#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);
}|code-block|syntax|javascript|1208590|<div+id="wrapper">
++<div+class="btn-wrap">
++++<button+class="btn">HEY!</buutton>
++</div>
</div>|1208591|1208592|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|11|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|E]]]]

<p>I know it's late but, you could use a wrapper to your buttons and change a rgba color function opacity level, as said in other answers but with no explicit example.</p>

<p>Here's a pen:</p>

<p><a href="https://codepen.io/aronkof/pen/WzGmjR" rel="nofollow noreferrer">https://codepen.io/aronkof/pen/WzGmjR</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
  &lt;div class="btn-wrap"&gt;
    &lt;button class="btn"&gt;HEY!&lt;/buutton&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1422998|text|请看我对Ctford回复的评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1422999|我认为将颜色变亮的最简单方法是将每个RGB分量相加到0xff，然后除以2。如果这不能给出你想要的确切结果，那么取0xff减去当前值乘以某个常量，然后再加回当前值。例如，如果您希望将1/3的位置转换为白色，则使用(0xff+-+current)/3%2Bcurrent。|1423000|你必须使用它来看看你得到了什么结果。我担心，用这个简单的公式，一个足以使深色褪色的因子可能会使浅色变得完全白色，而一个足够小的因子使浅色仅变亮一点可能会使深色变得不够亮。|1423001|尽管如此，我认为走到白色的一小部分距离比固定数量的步骤更有前途。|1423002|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>See my comment on Ctford's reply.</p>

<p>I'd think the easy way to lighten a color would be to take each of the RGB components, add to 0xff and divide by 2. If that doesn't give the exact results you want, take 0xff minus the current value times some constant and then add back to the current value. For example if you want to shift 1/3 of the way toward white, take (0xff - current)/3+current.</p>

<p>You'd have to play with it to see what results you got. I would worry that with this simple a formula, a factor big enough to make dark colors fade nicely might make light colors turn completely white, while a factor small enough to make light colors only lighten a little might make dark colors not lighten enough.</p>

<p>Still, I think going by a fraction of the distance to white is more promising than a fixed number of steps.</p>


<p>We have a big application on the site and we have a few links which are, let's say blue color like the blue links on this site. Now I want to make some other links, but with lighter color. Obviously I can just do simply by the hex code adding in the CSS file, but our site lets user decide what colors they want for their customized profile/site (like Twitter). </p>

<p>So, my question is: can we reduce the color by percentage?</p>

<p>Let's say the following code is CSS:</p>

<pre><code>a {
  color: blue;
}

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

<p>OR</p>

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

<p>Is there a way to reduce a color by a percentage?</p>


Dynamically change color to lighter or darker by percentage CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我们在网站上有一个很大的应用程序，我们有一些链接，比如说蓝色，就像这个网站上的蓝色链接。现在我想做一些其他的链接，但颜色较浅。显然，我可以简单地通过在CSS文件中添加十六进制代码来实现，但我们的站点让用户决定他们想要的自定义配置文件/站点的颜色(如Twitter)。所以，我的问题是:我们可以按百分比减少颜色吗？假设下面的代码是CSS：a {  color: blue;}a.lighter {  c

问根据CSS百分比动态地将颜色更改为更亮或更暗
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据CSS百分比动态地将颜色更改为更亮或更暗EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据CSS百分比动态地将颜色更改为更亮或更暗
EN