Question

我目前在前端有一个十六进制值，我需要使用内联样式来减轻和变暗。我目前正在尝试使用css lighten和darken功能，

style={{ backgroundColor: lighten(color, 10 %)}}>

但是jsx不喜欢这个。还有另一种方法吗？在此post中，该人建议使用scss，但我无法将值硬编码到css中，因为我从数据库中提取它。

Answer 1

这不是一个真正的答案，因为它不直接解决您的问题或回答您最初的要求。但是......我没有50位代表发表评论，我认为这可能有所帮助。

我不相信CSS有更轻更暗的方法。

十六进制是一个基于16的数字，ABCDEF对应于11,12,13,14,15,16。例如，AA为11 * 11，FF为16 * 16，0为-1。

十六进制颜色代码是3个数字，例如白色#FFFFFF（ff，ff，ff）将是：16 * 16 =第256个数字，或255（0是第一个数字）。

数字越高越暗。这意味着......白色是最暗的颜色，黑色是最浅的颜色。

获得十六进制颜色值后：

var red = parseInt(hexdecimal[1] + hexdecimal[2],16);
var green = parseInt(hexdecimal[3] + hexdecimal[4],16);
var blue = parseInt(hexdecimal[5] + hexdecimal[6], 16);

然后只需添加颜色值，如果你想要更亮，减去更暗。

这是我刚刚制作的一个快速小提琴： https://jsfiddle.net/3b57L8ss/

希望这会对你有所帮助。

Answer 2

您可以翻译 HSL 格式并编辑亮度和饱和度。准备好的解决方案：https://github.com/degtyarev-artyom/lightness-saturation-css-in-js

在JSX中使用css变亮和变暗功能

2 个答案: