dynamic改变颜色以更轻或更深的百分比CSS（Javascript）
我们有一个很大的应用程序在网站上，我们有几个链接，可以说蓝色像本网站上的蓝色链接。 现在我想做一些其他的链接，但颜色较浅。 很明显，我可以简单地通过在CSS文件中添加hex代码来完成，但是我们的网站允许用户决定他们想要自定义configuration文件/网站的颜色（如Twitter）。
所以，我的问题是：我们可以减less百分比的颜色？
假设下面的代码是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 redcuing it }
有没有办法减less百分比的颜色？
如果您使用的是允许使用SASS的堆栈，则可以使用“ lightenfunction：
$linkcolour: #0000FF; a { color: $linkcolour; } a.lighter { color: lighten($linkcolour, 50%); }
你现在可以用CSSfilter来做这件事。 支持如果跨浏览器，但随着规范继续得到执行和清理，这将是非常方便的。
.button { color: #ff0000; } .button:hover { // note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker filter: brightness(85%); }
以下是关于您可以使用的各种filter的一些阅读： http : //code.tutsplus.com/tutorials/say-hello-to-webkit-filters-net-23318
更新
随着filter进入主stream，这似乎越来越受欢迎。 以下是目前的兼容性： http : //caniuse.com/#feat=css-filters
有“不透明”，这将使背景照耀：
opacity: 0.5;
但我不确定这是什么意思。 定义“减less颜色”：使透明？ 或者添加白色？
HSL颜色提供答案，HSL颜色值用hsl（hue [0,255]，饱和度％，亮度％）指定。
HSL支持IE9 +，Firefox，Chrome，Safari和Opera 10+
a { color:hsl(240,65%,50%); } a.lighter { color:hsl(240,65%,75%); }
在LESS中，您将使用以下variables：
@primary-color: #999; @primary-color-lighter: lighten(@primary-color, 20%);
这将采取第一个variables，并减轻20％（或任何其他百分比）。 在这个例子中，你最终会得到更浅的颜色： #ccc
据我所知，你不可以在CSS中做到这一点。
但是我认为一点服务器端逻辑可以很容易地按照您的build议进行操作。 CSS样式表通常是静态资产，但没有理由不能由服务器端代码dynamic生成。 您的服务器端脚本将：
- 检查URL参数以确定用户，从而确定用户select的颜色。 使用URL参数而不是会话variables，以便仍然可以cachingCSS。
- 将颜色分解为红色，绿色和蓝色成分
- 将三个组件中的每一个按设定的量增加。 试试这个来获得你之后的结果。
- 生成包含新颜色的CSS
这个CSS生成页面的链接如下所示：
<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">
如果您不使用.css扩展名，请确保正确设置MIMEtypes，以便浏览器知道将该文件解释为CSS。
（请注意，要使颜色变浅，您必须提高每个RGB值）
如果您决定使用基于sass的css框架http://compass-style.org/ ，它会提供非常有用的darken()和lighten() sass函数来dynamic生成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; }
如果你想要较深的颜色，你可以使用低透明度的rgba黑色：
rgba(0,0,0,0.3)
为了更轻使用白色：
rgba(255,255,255,0.3).
您可以使用一个小的JavaScript来使用rgb（）来计算更深和更浅的颜色。
小提琴 ：不是很好，但它只是为了说明。
它基本上做的是设置一个颜色，并select相同数量的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)) ); };
一个简单的答案是在颜色上使用50％的透明白色PNG：
div { background-color:red; } div:hover { background-image:url('lighten.png'); }
其中lighten.png是一个白色填充的PNG，透明度为50％。
你可以使用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 */ }
不直接，不。 但你可以使用一个网站，比如colorschemedesigner.com ，它会给你你的基本颜色，然后给你的基本颜色的不同范围的hex和rgb代码。
一旦我find我的网站的配色scheme，我把颜色的hex代码，并将其命名在我的样式表顶部的评论部分。
其他一些颜色scheme生成器包括：
尝试：
a { color: hsl(240, 100%, 50%); } a:hover { color: hsl(240, 100%, 70%); }
看到我对Ctford的回复的评论。
我认为减轻颜色的简单方法是取每个RGB分量，加上0xff并除以2.如果没有给出你想要的确切结果，则取0xff减去当前值乘以某个常量然后添加回当前值。 例如，如果你想把白移三分之一，取（0xff – 电stream）/ 3 +电stream。
你必须玩它，看看你有什么结果。 我担心，用这个简单的公式，一个足够大的因素使黑暗的颜色褪色很好，可能会使光色完全变白，而一个足够小的因素，使浅色只会稍微点亮，可能会使暗色不够亮。
尽pipe如此，我认为去白色的距离的一小部分比固定数量的步骤更有前景。
您可以使用JXtension等JavaScript库，使用户可以使颜色变浅或变暗。 如果你想find这个全新的图书馆文件， 请点击这里 。 您也可以使用JXtension将一种颜色与另一种颜色组合。
它看起来像jPaq（ http://jpaq.org/ ）是JXtension的替代品。 使用jPaq的好处是，你只能下载你需要的而不是完整的JavaScript库。 以下是Color类的下载页面的链接： http ： //jpaq.org/download/1.0.0.1008 。
我发现一个PHP类，让我做这个服务器端。 我只是输出一个内联的CSS颜色样式，无论我需要更轻/更黑。 很好用。
http://www.barelyfitz.com/projects/csscolor/
（请注意，类使用PEAR抛出错误，但我不想包括PEAR只是为了修改颜色，所以我只是删除所有的PEAR引用）
我把它变成一个静态类的静态类，所以我可以直接调用“减轻”和“变暗”的function，而不需要创build一个新的对象。
示例用法：
$original_color = 'E58D8D'; $lighter_color = Css::lighten($original_color, .7); $darker_color = Css::darken($original_color, .7);
我写了一个jquery的插件，导致这个相同的问题。 我把颜色作为一个属性，或者他们想要的CSS属性的设置颜色，并通过一些计算运行它。 hex到RGB，然后乘以偏移百分比，然后返回一个新的值。 让我知道你是否想要一个例子。
把它们放在一起，纯粹用DIV和CSS完成的表格解决scheme，尝试一下;）浏览器应该支持RGBA颜色，尽pipe….
<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>
对于名为“blue”的css，有“lightblue”
对于“绿色”，有“浅绿色”
对于“灰色”，有“浅灰色”
对于“黄色”，有“浅黄色”
尝试浏览这个CSS命名的颜色列表更多： http : //www.w3schools.com/CSS/css_colornames.asp
