Somewhat recently I was speaking with a certain cherry-blossom who lives on a far away tropical island where strange pocket sized monsters roam freely.
The little cherry-blossom knew that when she finally bloomed she would wear the most beautiful shade of pink the islanders had ever seen!
However, she hasn’t yet figured out what exact shade of pink to dye her petals.
Now, I thought about how I could help the little bud by running a simulation or training an artificially intelligent color bot, but I just couldn’t think of anything that could surpass a “color wall of swatches” / a gradient with some color channel plus/minus toggle buttons/sliders.
What I mean is, consider how one of Quentin Tarantino’s more bizarre characters does color:
At first glance it might seem a little intimidating but just a click on a gradient or an adjustment to a slider conveniently labeled for their RGB color channel and you can easily find just about any color you are looking for!
You can even type in a number between 0 – 255 in any of the fields or even cooler still, you can change the hex color “HTML notation” and it will change the RGB color values for you.
Don’t worry so much about the LCh sliders, they stand for Hue, Chroma & Lumanance (not in that order 😛 ) and they are a somewhat more advanced color space model that you need not concern yourself with unless you are curious, but almost everyone kinda grasps the RGB color model since most of us learn it as children so it will probably be easier for most people to use those.
The thing is, this is really unsatisfying as a recommendation to give the blossom because that’s more of a technical tool than a fun app to help you find your favorite petal color.
Now… as I said I am unsure if I can improve that process, however I am willing to take crack at simplifying it!
But, me being the one duck short of a full box of quacker jacks that I am, I couldn’t bring myself to post the simple HTML RGB color picker prototype I assembled because… it just came off as so… BASIC!
As such, I resolved to challenge myself to build a better prototype!
But I needed a set of project goals & design principles…
- Functional enough to help the cherry-blossom find her favorite pink.
- Challenge the blossom to find her color using the prototype.
- Display relevant info at the end like… the RGB values, the hex color code and what the name of the closest color with a name is.
- Simple enough that anyone could use it without being overwhelming.
- Even though it’s just a prototype, epic mega geek points if I can do it in 3D.
- Bonus points if I can make it run on mobile and desktop.
- Additional bonus points will be awarded for unnecessary (but tasteful) skeuomorphic ornamentation and chromatic theatrics.
These seem like lofty goals but I am confident that I can achieve at lease a few of them because I have already started building this prototype. 😛
I’m calling it Chroma-tron and although it’s far from finished (or even functional), I am hosting the code online using GitHub Pages (not a sponsor but I do have a free account) where you can see a live demo:
Currently it just spins and highlights the sections of the conic color model your mouse is over but the idea is that as I update the code on GitHub you will be able to follow along by previewing the updates live allowing you to see what has changed, though due to my schedule I cannot guarantee I will update the project daily but I will try to work on it as frequently as I can.
Here’s three bits of trivia about the Chromatron prototype:
- There are 48 different colors on the “Carousel of Color”.
- Each color does have a name.
- When we’re finished, our prototype will be capable of representing about 16,581,375 different colors.
One other bit of information is that if this prototype works out well, I will use similar techniques to build a 3D version of my FANN Neural Network Visualizer and depending on how successful I am and how much trouble it is, we might even be able to watch the ANN “think” in real time 3D but I still have much experimentation before we get there, anyway lets talk about a wallpaper.
Sadly, no wallpaper today because I’ve been super busy and haven’t had the time to finger paint something nice for you but that won’t always be the case. As a condolence prize you win a fully 3D animated rotating conic color model to enjoy instead! 😛
Also, if you just want the featured image, here you go:
The lines in the image remind me of iron filings in a magnetic field. 😛
And before I forget, here’s a link to the Chromatron prototype that you can revisit from time to time to see updates to the app.
Chromatron on GitHub Pages: https://geekgirljoy.github.io/Chromatron/
You can get the code in the GitHub repo.
Chromatron on GitHub: https://github.com/geekgirljoy/Chromatron
Anyway, I’m going to be kind to myself and keep today’s post short. 😛
Feel free to make suggestions about the app if you want to. 🙂
All my content is sponsored by my patrons over on Patreon who help make free software, art and tech tutorials possible.
Today I would like to thank Marcel for their generous ongoing support but as I always say, if all you can do is like share comment and subscribe, well… that’s cool too! 😉