Best way to show users that they can change colour

Question

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:

(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)

Answer 1

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

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.

Answer 2

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:

Answer 3

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]

Answer 4

To answer your question about change colour:

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

Google has something like this:

Answer 5

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