使用 CSS 或 JavaScript 从原色动态获取主题色

Question

我正在制作一个小型颜色转换器应用程序，该应用程序可以根据转换后的颜色动态更改背景颜色。问题是，我无法定义用于 UI 元素(如字体、输入边框等(的颜色。如果用户选择相同的颜色进行转换 - 所有 UI 都将完全消失。

我想到使用css过滤器属性，也许亮度会很好。但是，我无法用边框等来处理它。

现在的bg-color存储在css变量中。

问题是，如何从任何颜色起诉CSS或JS中获得强调色？

Answer 1

我找到了一个解决方案，我想把它留在这里。

1. 通过使用 SASS，可以使用这种 SASS 颜色函数轻松解决问题。对于我的问题，mix($color 1、$color 2、$weight：50%(功能将是完美的选择。唉，我只能使用纯CSS。

2. 尝试做类似的事情，我编写了一个函数，根据颜色亮度将颜色与一定量的白色或黑色混合在一起。亮度是根据RGB值计算的;混合是用相同颜色的十六进制值完成的。

const accentColour = (rgb, hex) => {
const rgbLightness = (r, g, b) => 0.2126 * r + 0.587 * g + 0.114 * b;
const blendColours = (hex1, hex2, amount) => {
// remove "#"
[ hex1, hex2 ] = [ parseInt(hex1.slice(1), 16), parseInt(hex2.slice(1), 16) ];
const [ hex1_12 , hex2_12 ] = [ hex1 >> 16 , hex2 >> 16 ];
const [ hex1_34, hex2_34 ] = [ hex1 >> 8 & 255, hex2 >> 8 & 255 ];
const [ hex1_56, hex2_56 ] = [ 255 & hex1, 255 & hex2 ];
// return "#" + (16777216 + 65536 * (Math.round((hex2_12 - hex1_12) * amount) + hex1_12) + 256 * (Math.round((hex2_34 - hex1_34) * amount) + hex1_34) + (Math.round((hex2_56 - hex1_56) * amount) + hex1_56)).toString(16).slice(1);
return "#" + [
16777216,
65536 * (Math.round((hex2_12 - hex1_12) * amount) + hex1_12),
256 * (Math.round((hex2_34 - hex1_34) * amount) + hex1_34),
(Math.round((hex2_56 - hex1_56) * amount) + hex1_56),
]
.reduce((a, b) => a + b, 0)
.toString(16)
.slice(1);
};
return (
(rgbLightness(...rgb) < 180)
? blendColours(hex, "#FFFFFF", 0.75)
: blendColours(hex, "#000000", 0.5)
);  
};