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

Question

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

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

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

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

Answer 1

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)