1

The HTML input of type color has no empty state. Therefore it always shows a selected color. What would be the best way to convey to the user that they have to select a color.

I restyled the color input and added a description if no color is stored. Setting the default color to the background color was my initial thought.

enter image description here enter image description here

2
  • 2
    Does this answer your question? Best way to show users that they can change colour
    – fakermaker
    Dec 8, 2023 at 10:22
  • Its a start but doesn't help really as it is kind of outdated. <input type="color" /> is now supported in all major browsers. Also, the answers to the linked question recommend a predefined list of colors. This kind of misses the point of using a color picker.
    – Niklas
    Dec 8, 2023 at 14:18

2 Answers 2

1

Let's see if this is what you're asking:

The method you're proposing only works the first time because after the user selects a color, it won't be so clear that it can be changed. Perhaps some people will understand, but others may not.

A way to make it always clear that it can be chosen and modified would be the following:

enter image description here

so you add a second state in which it's completely clear that the color can be changed. You could explore other options, such as leaving only the edit icon or even making the circle more interactive to make it clear that's where the color picker will come from.

1

I think your solution is quite okay. I only would opt for a different font/color for 'Select a color'. Maybe make it italic and gray?

https://jsbin.com/mokivaj/edit?html,css,output

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.