Simplified color palette for Push user mode / custom devices

Come here to discuss Push with other users.
For tech support, please head to http://www.ableton.com/help
Post Reply
adamj
Posts: 48
Joined: Fri Mar 20, 2009 5:09 pm

Simplified color palette for Push user mode / custom devices

Post by adamj » Sun Apr 21, 2013 10:49 pm

I'm starting to update some of my Max for Live Launchpad devices to work with Push. It took a while to figure out how I want to use Push's button colors. There are potentially 128 different colors available, but most are too similar to be used effectively. I created a simplified palette for maximizing the contrast between colors and serve as a starting point for custom Push devices. I'm sharing my findings here to save other people time.

Some detailed notes:
  • I started out trying to document every possible color @ https://gist.github.com/adamjmurray/21d ... 2ef8c66a19 . That list attempts to use the same color names Ableton seems to use internally. I have renamed some of the colors in this simplified color palette here, in order to make things easier to remember.
  • MIDI values 1-4 don't follow the same pattern as the rest. You might consider MIDI values 1-3 to be dim white, white, bright white, just note this is "backwards" from MIDI values 5-59.
  • With MIDI value 5 - 59, a consistent pattern is followed:
    • bright colorX
    • normal colorX
    • dim colorX
    • colorX-colorY blend
    • bright colorY
    • normal colorY
    • dim colorY
    • colorY-colorZ blend
    • bright colorZ
    • ...
  • I'm not using any of the "blend" colors because they are too similar to others.
  • I'm not using a lot of greenish-blue colors because they are too similar. See https://gist.github.com/adamjmurray/21d ... 2ef8c66a19 if you want to use these colors (note, some of the color names are different over there since it's the non-simplified list)
  • After MIDI value 59, things get kind of random. 60 looks like a deeper orange, and might be useful to some people. Anyway, it got too confusing after value 59 so I just stopped there.
Without further ado...
_________________________________________________________

SIMPLIFIED PUSH COLOR PALETTE FOR USER MODE

For more information on how to set Push colors in User Mode, see Julien Bayle's guide @ http://julienbayle.net/ableton-push/#usermode.

The numbers below are the velocity value for MIDI note-based buttons, or the CC value for MIDI CC-based buttons (i.e. the top 2 rows above the 8x8 matrix).

Code: Select all

0   black / off
1   dark grey
2   grey
3   white

5   red [bright]
6   red
7   red [dim]

9   orange [bright]
10  orange
11  orange [dim]

13  yellow [bright]
14  yellow
15  yellow [dim]

21  green [bright]
22  green 
23  green [dim]

33  cyan [bright]
34  cyan
35  cyan [dim]

45  blue [bright]
46  blue
47  blue [dim]

49  purple [bright]
50  purple
51  purple [dim]

57  pink [bright]
58  pink 
59  pink [dim]
Last edited by adamj on Sun Apr 21, 2013 11:04 pm, edited 1 time in total.
Adam Murray
Live 9 + Push on OS X 10.10

lo.key
Posts: 360
Joined: Tue Dec 22, 2009 7:05 pm

Re: Simplified color palette for Push user mode / custom devices

Post by lo.key » Sun Apr 21, 2013 10:59 pm

good man. This is mighty useful.


adamj
Posts: 48
Joined: Fri Mar 20, 2009 5:09 pm

Re: Simplified color palette for Push user mode / custom devices

Post by adamj » Mon Apr 22, 2013 1:37 am

I am glad people find this useful :)

I spent the afternoon testing this to see if all the colors are easily-distinguishable. I tried taking some photos to share, but they don't look anything like the real thing.

Anyway, I'm happy to report this color palette looks pretty good on my Push.

There is just one problem: dim yellow and dim orange look the same to me. I will be looking for a replacement color for one or both of those. Stay tuned...
Adam Murray
Live 9 + Push on OS X 10.10

adamj
Posts: 48
Joined: Fri Mar 20, 2009 5:09 pm

Re: Simplified color palette for Push user mode / custom devices

Post by adamj » Mon Apr 22, 2013 2:35 am

If you want to build a very usable, high-contrast interface with Push, I think what I proposed above still has too many colors. I decided to go with a simpler bright/dim approach instead of bright/normal/dim. And I tweaked a few of the color choices.


To help remember an ordering of values, I've been using the acronym to remember the colors in the rainbow: "Roy G. Biv" (https://en.wikipedia.org/wiki/Roy_G._Biv). I squeezed an extra color in there, so we've got:
red, orange, yellow, green, cyan, blue, indigo, violet
Having 8 basic color choices seems good, as I can easily provide a color-selection interface along the top row or two of buttons.


Each color has a bright and dim version (AKA "HI" and "LO" as I've abbreviated below). Along with hi/lo white and black (off), that gives 19 easily distinguishable colors in total.


I don't know how many colors I need, or what I'm building with this yet, but I'm going to try this palette with my first few Push devices, and see where it leads me.

Code: Select all

BLACK = 0

WHITE_HI = 3
WHITE_LO = 1

RED_HI = 120
RED_LO = 7

ORANGE_HI = 60
ORANGE_LO = 10

YELLOW_HI = 13
YELLOW_LO = 15

GREEN_HI = 21
GREEN_LO = 23

CYAN_HI = 33
CYAN_LO = 35

BLUE_HI = 45
BLUE_LO = 47

INDIGO_HI = 49
INDIGO_LO = 51

VIOLET_HI = 53
VIOLET_LO = 55
Adam Murray
Live 9 + Push on OS X 10.10

lo.key
Posts: 360
Joined: Tue Dec 22, 2009 7:05 pm

Re: Simplified color palette for Push user mode / custom devices

Post by lo.key » Mon Apr 22, 2013 5:05 am

i think both approaches have merit. There's some room for a subtle range of colours if you step away from the idea of the pads as separate controls and more as pixels of a larger surface. Like the idea of presses adding drops of colour to the surface, then slowly fading out, and using some metric of the colour state of the entire surface to control midi output.

But yeah, thanks for highlighting the primaries! They'll be more universally useful!

adamj
Posts: 48
Joined: Fri Mar 20, 2009 5:09 pm

Re: Simplified color palette for Push user mode / custom devices

Post by adamj » Tue Apr 23, 2013 1:47 am

lo.key wrote:i think both approaches have merit.
Absolutely! Since I'm looking at porting some stuff I did for the Launchpad, right now I'm happy to have just a few more colors that are easily distinguishable. I may be too hung up on this at the moment. The super-simplified hi/lo palette I just posted may be too limiting. What happens when I want to start doing stuff with velocity/pressure sensitivity? I don't think 19 colors will cut it...

It's a trade-off: more color choices, or a few easily distinguishable colors? How you make this trade-off really depends on the device / application you are making.
Adam Murray
Live 9 + Push on OS X 10.10

Deep Symmetry
Posts: 3
Joined: Mon Jun 01, 2015 2:56 pm

Re: Simplified color palette for Push user mode / custom devices

Post by Deep Symmetry » Mon Jun 01, 2015 4:19 pm

I’m working on supporting Ableton Push as a control surface for Afterglow, an open source lighting control system, and I came across this page while trying to figure out how to color the pads. It was helpful, and I would like to contribute some additional discoveries I have made. I wanted to be able to approximate any color on a pad, so to get a deeper understanding of the palette, I rendered the first sixty note colors to the grid, starting at the bottom left. Doing so revealed something rather intriguing:

Image

As others have described, the colors are in related groups of four, starting with a grayscale ramp from black to white. There has been some confusion about the nature of the first color in each subsequent group, including speculation that they might be a blend between the current and following group. But when laid out like this, it is evident that the first color is a desaturated (lightened, blended with white) version of the group color. Then we have three fully saturated versions of the color, in maximum, medium, and low brightness.

But what also struck me was the arrangement of the hues. The first group is red. Then it moves through the rainbow. It seemed that if we analyzed color in the hue-saturation-lightness color space, it might be possible to algorithmically translate any color to the best matching note value. And indeed, this turns out to be the case! My attempt at coding this up has allowed me to take any incoming color object, and come up with a good approximation of that color on an Push pad. The source is here but as an aid for people unfamiliar with Clojure (or Lisp-like languages), here is the algorithm in pseudocode:
  • If the lightness of the color is less than 3, consider it black, and send a velocity of zero. (Lightness ranges from zero, black, to 100, pure white. For pure, saturated colors, the brightest you can get is a lightness of 50, after that point they start to desaturate and turn white.)
  • If the saturation of the color is less than 20, consider it grayscale, and send a note value from the first chunk, depending on the lightness. For lightness < 15, we send 1, the dark gray. For lightness from 15—37, we send 2, the medium gray, and for lightness >= 37, we send 3, white.
  • Otherwise, we treat it as a color, and figure out which color chunk it belongs in by dividing the hue by 360 (the rainbow is mapped onto a hue circle with red at zero), multiplying by 13 (the number of color chunks the pads support) and discarding the fractional part. That tells us which color group to use, but we need to multiply by four (the size of each color group), and add 4 (to skip the first, grayscale group). That gets us the note value of the first color in the correct color group, and now we just need to account for the lightness.
    • If the lightness is > 60, we use the desaturated (whitened) version of the color, and add nothing.
    • If the lightness is between 37 and 60, we send the brightest of the fully-saturated versions of the color, by adding 1.
    • If the lightness is between 15 and 37, we send the medium brightness fully-saturated version of the color, by adding 2.
    • If the lightness is less than 15, we send the dim fully-saturated version of the color by adding 3.
I was delighted to find that Ableton had provided such a useful palette in the Push, and look forward to making use of it! I hope this information can help others, as well.

leida
Posts: 83
Joined: Mon Nov 05, 2012 10:34 am
Location: Grenoble, French alps

Re: Simplified color palette for Push user mode / custom devices

Post by leida » Wed Jun 03, 2015 8:11 pm

Hye

Sorry if i'm not at the right place, but with all these questions of colors...
Well, i'm searching for a tip to color the Push buttons when in User mode.
Is it difficult ?
Thanks by advance

fishmonkey
Posts: 4208
Joined: Wed Oct 24, 2007 4:50 am

Re: Simplified color palette for Push user mode / custom devices

Post by fishmonkey » Thu Jun 04, 2015 12:07 am

^^^ try scrolling up ^^^
badbrainz wrote: I'm a drummer, so I'm already at an intellectual disadvantage here

Deep Symmetry
Posts: 3
Joined: Mon Jun 01, 2015 2:56 pm

Re: Simplified color palette for Push user mode / custom devices

Post by Deep Symmetry » Tue Sep 08, 2015 7:13 pm

I haven’t had a chance to test this yet, but it looks like there is a SysEx message that you can use to specify the precise RGB values you want a particular pad to light up with! Here is a Max patcher which uses it to turn your Push into a very low-resolution video monitor with your web cam. Once I get it translated into Clojure, I will post a link (and the pseudo-code explanation) here too.
https://cycling74.com/wiki/index.php?ti ... g_Oct13_03

Deep Symmetry
Posts: 3
Joined: Mon Jun 01, 2015 2:56 pm

Re: Simplified color palette for Push user mode / custom devices

Post by Deep Symmetry » Wed Sep 09, 2015 2:04 am

The Max Patcher I linked to in my preceding post works! You can get any RGB color you want on a pad using the following SysEx message:

240 71 127 21 4 0 8 pad 0 rHi rLo gHi gLo bHi bLo 247

Where pad is a number identifying the pad, which you can calculate by multiplying the row by 8 and adding the column; pad 0 is at the lower left, and pad 63 is at the top right.

rHi and rLo are the 4-bit nibbles that make up the 8-bit red value you want. (MIDI doesn't allow all possible byte values inside a SysEx message, so this kind of splitting is necessary to send and 8-bit value; for example, the value 247 would end the SysEx.) In other words, divide the red value by 16 (ignoring the remainder), and send that as rHi, and the remainder (or the the 8 bit red value ANDed with 15 if that is easier for you to calculate) goes in rLo.

Similarly gHi and gLo are the high and low 4-bit halves of the 8-bit green value of the color you want, and bHi and bLo the halves of the blue value.

I am so psyched to have learned about this! :o

adamj
Posts: 48
Joined: Fri Mar 20, 2009 5:09 pm

Re: Simplified color palette for Push user mode / custom devices

Post by adamj » Wed Sep 09, 2015 6:59 pm

Good info, Deep Symmetry. Thanks for sharing! I'll give this a try next time I'm hacking on my Push.
Adam Murray
Live 9 + Push on OS X 10.10

Post Reply