I'm designing a color picker for intensity and color temperature on a lamp, where the user can adjust the intensity on the vertical axis and the color temperature on the horizontal axis.

Is this a good design pattern? What would be the better way of displaying this kind of control?

  • Would that be a screen UI or a physical picker?
    – Zoe K
    Dec 28 '15 at 5:49
  • @ZoeK: Will be a screen UI. I'll use with touch and non-touch screens. However, the interaction will be the same.
    – 0x2b3bfa0
    Dec 28 '15 at 8:40
  • I'll submit a version in couple hours.
    – Zoe K
    Dec 28 '15 at 14:43

The temperature doesn't have to go from blue to pink, obviously, I have used exemplary hues, just replace them with your system hues.

enter image description here

  • 3
    Very precise, I like the visual aspect of this color picker. +1 Dec 29 '15 at 11:52
  • 2
    +25: Really great! The only thing I can see is that the color scheme is artificial, however, I'll adapt it with vendian.org/mncharity/dir3/blackbody
    – 0x2b3bfa0
    Dec 31 '15 at 13:14
  • Glad you like it :-) Wow, I like vendian.org, nice resource, thx for sharing.
    – Zoe K
    Dec 31 '15 at 15:13

Another approach is to use two controls. The separation of brightness/intensity and warmth/color might be how your user's conceptually break down these options in their head.

Color picker dual scollies

  • 1
    +1: Good answer, really, this was my first thought. However, I think that the 2d color picker approach would be great and reduce the setup time for each color change. If I don't get a more satisfactory answer, I'll accept yours.
    – 0x2b3bfa0
    Dec 27 '15 at 20:45

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.