CODEWITHSUNDEEP
javascriptcssuser-interfacecolorscontrast
nevf
nevf

Reputation: 4826

Calculate a contrasting color from two colors to determine a border color for both

I am developing a tree control where the user can set the background color of tree items. In order to indicate the currently selected tree item, I am drawing a border around it.

The issue I am trying to resolve is choosing a contrasting color for the border. This is easy to do when only one color is involved and you need an appropriate contrasting color. However, in this case, you have the background color for the tree itself and the background color for the selected tree item. That means you need a contrasting border color for both of them.

This screen shot shows a selected tree item and its border. If instead the "bat' item is selected, you won't see the border. Keep in mind the tree background color isn't necessarily white as shown here.

I've also been trying to think of ways other than using a border to indicate the selected item, but no ideas so far. Suggestions welcome.

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

Upvotes: 0

Views: 431

Answers (2)

nevf
nevf

Reputation: 4826

As is often the case when puts pen to paper a solution came to mind. I've refactored the markup to leave a gap between the border and the tree-item for the selected item. This looks even better than the original implementation and can handle all background color use cases. This the updated UI.

enter image description here

Upvotes: 0

Tony Gentilcore
Tony Gentilcore

Reputation: 203

chroma.js might have some useful methods. For instance https://vis4.net/chromajs/#chroma-scale could be used to get a color that is half way between the two colors.

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

Depending on how that works, you may also consider rotating the hue 180deg from that midpoint by using https://vis4.net/chromajs/#color-set on the result.

Alternatively, The first example in its https://vis4.net/chromajs/#quick-start doc generates a color palette from two colors.

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

Upvotes: 1

Related Questions