Poline – esoteric color palette generator
meodai.github.io
meodai.github.io
But I don't really understand why the text and framing is written is written as if it was supernatural ("esoteric", "mystical", "witchcraft", "magical", "otherworldly", "sorcerer", "summoning", "the power to shape and mold lies in your hands", "the choice is yours", "magic", "uncharted territories", "let not your journey end here", "mystical journey", "arcane knowledge of the ancients"). The first few times it felt a little bit cheeky but by the end it felt like a TikTok about manifesting wealth through your horoscope.
Paradoxically, the one thing I wanted to know that would have been an opportunity for flavour -- how it "def[ies] conventional color science" -- isn't actually clarified in the text.
There are others js libraries that does the same thing, but they lack a good interactive tools.
But, unlike others tools, this tool exposes the "xyz coordinates". This is exotic.
IMO, having something like "color interpolation in HSL Cartesian space" would make it crystal clear what the tool is about. Also, "interpolation" is the keyword I'd use to search for this on Google. So, would likely be an SEO.
Unlike OP, I think it is clever to use words like "enigmatic", "mystical", etc. Not my particular taste, but it is a good branding.
About the transformation. Most libraries can interpolate on CIE's XYZ-D65, but I'm not sure how this would compare with doing operations at Cartesian coordinates of others colorspaces.
The widget from codepen also looks great. You are really good at designing color widgets.
-
Your page doesn’t talk about it, but there is something about using a straight-ish line through a color space that tends to generate good palettes. Do you have a working artistic theory? I don’t know why it works but I’ve used that idea for many years. It may be about reducing the dimensionality, or may be because it imposes an average hue to the entire image, I don’t know. I’m wondering if you’ve thought about adding thoughts from an artistic perspective on what makes a good color palette, and how to best get one out of Poline, given various color goals one might have.
A super interesting problem IMO is generating good looking color palettes of maximally distinct colors. “Good looking” tends to require color proximity, and “maximally distinct” tends to require the opposite: distance. How can I get both? :)
Boring methods tend to produce boring outcomes. I found this tool much more interesting to play with than conventional palette generators.
Speaking of «in a hurry», I wrote a tool that among other things allows you to quickly double-press a modifier key to copy the hex value of a color to the clipboard.
Could you add https://ensa.io to your list? Among other things it's also a palette generator.
I'd say that the color primarily serves as a visual aid that does not depend on passengers understanding the local language or remembering the name/number of the line. And color serves an important role in interchange stations, where it aids navigation by providing visual cues where you should go.
A nice example of this is the London Underground, where visual cues using the line color are used extensively. In Green Park, there is a mosaic on the walls between the grey Jubilee line and the blue Piccadilly line. The tile pattern smoothly changes between grey on the Jubilee side and blue on the Piccadilly side. If you look at a Tube map, the line colors are all sufficiently distinct so that you're never confused which line is which in busy parts of the map.
On the other hand, IMO a negative example of line colors would be the Berlin S-Bahn. Have a look at the map [1] and tell me whether you have an easy time differentiating S41/S41/S45/S47 as well as S3/S5/S7/S9 (as well as U2/U7/U8). They all use extremely similar colors. If you're new to the system, you can't just remember to use the "blue line", as there Alexanderplatz, Friedrichstraße and Charlottenburg each have three "blue lines".
[1] PDF can be downloaded at https://www.vbb.de/en/driving-information/maps/ - select "S+U-Bahn in Berlin - suburban trains and underground"
Its worth it to compare my map to two others. The first is the "good design" Vignelli map from the 70s. It is the polar opposite of mine, making every individual service as distinct a color as possible like you suggest.
https://mymodernmet.com/wp/wp-content/uploads/2021/01/massim...
The second is the map that actually ended up in use, which I'll call the Hertz map.
https://edmidentity.com/wp-content/uploads/2016/05/new-york-...
The designers absolutely love the Vignelli map. They teach it in the schools. But it was an abject failure. It was replaced after a few short years. The Hertz map has been in place for over 40. The Hertz map is somewhat similar to what I have done, but it groups the lines into trunk colors based on which avenue they run along in Manhattan. On the surface you might think this is confusing. Forget about similar shades, there's up to 4 different services sharing the same color and they might go in completely different directions. For example, the yellow lines start in Coney Island and then split and rejoin twice before finally making a 3 way split around Queens. Yet its never a problem. You will never hear people complain that they can't read it because they're all yellow. In scientific tests where people were asked to plan paper trips, the Hertz map outperformed. That's why it was selected in the end.
I've gotten the reaction "this will cause confusion" many times. But the everyday use of the existing map shows that in some circumstance the conventional wisdom is wrong and its ok to make lines the same or nearly the same color. I think the circumstance has to do with the similarity of the services. It is ok to make the colors hard to distinguish if the services themselves have very little distinguishing them. This is very different from your Ubahn example where the three blue lines are unrelated with each other. In my map, you can get on any blue line from Manhattan and they will all meet back up again at Broadway junction. They take parallel paths, and there's at least one other service crossing perpendicular along the way. For a significant fraction of the journey, it doesn't matter which blue you get on. That distinction only matters in the periphery. Same goes for green and red.
IMO there's more value in showing "these all go in the blue direction" than there is in making sure people never confuse the wrong shade of blue.
This form of design is at least partially dependent on the layout of the subway in NY. I don't know if I could reduce other systems like the Ubahn so effectively. I've designed it so that you don't need to memorize the whole system, just a few key rules. The service names are a 2 number or 2 letter combination based on where they go on the top edges of the map and where they go on the bottom edges (still in progress). Just knowing that's how they are named is enough to figure out any service you see.
The layout of New Yorks subway is closely tied to its street grid system. It lends itself to highly compressible and organized patterns in a way that European cities do not. That's why the stylized diagram transit maps of London won over there, but the NY map remains geographical. Hiding away the streets doesn't reduce map complexity when the streets weren't complicated in the first place. There's a ton of value in showing how many blocks away to things.
The drilling feels smoother than I remember, but I could be misremembering.
It might help to put some sort of solid or mildly transparent background behind the color wheel so that when content scrolls up it appears to disappear behind the color wheel instead of being right there behind it competing with it visually.
Edit: to be specific, I was referring to that fiddling with the wheel also happens to scroll the text.
I definitely didn’t give deep enough into proper color theory for my algorithm—I just use the Euclidean distance between (R,G,B) colors to determine similarity. I’d also like to add checks for contrast/legibility between colors maybe.
It seems to me that color spaces (CIELAB, ...) totally ignore this aspect. We've all experienced how an OLED screen is different from a TFT one.
And things such as "viewing condition" and "chromatic adaptation" are part of the color appearance model (CAM). The color spaces assume some reasonable value for those. For instance, a color space used for cinema, assumes dark viewing condition (I don't remember which one).
Also, many TVs and most Apple devices, have sensors to collect environment light, and applies color correction to best represent the color accuracy based on the environment.
But I agree, color science lacks data.
I don't think many people realize that most of the color science theory is based on a color matching experiment done with 1959, without lasers, with a very small biased population (european, males for genetic reason).
I wish I could drag the whole line (from the middle or something) to experiment with moving a fixed line segment across the canvas.