javascript - 从两种颜色计算对比色以确定两者的边框颜色

标签 javascript css user-interface colors contrast

我正在开发一个树控件,用户可以在其中设置树元素的背景颜色。为了指示当前选择的树元素,我在它周围画了一个边框。

我要解决的问题是为边框选择对比色。当只涉及一种颜色并且您需要适当的对比色时,这很容易做到。但是,在这种情况下,您拥有树本身的背景色和所选树项的背景色。这意味着您需要为它们使用对比鲜明的边框颜色。

此屏幕截图显示了一个选定的树项及其边框。相反,如果选择了“ bat ”元素,您将看不到边框。请记住,树的背景颜色不一定是此处所示的白色。

我也一直在想除了使用边框来指示所选元素之外的其他方法,但目前还没有想法。欢迎提出建议。

A menu of items with various foreground, background, and selected colors

最佳答案

chroma.js 可能有一些有用的方法。例如https://vis4.net/chromajs/#chroma-scale可用于获得介于两种颜色之间的颜色。

var midColor = chroma.scale([colorA, colorB])(0.5);

根据其工作原理,您还可以考虑使用 https://vis4.net/chromajs/#color-set 将色调从中点旋转 180 度关于结果。

或者,其 https://vis4.net/chromajs/#quick-start 中的第一个示例doc 从两种颜色生成一个调色板。

chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)

关于javascript - 从两种颜色计算对比色以确定两者的边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54775633/

相关文章:

javascript - Angular Modal ng-click 不起作用

javascript - 如何使用 Bootstrap 在中间获取div内容

jquery - 在令人赏心悦目的场景中使用 Knockout JS?

java - 为什么即使没有人调用 paintComponent() 也会运行?

user-interface - Crystal native GUI

javascript - Windows 8 应用程序 - 单点登录应用程序 - 未加入域

javascript - Sequelize .sync() : error in SQL syntax near NUMBER

javascript - 如何判断浏览器是否支持https资源

css - 使用 CSS 列并确保直接子项的内容不换行

html - 如果元素以不同的高度和宽度平铺,如何使用 Bootstrap 3 网格