Color picker improvements


#1

Mostly, this post contains usability improvements modeled after Flash/other professional apps:

  1. The active color (and the color of the selected object, if any) should update after clicking on a color swatch, without having to click “choose”.
  2. If you mouse over the stage while the color picker is open, the cursor should switch to an “eyedropper” graphic. When you click, the active color will be replaced with the color of whatever shape you clicked on. Unlike the current behavior, the color picker will stay open and that object will not be selected.
    Note: With this feature, users can rely less on custom swatches, since then they can just choose a color they’ve already used right from the stage.
  3. The color palette defined in wick/Interfaces.Toolbar.ColorPicker.js is pretty heavy on dull, ashy colors. For example, it doesn’t come with a single good bright green. The WebSafe216 palette is a good place to start and it has a fairly good range.
  4. If you add more colors, you’ll need to use space more effectively in the color picker. Try making the swatches smaller and closer together to fit more in there. (Also, you can clear that small bit of wasted space caused by the white line between the swatches and the HSL box.) Mockup (imperfect): image
    (I turned the color list on its side so more of the Stage is visible for the eyedropper thing)
    Compare the color picker for Animate CC:
    image
  5. “Pin custom swatches” Feature. Maybe you can right-click on a “Recent” swatch (the ones autogenerated whenever you choose a new color) to “pin” it to a list of permanent custom swatches underneath it.

#2

Nice that you posted this now - Luca and I are doing some color picker work this week because Luca figured out how to get a pressure sensitive brush working… Since we’re going to have a nicer brush, it’s about time the toolbar options for smoothness/thickness/etc. and the color picker get a revamp.

I’m thinking of switching to this library, it seems to have a lot more customization options (see the github repo)


#3

@kryptot7 Love that pin custom swatch feature. Also totally agree with the functionality improvements you listed!