Color Selection

Introduction

We need an improved design for how color selection/specification works across the OS.

Designers

William Jon McCann

Objectives

Primary

  • Select a color to use for text
  • Select a color to use for a shape
  • Select color to use for a Calendar source
  • Select a color from a supplied set of defaults
  • Select a color that was used previously
  • Allow selecting color transparency (alpha)
  • Allow color customization

Secondary

  • Determine a hex code for a color
  • Develop a palette from a base color?

Non-Goals

Constraints

Relevant Art

Mac OS X

https://lh4.googleusercontent.com/-GyZjFg1mcmU/TsxC4x3wMjI/AAAAAAAAY1Y/Kjd_M2enGeI/s800/Screen%2520Shot%25202011-11-22%2520at%25207.43.56%2520PM.jpg https://lh3.googleusercontent.com/-gtoirt7rMIk/TsxC5IuusSI/AAAAAAAAY1c/HH7UyvQ_gx0/s800/Screen%2520Shot%25202011-11-22%2520at%25207.44.00%2520PM.jpg https://lh6.googleusercontent.com/-_GQqy74cwmg/TsxC5ZuIxTI/AAAAAAAAY1g/mgKG__4WbDw/s800/Screen%2520Shot%25202011-11-22%2520at%25207.44.04%2520PM.jpg https://lh3.googleusercontent.com/-p2F_Lu9zpPc/TsxC6NZuGlI/AAAAAAAAY1o/05CZ3M4gHok/s800/Screen%2520Shot%25202011-11-22%2520at%25207.47.09%2520PM.jpg https://lh3.googleusercontent.com/-4H1Ut56z0gY/TsxC53rXwbI/AAAAAAAAY1k/RELXyK_6iHI/s800/Screen%2520Shot%25202011-11-22%2520at%25207.44.16%2520PM.jpg

iOS Calendar

https://lh4.googleusercontent.com/-HazLbdaOXLM/TsxVAfxK2SI/AAAAAAAAY18/GijADtBYYow/s400/photo.PNG

Google Draw

https://lh5.googleusercontent.com/-7QSXlJrHAIo/Tsw5ufXbY3I/AAAAAAAAY0o/yjfM0yCF-DM/s800/Screenshot%2520at%25202011-11-22%252019%253A05%253A43.png https://lh3.googleusercontent.com/-wUt5hDlu9RM/Tsw5uQoRnvI/AAAAAAAAY0s/7e1E-npznl0/s800/Screenshot%2520at%25202011-11-22%252019%253A06%253A25.png

Google Calendar

https://lh6.googleusercontent.com/-eg-V9_4p0oc/TsxT-eQ4UyI/AAAAAAAAY10/mZlQCoP4j2I/s800/Screenshot%2520at%25202011-11-22%252020%253A59%253A15.png

Picnik

https://lh5.googleusercontent.com/-uZrDdF1mGwY/Tsw7ciMma5I/AAAAAAAAY08/ki6RsKqMzls/s800/Screenshot%2520at%25202011-11-22%252019%253A14%253A50.png https://lh5.googleusercontent.com/-MYMLSAG-Jfg/Tsw7cQJnPsI/AAAAAAAAY04/U_lsIbHPJ2E/s800/Screenshot%2520at%25202011-11-22%252019%253A16%253A03.png

ColorMod

https://lh3.googleusercontent.com/-isY3CkCXXs4/Tsw9SigQKKI/AAAAAAAAY1Q/7rGCxSZdgwc/s800/ColourMod-1p9b.jpg https://lh4.googleusercontent.com/--qUOq-zrils/Tsw9PWXSo3I/AAAAAAAAY1I/I05V_VNvhp0/s800/Screenshot%2520at%25202011-11-22%252019%253A21%253A58.png

Hue

http://www.v-vent.com/blog/wp-content/uploads/2009/04/hue_colorselect__toshow.png

Tango Palette

http://jimmac.musichall.cz/stuff/tango/Tango-Palette.svg

GNOME 2

http://developer.gnome.org/gtk3/3.3/colorsel.png

Blender

https://lh4.googleusercontent.com/-ETY0Ft_bkqU/TsxNPT66SEI/AAAAAAAAY1s/3-XStvUWBLE/s800/blender-color.png

GIMP

https://lh3.googleusercontent.com/-yCfAs8PqTaU/Tsw2y9pjU8I/AAAAAAAAY0I/SBT2ShO0r94/s400/Screenshot%2520at%25202011-11-22%252018%253A54%253A25.png https://lh4.googleusercontent.com/-csWR8lACqOI/Tsw2zESnTXI/AAAAAAAAY0M/bD_CcOLlhoA/s400/Screenshot%2520at%25202011-11-22%252018%253A54%253A33.png https://lh4.googleusercontent.com/-BGQQV6OtJ38/Tsw2ybmawaI/AAAAAAAAYz4/OTnZPK-1QgA/s400/Screenshot%2520at%25202011-11-22%252018%253A54%253A37.png https://lh3.googleusercontent.com/-BEZQXKi21sk/Tsw2yE0GYxI/AAAAAAAAYz8/kESl_jzxBpU/s400/Screenshot%2520at%25202011-11-22%252018%253A54%253A40.png

Inkscape

https://lh5.googleusercontent.com/-FHKfxGt1HDo/Tsw2x_Ut-ZI/AAAAAAAAYzo/fE204ryVo5Q/s400/Screenshot%2520at%25202011-11-22%252018%253A56%253A03.png https://lh4.googleusercontent.com/-Of-EipZVsf0/Tsw2xwHYgUI/AAAAAAAAYzc/eCcsb6dFmag/s400/Screenshot%2520at%25202011-11-22%252018%253A56%253A09.png https://lh4.googleusercontent.com/-XOzC25r9uW0/Tsw2x-ZYL_I/AAAAAAAAYzs/sWociavWWp0/s400/Screenshot%2520at%25202011-11-22%252018%253A56%253A13.png https://lh6.googleusercontent.com/-F-ucqVEHNFs/Tsw2xhI7P_I/AAAAAAAAYzY/nGMQa6ygZuQ/s400/Screenshot%2520at%25202011-11-22%252018%253A56%253A17.png

Misc

http://dribbble.com/system/users/3080/screenshots/52783/shot_1283862201.png?1309023305

Discussion

Tentative Design

ColorSelection.png

Comments

Don't you think a long press on a swatch for the custom is a bit too hidden? Why not a small Edit button? Even on my phone long press options are very undiscoverable (Android is moving away from that in a lot of places). Also, how do you remove a custom swatch? --hbons


I guess I'm a little later to the party here, but I needed a color picker for my game engine, was writing code for it, and noticed that GtkColorSelection had been deprecated in favor of GtkColorChooser (which this page apparently describes the genesis of). From our use case, at least, this is a major step backwards.

Part of the reason we need color pickers is for art tools. For those, the "box of recently used crayons" model is almost entirely useless, so effectively the new dialog has a view the artist must click past to get to the tool they actually need, and furthermore they must realize that the plus button will get them to that tool. Perhaps there's a way of bypassing the box of crayons?

I have to say, even when just using color pickers normally I never use the crayons; invariably it's an arbitrary set of colors none of which are quite what I want, and often none of which are even remotely close to what I want. The limited number of crayons means the customizable part of the list almost invariably gets flooded out, and whatever color you currently want has been pushed off the list by the colors you were using. It's the classic "buffer too small" LRU-discard thrash problem. It's also a throwback to the days of palletized video modes (cf: Windows 3.0 and the 20 reserved "system colors" assuming you had a vga card beefy enough to run in 256 color mode), and should long since have been discarded.

In addition to that, the "advanced" interface has significantly less convenient access to the channel values. I didn't even realize you could bring up numeric controls by right-clicking until I saw the screenshots on this page and started looking for ways of making them appear. I still haven't found any way of directly entering RGB values except via the "web" hex triplet, which is not very convenient in art tools.

What I'd like is some way to open the HSVA picker directly, along with a panel of controllable combo sliders, preferably covering both the RGB values, the HSV values, the alpha and the "web" hex color. It doesn't have to be the default view, but at least for art tools there needs to be some way of invoking it directly (such that a GtkColorChooserDialog can be brought up in that mode without fiddling with its guts unduly).

The blender example is just about ideal (as you'd expect, coming from an art tool) for our needs. --ToddShowalter

See Also

Design/OS/ColorSelection (last edited 2013-12-04 19:16:52 by WilliamJonMcCann)