Skip to main content

Timeline for Most User Friendly Color Picker

Current License: CC BY-SA 3.0

24 events
when toggle format what by license comment
Feb 4, 2016 at 17:42 comment added Steve @plainclothes I'm not sure if this is what you meant by chat, but I created a new chat room here: chat.stackexchange.com/rooms/35302/color-palette
Feb 4, 2016 at 2:13 comment added plainclothes @Jessica it's looking good. I think you could use stronger steps between the rows and some clean up with individual colors, but you're on the right track. Feel free to hit me up in chat if you're looking for more feedback.
Feb 4, 2016 at 0:47 comment added Steve @plainclothes Thanks! Does this color palette make sense? i.imgur.com/btpBpa8.png The base colors are the same as yours. It then gets a brightness of 70% and goes down by 28 till -70%
Feb 2, 2016 at 19:54 history edited plainclothes CC BY-SA 3.0
That blue was _really_ bugging me
Feb 2, 2016 at 18:57 comment added plainclothes @Jessica I updated the answer with a proposal for a new set of base swatches. If you follow Google's model, you'd also want to update the grid below them so the columns are related.
Feb 2, 2016 at 18:56 history edited plainclothes CC BY-SA 3.0
Edit in response to comments
Feb 2, 2016 at 3:24 comment added plainclothes @Jessica I'm not a lawyer, but I'm not sure how they'd protect that with a design patent, since that range has been around a long time. Personally, I'd rework that bright green and probably the blue next to it. The pink could use some help too.
Feb 2, 2016 at 3:20 comment added Steve @plainclothes I only want the colors. So you're saying google would allow me to do that?
Feb 2, 2016 at 3:14 comment added plainclothes @Jessica copy the colors or the color picker UI? As far as I'm concerned you can have both. There are few limits on lifting colors, but there's always a chance someone has protected a given UI (legitimately or by trolling).
Feb 2, 2016 at 1:34 comment added Steve @plainclothes Thanks for the answer! Am I aloud to copy, is it legal to copy the colors from the color palette and use it for my website?
Dec 22, 2015 at 16:37 comment added plainclothes @Crissov 1) Strictly speaking, color is not a circular measure, it's a spectrum -- though the normal linear arrangement doesn't exactly mirror the linear wavelength distribution. 2) Placing the numbers to the side is intentional: Very few users can manipulate color with numeric values. 3) You can't possibly support visual manipulation of every numeric color system in a single view. 4) Alpha transparency was not part of the OP's spec, but it could easily be added as another slider and numeric input.
Dec 22, 2015 at 13:53 comment added Crissov Note that your suggestion (“antetype”) represents an angular / circular measure (i.e. hue) as a linear gradient; the unit is not shown so the nature of this value is intransparent to the less-knowing user, also the numeric value is positioned far away from the widget that manipulates it more visually. The square is actually a coordinate system spanned by saturation and brightness values (which should be percentages) – that is also non-obvious to the user. The red, green and blue values (which should be percentages, too) have no direct visualization but are shown the same way as HSB. Alpha?
Dec 18, 2015 at 21:47 history edited plainclothes CC BY-SA 3.0
Refinement -- all the upvotes deserve a little more care on my part.
Dec 17, 2015 at 17:38 comment added plainclothes @JasonC interesting perspective. In the right context, I think you're absolutely right! In most contexts, I would argue that people aren't interested in developing their understanding of color models, even if the UI is easily learnable. They just want to grab a swatch and go. Context is everything.
Dec 17, 2015 at 17:34 history edited plainclothes CC BY-SA 3.0
modified recommended solution
Dec 17, 2015 at 17:30 comment added Jason C @plainclothes Maybe, although I posit a larger argument that humans generally have the ability to learn. Perhaps choosing a color is an imposing task for a non-expert because they're used to dumbed-down interfaces, not because they can't pick colors. In addition to catering to the average, we create the average. It's our fault that picking a color is an imposing task, we keep oversimplifying the ui. Just clicking a button on a screen would've been imposing to somebody from 50 years ago but we persisted with the buttons and now it's basic. Break the cycle of catering to our grandparents! :)
Dec 17, 2015 at 17:19 comment added plainclothes @dberm22 That's a great point about the hue slider! It really is the logical (if not typical) order of things. I'll have to update the screen shot in the hope that our discussion may impact the state of color pickers for all!
Dec 17, 2015 at 17:17 comment added plainclothes @JasonC as advanced users, you and I are rarely the target user for a color picker. It's typically a tertiary function in a broader app, and choosing colors is an imposing task for non-experts. The goal is to make choosing painless for the average user, but allow room for the experts.
Dec 17, 2015 at 15:21 comment added Jason C Personally, as an advanced user, I strongly dislike the "custom color" -> "color picker" two-step approach. It always annoys me that I have to click a color switch, define the color, then select the swatch again when picking a color. But a color picker with a "recently selected color" selection, on the other hand, nice and smooth.
Dec 17, 2015 at 13:27 comment added dberm22 The Mac/antetype (Mo betta) chooser fixes the above issue, but I would argue that the hue slider should be on the left since it would generally be the first thing the user adjusts.
Dec 17, 2015 at 13:27 comment added dberm22 I was going to post an answer saying to use the well known Microsoft Paint style chooser (very similar to the Google chooser you show) since it is the most familiar of the bunch to the masses. However, you make a great point in your comparison. 99% of the time, I put my cursor at the top edge of the main stage (fully saturated), and use the brightness on the slider. I largely ignore saturation, but if I need to go back to the main stage to adjust, I then need to re-do my brightness....
Dec 17, 2015 at 10:25 comment added ojdo +1 for showing a color picker with text edits for all of HSV, RGB and HEX notation. Depending on the source, only one or the other is known and conversion, though easy in principle, still takes valuable time.
Dec 16, 2015 at 20:53 history edited plainclothes CC BY-SA 3.0
attribution
Dec 16, 2015 at 20:45 history answered plainclothes CC BY-SA 3.0