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

【问题标题】：Using the css lighten and darken feature in JSX在 JSX 中使用 css 变亮和变暗功能
【发布时间】：2017-09-18 20:47:54
【问题描述】：

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

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

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

【问题讨论】：

CSS 没有这样的功能。您可能正在考虑 LESS。
JavaScript 库 color 也有一个 lighten 可能适合您的功能

标签： html css reactjs jsx

【解决方案1】：

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

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

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

十六进制颜色代码是 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/

希望对你有所帮助。

【讨论】：

变亮/变暗的特征较少。

【解决方案2】：

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

【讨论】：