Javascript 从两种颜色计算对比色，以确定两种颜色的边框颜色

我正在开发一个树控件，用户可以在其中设置树项的背景颜色。为了指示当前选定的树项目，我在其周围绘制了一个边框

我试图解决的问题是为边界选择对比色。当只涉及一种颜色并且您需要适当的对比色时，这很容易做到。但是，在本例中，您有树本身的背景色和选定树项目的背景色。这意味着两种颜色都需要对比的边框颜色

此屏幕截图显示选定的树项目及其边框。如果取而代之的是选择了“bat”项，您将看不到边框。请记住，树的背景色不一定如图所示为白色

除了使用边框来表示所选项目之外，我还一直在尝试其他方法，但到目前为止还没有任何想法。欢迎提出建议

---

chroma.js可能有一些有用的方法。例如，可用于获得介于两种颜色之间的颜色

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

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

根据它的工作原理，你也可以考虑通过使用结果从中间点旋转色调180DEG。 或者，文档中的第一个示例从两种颜色生成调色板

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

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

---

就像通常的情况一样，当把笔写在纸上时，一个解决方案浮现在脑海中。我已经对标记进行了重构，以便在选定项的边框和树项之间留出间隙。这看起来比最初的实现更好，可以处理所有背景色用例。这将显示更新的UI

---

谢谢你给我提供的关于chroma.scale的信息，我还没有看到它，看起来不错。在写了我最初的帖子后，我想到了另一个解决方案，如下所示。