I created a color picker for a website, and I am having one problem regarding the layout of some text.

Above the color picker, there will be a "New Color", and "Original Color". I'm having a hard time finding a location to place the text. (I don't think it's clear without the text.)

enter image description here

The orange is the new color, and the green is the old color.
Also, is it clear that at the new color, you can change the hex textFeild?


I tried inserting the text bellow the hex color. It didn't come out good. I also tried putting it on top, which didn't come out good either.

enter image description here

  • Hello Jessica and welcome to GraphicDesign! For questions like this seeking ideas, we have a set of requirements that your question should keep. How will the color picker be used? What does the rest of the application look like? What ideas have you tried thus far? May 20 '16 at 4:06
  • Thanks for updating your question! Could you also please try to address the other questions I asked in my comment? May 20 '16 at 4:21
  • @ZachSaucier Updated again. I'm not sure how to answer "How will the color picker be used?"
    – Steve
    May 20 '16 at 4:26
  • Much better! Thank you for your effort and cooperation May 20 '16 at 4:28
  • Why do you need to show the previous color in the first place? May 20 '16 at 4:29

You don't need text labels.

In your example images it's not clear what the two color bars are, but in context it should be perfectly clear. Assuming that choosing a new color in the picker will update the 'new color' bar, that will make it clear what the that color is, and the user is either aware of the color they already have selected, which makes it clear what the 'original color' bar is, or they will infer that once the 'new color' updates.

You commented that Adobe have a previous/new color indicator in their color pickers, so take those as an example—they don't have any text labelling the colors and It's clear (to me at least) what they are.

If you do have text labels...

If you do add text labels, I wouldn't use "current color". "Current" is a bit ambiguous, it could be taken as either the previous color (currently selected outside the picker) or the new color (currently selected in the picker). Use something like "previous" and "new", or "old" and "new".

The labels need to be a lot less prominent than the values too. Make them smaller than the hex values and possibly a lighter weight. A quick example:

enter image description here

Re: Text input

As is (with a slight background color and no border), the text input isn't obvious, but it is implied. It's not "in your face" obvious, but it will be clear to users who are familiar with color pickers and who want to input a HEX value. If they aren't familiar with color pickers and don't understand the HEX value it probably doesn't matter (that's assuming your users are familiar with color pickers and HEX color values).

With regards to your two examples (from comments), the full border is very obvious, but probably too obvious—you don't want it to be more prominent than the main color picker functions. The bottom border is much better and may be better. I don't think you need it, but that depends how much prominence you want to give the input.

Another option, if you want to make the input really obvious is to use an icon with the input:

enter image description here

The curser icon makes it fairly obvious, you could make it more so with something like a pencil "edit" icon. Again, I don't think you need it at all, but it depends on your use-case.

  • Thank you! Do you think it's clear that you can change the hex value of the new color? Or do you think one of the following is better: i.imgur.com/Bx6yk8v.png i.imgur.com/BKdtcF8.png (The diff is, one has a border around the whole textfield, while the other only has at the bottom.) Or if you have any other suggestions, please let me know.
    – Steve
    May 20 '16 at 21:56
  • @Jessica updated my answer.. I don't think you need it, all your options are good, it all depends on what you want and how much prominence you want to give the input.
    – Cai
    May 20 '16 at 22:37
  • +1 because your whole answer can be summarised as "it's perfectly good as it is", with which I happen to agree
    – PieBie
    May 20 '16 at 22:48
  • haha, it's quite a long answer considering, but yeh thats what it boils down to
    – Cai
    May 20 '16 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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