I'm designing a website, and I need to allow the user to change the color of some elements. I will have to implement a color slider. I've got 2 different kinds, and I would like to know which is most user-friendly. Also, do they have a name to them? How can I refer to them?

enter image description here

enter image description here

I'm not talking about the design, I'm asking about the fact that in the first image, the color changes as you slide it, while in the second image, the color always stays the 'correct' color. Which is easier to use, and more user friendly?


In short: Both are non-user friendly.


Math for computers...

The RGB color model specifies the intensity of red, green, and blue on a scale of 0 to 255, with 0 (zero) indicating the minimum intensity. The settings of the three colors are converted to a single integer value by using this formula:

RGB value= Red + (Green*256) + (Blue*256*256)

Most users cannot calculate and predict in their heads how the color will look like. With color preview control the task is not so easy, too, as they need to anticipate how the selected color (R, G, or B) will affect the result.


...visuals for humans
Selecting Hue, and then adjusting the other parameters (Saturation, Value/Lightness) with interactive tool is much user friendly. Some good examples are:

enter image description here
enter image description here

  • My upv, nice example but when I switch between RGB and HSL I would also have different input sliders (especially if tab location and design seems to imply you change whole control content). – Adriano Repetti Jan 15 '16 at 9:31
  • @AdrianoRepetti I'm for simplest implementation of the feature, which is enough for the user. My examples are for reference. HSL is more easy and logical way of changing the color for non-advanced users. Pre-defined palette is the simplest way, though. – Alexey Kolchenko Jan 15 '16 at 10:04
  • I agree about simplest implementation however (I'm criticizing that control, not your answer) tab page includes everything (selector and output). Moreover exactly because I can choose RGB/HSL/HSV then I'd expect to change input method (not just output which is somehow equivalent). However I admit a double tab may be worse but at least RGB/HSL/Palette(s) inputs are a resonable request for a color picker... – Adriano Repetti Jan 15 '16 at 10:24

I would go for the first option since it's offers user more color as they slide through it, but it's best to put input label next to it that says the color code, so user can know what the color code for the color as they slide and also they can put the color code of their own so they don't need to slide it to find the perfect color code that they choose

for user-friendly, I think the first one more user-friendly since they already get used to this kind of slider (on photoshop or any other image processing application)

  • Thanks! Do you know what the 2 are called? – Jessica Jan 15 '16 at 3:49
  • what do you mean? the element? color picker is that what you search for – dannyrizal Jan 15 '16 at 6:38

Agree with above that both are non user-friendly

Also the first one is like a Stroop effect test. The bar marked red is cyan, the one marked green is magenta etc etc - that could get really confusing https://www.math.unt.edu/~tam/SelfTests/StroopEffects.html

My own suggestion - unless this is a paint/photo-editing application - is to give the user a fixed set of colours/palettes to choose from, picked from somewhere like ColorBrewer or supplied by a graphic artist. If it's just a styling add-on giving the user the opportunity to set multiple attributes that may well end up picking colours that render information undiscernible (same colour text on same colour background) or some migraine-inducing colour scheme isn't an advantage.

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.