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

Question

我们在网站上有一个很大的应用程序,我们有一些链接,比如蓝色链接,就像这个网站上的蓝色链接一样.现在我想做一些其他的链接,但颜色较浅.显然我只能通过添加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
}

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

Answer 1

你现在可以使用CSS过滤器来做到这一点.支持是跨浏览器,但随着规范继续实施和清理,这将是非常方便的.

.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>

以下是您可以使用的各种过滤器的一些阅读: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颜色提供答案,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属性函数的完整描述，请阅读这篇很棒的文章。

我有和你一样的问题，我通过使用property的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

在撰写本文时，这是我发现的用于色彩处理的最佳纯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变量支持。

Answer 8

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

rgba(0,0,0,0.3)

对于较轻的使用白色:

rgba(255,255,255,0.3).

Answer 9

据我所知,你无法在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 10

如果你决定使用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;
}

Answer 11

该color-mix()函数是 CSS Color Module Level 5 规范即将添加的功能。其主要目的是将两种或多种颜色按指定比例混合在一起。检查支持。

:root {
  --primary-color: #FF9900;
  --primary-color-dark: color-mix(in srgb, var(--primary-color), black 20%);
  --primary-color-light: color-mix(in srgb, var(--primary-color), white 20%);
}

.button {
  background: var(--primary-color);
}

.button:hover {
  background: var(--primary-color-dark);
}

Answer 12

如果您只需要更改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 13

这是一个古老的问题，但是大多数答案都需要使用预处理器或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>

Answer 14

您可以使用一些小的javascript来使用rgb()计算更暗和更浅的颜色.

小提琴:不是很好,但它只是为了说明.

它本质上做的是设置一种颜色并选择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))      );
};