A simple & working solution in such cases is adding a transparent background layer, in e.g. 50% black. It can either be a linear gradient or a simple solid block at about 40-60% opacity.
As you can see, it will work on any type of background and even on plain white it is not annoying to look at (subjective, I know, but come on it really isn't).
I don't ...
I thought you may like to draw some inspiration from this web app: youcanbook.me
They did a nice interface for time picker with blacklisted time, I share a screenshot on how it looks like for users selecting a time. The app is done in a way that users can set up the interval length and day of the week to start.
Most designers that I have worked with in the past are really committed to Material Design. The really great thing about Material Design is that it is based in good design principles instead of design dogma. As a matter of fact, they actually have guidelines for iOS apps which some Apple enthusiast may find blasphemous :).
In addition to that, always keep in ...
As anwesha said, the best option seems to be 2.
The reason is simply that it is the most logical flow. First I select the color then I tinker with how visible I want it to be. And then I confirm the selection.
You can also see this in design tools like Figma, the color comes before the opacity:
Additionally, the horizontal layout is better, as a slider like ...
Now that I think about it for a second time, and after loading the screen on my phone, I change my recommendation to the following:
One the cardinal rules is assuming that people will lose sight of anything below their finger when they touch it, including the control being touched.
Option 2 violates this. Opacity comes after selecting color ...
if the purpose of the app selling the lipstick i won't use transparency,
i will prefer for example to select red, then all red family will show up i will slide until i found the right with
Theory 1 : i will prefer this solution based on snapchat and instagram filter experience people used to swipe filter more than adjust transparency
Theory 2 : transparency ...
I would go with option two.
Always filter your design choices through conversational UI.
If your UI was a person, would it say: What color do you want? And how transparent should it be? or How transparent should it be? (how transparent should what be?) and what color?
Obviously, you would first choose a color, then transparency.
A round slider toggle is ...