Just for a project I am making a note taking web app. I thought it would be a nice idea to let users add a colour to the note to 'categorise' it. The most logical space to put it would be in the input form but I can't think of a clean way to tell users that they can change the colour.

You can see an example of this here where the notes have different colours on the sides of them.

Currently the input form looks like this: input box

(N.B. You hit enter to submit the note, am thinking of changing this to add a button to submit, to make this clearer - I might ask another question on best practises for this)

  • There is a color input element (<input type="color" />).
    – cimmanon
    Feb 15, 2014 at 21:21
  • 1
    @cimmanon Which doesn't work in IE 11, and will only be introduced in FF in the next release. Also, at least on Windows, both the FF and Chrome pickers reuse the standard Windows colour picker component... which is pretty bad for web use, from the lack of hex code input if nothing else (makes it hard to copy colours). For now, JS libraries for colour pickers still seem to be the better choice.
    – Bob
    Feb 16, 2014 at 3:13

5 Answers 5


Keep the color option at the end of the input form ( I would recommend using a default color for the note with a dropdown available which informs users that there are more options available as shown below).


download bmml source – Wireframes created with Balsamiq Mockups

Another option is to do it like Google Keep does it where it shows a palette icon and on hovering over it users can select multiple color options

enter image description here

That said, with regards to whether you should provide a button for your box bar or not, I would recommend going for it since it provides a larger hit area for users and there is also a good possibility users might not know that you can hit enter to "Add a note". In addition, on mobile devices, it's easier for users to just click on the search button rather than having to hunt for the Enter option on their keypads.

Also the presence of a button is a visual clue about the next step in the process.

I recommend looking at this question for more inputs on whether a submit button is needed.


Personally, I prefer to have a limited number of carefully selected colors which will look good in most of the situations (or match some standard sets). I also suggest to show them near the note input box so user can see all of the variants and choose one more quickly:

enter image description here

  • I was thinking exactly this - If you have a hexadecimal colour picker, then either the user has to remember the exact hue they used on a previous note or there has to be a clunky mechanisms which remembers them.
    – user43091
    Feb 15, 2014 at 19:45

I think the suggestions from Mervin Johnsingh and alexeypegov would work.

But keep in mind that some users may not be able to differentiate the colors. So maybe you could couple the color up to categories?

So users could define their categories and (optionally) associate a color with a category. If a note is categorized, it automatically gets the corresponding color.

So instead of (just an example!)

Select color: [colored blue], [colored red], [colored green]

you could have

Select category: Work [colored blue], To-Do [colored red], Quotes [colored green]


To answer your question about change colour:

I did a simple "change color icon" search on Google and found a lot of good ideas:

enter image description here enter image description here enter image description here

Google has something like this:

enter image description here

  • 5
    This doesn't really say how the user would know they can change color though, it's just some example icons. Where would they be used? How would the user know that they can even change color anyway?
    – JonW
    Feb 15, 2014 at 19:21

I think @alexeypegov solution is the best if you have a limited choice of colors (Which I would also suggest)

Although the google option is nice, it requires you to click an icon to expose the color options and then select the option.

Although @alexeypegov solution 'might' seem more cluttered it's the most efficient!

I was thinking also on something like this (you could change the position of the colors) but it is not as self explained as @alexepegov, just fancier

enter image description here

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.