在 Bootstrap 中使用自定义颜色获取成比例的灰色答案

【问题标题】：Get proportional gray colors using a custom color in Bootstrap在 Bootstrap 中使用自定义颜色获取成比例的灰色
【发布时间】：2014-09-16 12:37:05
【问题描述】：

我需要使用自定义颜色获得成比例的灰色，并使用 LESS 保持默认百分比。这些是引导程序的默认值：

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 46.7%); // #777
@gray-lighter:           lighten(#000, 93.5%); // #eee

如何使用例如 #173B52 更改这些颜色？

【问题讨论】：

标签： css twitter-bootstrap colors twitter-bootstrap-3 less

【解决方案1】：

很简单：

@gray-darker:            screen(lighten(#000, 13.5%), #173B52);
@gray-dark:              screen(lighten(#000, 20%),   #173B52);
@gray:                   screen(lighten(#000, 33.5%), #173B52);
@gray-light:             screen(lighten(#000, 46.7%), #173B52);
@gray-lighter:           screen(lighten(#000, 93.5%), #173B52);

【讨论】：

overlay 可能会更好。 screen 只能用于淡化深色，而overlay 可以为任何颜色产生合适的结果。顺便说一句，你甚至不需要 two 那里的功能。只需overlay(#fff * .135, #173B52);、overlay(#fff * .2, #173B52); 等就可以了。 E.g.).
但overlay 在这种情况下效果不佳，因为实际上我没有得到比例值。此外，我们谈论的是灰色，我们不需要浅色。顺便说一句，好把戏！
啊，我想我误解了你的意图（没有看到你的方法产生的实际颜色）。那么是的，screen(#fff * .135, #173B52); 将等于 (codepen)。