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.
I chose to do so because its not based in actual color science, its just made to look good. I thought I might just run with the "hey its just made to look good and its not very accurate" but I might have overdone it a bit :D
It did become clear quickly the that the unexplainable was being explained. ;) The theme is fun and endearing, so keep it even if you add hints that it is art and neither science nor magic. This demo explanation is just beautifully executed, great job, and the palettes do look good.
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? :)
No, it's great, stick with it. Intuition and feel are important when it comes to things like color spaces and math and the tendency to drain any fun or mystery out of it and reduce it to the smallest possible number of facts is misplaced.
Boring methods tend to produce boring outcomes. I found this tool much more interesting to play with than conventional palette generators.
Yeah, the prose got repetitive quickly, but the initial moments there.. half reading, half exploring the hues —which kept producing "sound" palettes— surprised me in an.. Ericksonian way. Like experiencing an illusionist perform a magic trick.
Of course it is. But all color interpolation usually happen in the color model used. What makes this one different is that the lines are not drawn in the polar HSL coordinates, but are cartesian instead. The results are quite different if you just interpolate color in HSL as you can see here: https://codepen.io/meodai/pen/GRyjQoZ
Yeah, it is obvious. But word "interpolation" isn't to be found anywhere in the text.
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.
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.
It could use CIELAB (low spatial freq use) or xyb (high spatial freq use) behind the polar coordinates for smoother and more psychovisually even colors.
I have a pet project making a logical version of the numbering/lettering/coloring system of subway lines. I've been coloring the lines by similarity of where they go. I could really get some use out of this tool. The points in color space are literally points on the map.
That looks like an nice idea in principle, however (I hope this doesn't come across too negative) I don't think using similar colors for lines if they're going to similar destinations is quite the optimal solution. In my experience, it's very important that lines which together with other lines on certain sections use visually distinct colors.
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".
Don't worry about coming off negative. New York is known for its brash directness. I also fully understand that I'm breaking all the standard design rules, but I'm also testing the theory that conventional wisdom may actually be wrong here. In fact conventional "good design" has been completely and miserably wrong on this exact subway system before.
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.
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.
It works for me on Firefox on Android. The color wheel thing is sticky while the rest of the content is not. The wheel changes to illustrate each new example as they're scrolled past.
I don't see breakage, just a questionable design decision. Seems to me the color wheel is supposed to be fixed while you scroll - and that's what happens. It even updates as you scroll.
as most people don't code on mobile phones I did not put too much effort in making it responsive. I'm happy to accept your pull-request if you feel strongly about it.
I think it's more jarring in a way because the design for mobile is actually quite nice. If I saw a desktop-like page on my phone with broken scrolling I'd be like 'meh, I'll check it on desktop'. But if I see an otherwise impeccable page that just behaves schizophrenically when I touch it, the knives come out..
Edit: to be specific, I was referring to that fiddling with the wheel also happens to scroll the text.
This isn‘t entirely on-topic, but I’ve never talked about it anywhere: to this day my favorite personal project I’ve completed is imgscheme [0], a little Go tool that lets you generate ANSI terminal color schemes based on an image (e.g. to match your wallpaper).
I'd be curious to see the solarized hue/contrast methodology applied to your color generator. I don't know go super well, but you might see a pull request in the near future. :)
I would absolutely love any contributions! Luckily Go is really easy to pick up.
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.
Metamerism is not an issue with displays. You can find at the spectral distribution of the tvs and monitors on websites such as rting and hdtvtest.
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 really like the idea of curves instead of straight lines, but the first 30% of the colors it generates in each palette are visually indistinguishable... why are the sampling points so close together?
Nice, but I couldn't find a way to see the results in some text form (list of colors or some CSS snippet?) on the site. It would make it more usable as a visual tool.
Unusable on mobile but otherwise a very cool approach to colours. Honestly I'm tired of websites that aren't bright yellow red that was so popular in 90's
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.
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.
-
https://en.wikipedia.org/wiki/Milton_H._Erickson
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.
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.
https://adriannier.de/colordoggy
Could you add https://ensa.io to your list? Among other things it's also a palette generator.
https://bottosson.github.io/posts/oklab/
https://i.imgur.com/VmymK4K.png
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.
[0] https://github.com/wwalexander/imgscheme
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.