App: Color Picker

[ScarPixel]

I wanted a way to play around with colors on actual tiles for my Terrarium project. So I made a color picker.

I now see, as I type this, that “Your topic is similar to…” @gapMindful’s color pucker. LOL WHOOPS

Made a Color Utility

While working on our game my friend and I had a lot of trouble nailing down what our color scheme would actually look like on blinks. There was a fair amount of trial and error tweaking different RGB values with the usual build delay before seeing them actually lit up. So I made this utility (color pucker ) to help iterate on different color options. The goal here is to be able to quickly tap out different colors and “easily” read them back into the “MAKECOLOR_5BIT_RGB” color constructor …

No disrespect intended. I should have checked first! Anyway, it was still fun to put this together.

GitHub - scartier/colorpicker: Utility to play with colors on a Blinks tile

Program four tiles with the sketch and put them in a configuration with one in the center and the other three touching it. They should detect this and start up.

The center tile is the “palette” where it shows the current color. The other three are the parameters. It starts in RGB mode with each parameter tile showing a red, green, or blue wedge. The initial color on the palette is a half-bright red (RGB=128,0,0)

Clicking a parameter increments its value by 1. Double clicking increments by 4. Triple clicking toggles between incrementing and decrementing. The red/green/blue wedge will go dim while in decrement mode, or bright while in increment mode.

The other five faces on the parameter represent the binary value of the parameter. The LSB of the value is directly CW from the face touching the palette. This gives you all five bits of the parameter (RGB values range from 0-31).

Triple clicking the palette tile toggles between RGB and HSB. Once in HSB, the parameters change. One has a color wheel (hue), one a gradient from red to white (saturation) and one is just white (brightness). Again, single clicking increments (or decrements) by one. In this case, “one” means “one step that results in a change on the final RGB value”. It’s done this way because some adjacent HSB values might actually produce identical RGB values. Double click offsets by four the same way.

Right now there isn’t a way to get the actual HSB value out without toggling back to RGB and reading that, and converting back.

Toggling between HSB and RGB will attempt to keep the same color in the palette. HSB-to-RGB is exact because the system uses RGB under the hood anyway. RGB-to-HSB might have some error introduced, but probably isn’t noticeable.

RGB

HSB

[gapMindful]

Nice, always fun to see how different solutions emerge to similar problems! HSB support is pretty cool, I generally think tinkering in HSB mode is a lot more intuitive than RGB, and being able to swap over to RGB to grab the value is pretty handy for the color constructor.