Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I have a requirment to have users be able to select button colors, I want that according to the background color they select, an appropriate, contrasted button text color will be determined automatically.
for that - I need some sort of formula, and I was wondering if anyone knows what such formula might be, I looked around, but haven't found anything substantial.
Here is an example of a visible text on button that I want to achieve:
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.
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)
