New Designer Color Palettes for FastLED There's a great web site for color designers

New Designer Color Palettes for FastLED
There’s a great web site for color designers called “cpt-city” (short for ‘color palette city’) that has page after page of pre-designed color palettes, for all kinds of things from art to science, maps to video games. Check it out: cpt-city

Ever since FastLED gained the ability to use color palettes, I’ve been wondering how to make the whole cpt-city color palette library available to FastLED animators. Well, today we’re releasing the first version (read: it has limitations, bugs, etc) of a tool that lets you import cpt-city color palettes directly into your FastLED animations. It’s called PaletteKnife .

Want to try PaletteKnife and grab some new color palettes?
Here’s what you’ll definitely need:

  1. A basic understanding of how FastLED palettes are used. If you want a refresher, check out the FastLED ColorPalette example, as well as FastLED Fire2012WithPalette example. Until you’ve played around with color palettes a little bit yourself, none of this is going to make sense.
  2. You’ll need Chrome or Safari. PaletteKnife doesn’t work with Firefox or IE. (Or Mosaic, Dan.)
  3. You will also need a little patience; this is all pretty new.

Full instructions on how to get started with PaletteKnife are here:
http://fastled.io/tools/paletteknife/

Basically, you browse to the color palette that you want, and click PaletteKnife (a bookmarklet) in your browser. Then you COPY the resulting code, and PASTE it into your FastLED animation source code. Palettes that you import from cpt-city will look like this in your code:

// Gradient palette “Sunset_Real_gp”, originally from
// atmospheric | Sunset Real
// converted for FastLED with gammas (2.6, 2.2, 2.5)
// Size: 28 bytes of program space.

DEFINE_GRADIENT_PALETTE( Sunset_Real_gp ) {
0, 120, 0, 0,
22, 179, 22, 0,
51, 255,104, 0,
85, 167, 22, 18,
135, 100, 0,103,
198, 16, 0,130,
255, 0, 0,160};

Once the palette is ‘defined’ like that, you can use it like any of the other FastLED predefined palettes, e.g., like this:

CRGBPalette16 myPal = Sunset_Real_gp;

Because these are all ‘gradient color palettes’ (see https://github.com/FastLED/FastLED/wiki/Gradient-color-palettes ), they are stored in ‘progmem’, and even there, take up relatively little space, typically 50 bytes or so. This means that you can easily store and access dozens of designer color palettes in one animation sketch.

And of course, you can affect color-palette crossfades using the crossfade technique described here: https://plus.googleapis.com/112916219338292742137/posts/FvLgYPF52Ma

Demo code
SO if you put it all together, you might get a sample sketch like this one, “ColorWavesWithPalettes”:

This sketch has thirty-three different designer color palettes loaded into it, renders shifting and changing waves of color, with palette crossfades, and the whole thing only takes 11K of flash (progmem).

We <3 cpt-city
The maintainer of cpt-city is aware of FastLED, and PaletteKnife, and they’ve graciously allowed me to share this tool with you, so that you can use their color palettes in your animations. Please be equally gracious in return; use as many color palettes as you like, but don’t “scrape” the whole cpt-city site, and please remember to give credit to the original site in your code. (PaletteKnife includes attribution in comments automatically for you to make this easy.)

So there you have it: a few thousand designer color palettes just a few clicks away from your FastLED animations.

Give it a whirl, and let us know what you make with it! It’s definitely “Beta”-quality, but feel free to play around, use the color palettes, and have fun with it; it basically just works.

dbe577355652c361b95a762273007d9e.png

1 Like

The biggest ‘gotcha’ that I’m hitting is that the color palettes on cpt-city tend to have a color-balance built into them that de-emphasizes the green channel a bit. PaletteKnife makes different gamma corrections for each R, G, and B channel, but even with that, I’m finding that I get the best color rendering if I don’t use FastLED’s setCorrection(TypicalLEDStrip).

One other thing that I’m finding is that lots of the palettes are de-saturated (pastel-ish) in a way that looks good on a computer screen, but looks washed out on LEDs. PaletteKnife’s gamma correction help somewhat, but I feel that one has to choose palettes with richly saturated colors for best results – but that’s just my opinion; YMMV.

And now we have all kinds of color palettes to work with everywhere – not just rainbows. I do love me some rainbows, but just think of all the beautiful other color sets we can also work with now.

Wowzers, such possibilities! :smiley:

Thank you for all of your hard work, can’t wait to try it out!

Quite simply, awesome!

Thanks Mark! Your demo code “ColorWavesWithPalettes” looks fantastic on a 24 NeoPixel ring. Plus, I have used the PaletteKnife tool to add new palettes to your PaletteCrossfade sketch and get some amazing results.

Hey great! Glad to hear you’ve got it working!
Any palettes that look particularly good?

Works and looks great on my Teensy 3.1 & APA102 lamp, thanks! I haven’t had a chance to look through other palettes on cpt-city, but hope to soon.

I’m going to try to get it working on my Spark Core Fibonacci lamp. I’ll submit a pull request if I make any progress. :slight_smile:

this is a really useful tool. Thanks.

Thanks! Please show us all what you build with it as you go!

This looks great, definitely taking it with me to the playa this year

Very nice, but the download link for the browser plugin link ist dead :frowning: http://fastled.io/tools/paletteknife/

Seems OK right now. Let me know specifically what problem you’re having and I’ll help debug it.

I try the “[PaletteKnife]” Link in Chrome. It contains this strange code:

(javascript:(function(){s=document.createElement(%27script%27);s.type=%27text/javascript%27;s.src=%27http://fastled.io/tools/paletteknife/pk2.js?v=%27+parseInt(Math.random()*99999999);document.body.appendChild(s);%7D)();),

Yep. It’s a bookmarklet, not a plug-in. Drag the link itself to your bookmarks toolbar. There’s no download. The new bookmarklet is written in JavaScript. Once it’s “installed” in your bookmark bar, it will execute in your browser when click on it there.

I’m getting weird results. http://pastebin.com/3cDJ8i9J NOTE: line 44 of the conversion from the site

Hey @Jon_Burroughs : are you seeing that problem on any other URLs? (And thanks for the heads-up)

Hrm… looks like it might be the browser truncating a large text field. I have to admit that I tested ‘a lot’ with smaller palettes, and mostly stayed away from larger ones like that (that one has 254 control points). Next time I revise the PaletteKnife code I’ll add support for larger palettes as well as the small, compact ones.

Thanks for this great tool