: Determining text color on top of a selectable background color I have a requirment to have users be able to select button colors, I want that according to the background color they select,

@Voss6371140

It looks like your BG color is about #aa0000 and your buttons are about #ff5555 . Depending on your desired look you could do something like add #55 to each RGB value (anything past #ff would just stay at #ff). Maybe you could make it more complex and subtract the BG value from #ffffff and add back a third of the difference to each RGB value.

Another thing you could do is make the buttons translucent and just let the opacity govern the color (I did something like this for school: Fish Color Project)

Vote Up Vote Down

@Kevin459

My understanding based on your explanation is that a user can choose a colour as the background. To this, a button and button text colour will be selected automatically.

From what I can see from your provided example, you already have a clear formula.

The user has chosen red as the background colour - then the button background is a lighter variant, with the button text being a darker variant.

If I were to select blue, following this formula, there'd be a lighter blue for the button background and a darker blue for the button text.

I'm not sure what software you'd be producing this in, but the button gradient (inner glow) effect could be created with a graded black colour, multiplied on top of the core colour, so the effect will always remain.

(reading the comments on your question...) You'd be better off getting some mid-range presets instead of leaving it totally open to the user. I'm not saying restrict the colour choice, but restrict the colour lightness, i.e. only able to choose a particular shade of red/blue/green etc instead of all shades.

Vote Up Vote Down