Рассчитайте контрастный цвет из двух цветов

Question

Я разрабатываю древовидный элемент управления, в котором пользователь может установить цвет фона элементов дерева.Чтобы обозначить текущий выбранный элемент дерева, я рисую рамку вокруг него.

Проблема, которую я пытаюсь решить, - это выбор контрастного цвета для границы.Это легко сделать, когда задействован только один цвет, и вам нужен соответствующий контрастный цвет.Однако в этом случае у вас есть цвет фона для самого дерева и цвет фона для выбранного элемента дерева, и вы хотите цвет, который будет контрастировать для них обоих.

Этот снимок экрана показывает выбранный элемент дерева и его границу,Если вместо этого выбран элемент «летучая мышь», вы не увидите границы. Имейте в виду, что цвет фона дерева не обязательно белый, как показано здесь.

Я также пытался придумать, как другиечем использование рамки для обозначения выбранного элемента, но пока нет идей. Предложения приветствуются.

Answer 1

Как часто бывает, когда кладет ручку на бумагу, приходит на ум решение.Я изменил разметку, чтобы оставить зазор между границей и элементом дерева для выбранного элемента.Это выглядит даже лучше, чем оригинальная реализация и может обрабатывать все варианты использования цвета фона.Это обновленный интерфейс.

Answer 2

chroma.js может иметь несколько полезных методов.Например, https://vis4.net/chromajs/#chroma-scale можно использовать для получения цвета, который находится на полпути между двумя цветами.

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

В зависимости от того, как это работает, вы можете также рассмотреть поворот оттенка на 180 градусов от этой средней точкииспользуя https://vis4.net/chromajs/#color-set для результата.

В качестве альтернативы первый пример документа https://vis4.net/chromajs/#quick-start создает цветовую палитру из двух цветов.

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