[HN Gopher] Poline - esoteric color palette generator
___________________________________________________________________
Poline - esoteric color palette generator
Author : davidbarker
Score : 308 points
Date : 2023-02-05 07:21 UTC (15 hours ago)
(HTM) web link (meodai.github.io)
(TXT) w3m dump (meodai.github.io)
| gusfoo wrote:
| I like the fact that there is still lovely design-stuff on HN.
| Well done.
| swyx wrote:
| added to my collection of palette generators in case anyone is
| shopping around https://github.com/sw-yx/spark-
| joy/blob/master/README.md#pal...
| meodai wrote:
| you might find a few more here:
| https://www.notion.so/elastiq/Color-My-Journey-Through-the-S...
| sctgrhm wrote:
| What wonderful resource. As a brand designer, it's refreshing
| to have creative and refreshing methods of building color
| palettes. Merci !
| osantos wrote:
| Sorry to OP for plugging my own service in their post.
|
| Could you add https://ensa.io to your list? Among other things
| it's also a palette generator.
| victor106 wrote:
| This is great! Thank you
| nier wrote:
| Thanks for these resources!
|
| 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
| petesergeant wrote:
| That's a great alternative to the Color Meter, thank you
| akdor1154 wrote:
| That has the worst scrolling breakage I've seen for a very long
| time, on FF mobile at least.
| ericrallen wrote:
| I would certainly classify the mobile experience as "esoteric."
| meodai wrote:
| I tried my best to fix it (I can't actually test on non IOS
| devices, this was a vacation project). Can you let me know if
| it works for you now?
| meodai wrote:
| 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.
| meodai wrote:
| I don't have a Mobile FF to test it on. Feel free to open an
| issue on the github project and I look into it
| parasti wrote:
| 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.
| ibbtown wrote:
| I was feeling the same
| POiNTx wrote:
| Really cool, would love to have an export button for tailwind
| color schemes.
| Jiocus wrote:
| Wow, I love it.
| parhamn wrote:
| Really cool!
|
| I wish I could drag the whole line (from the middle or something)
| to experiment with moving a fixed line segment across the canvas.
| meodai wrote:
| ah thats a cool idea, il try to make this happen!
| 323 wrote:
| Has there been any research about how metamerism issues relate to
| display technologies (TN, IPS, OLED, Qdot, ...)?
|
| 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.
| bXVsbGVy wrote:
| 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).
| hosteur wrote:
| Does not work on mobile
| meodai wrote:
| can you be more specific?
| IIAOPSW wrote:
| 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.
|
| https://i.imgur.com/VmymK4K.png
| themulticaster wrote:
| 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, Friedrichstrasse 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"
| IIAOPSW wrote:
| 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.
|
| 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.
| shmerl wrote:
| 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.
| wwalexander wrote:
| 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).
|
| [0] https://github.com/wwalexander/imgscheme
| all2 wrote:
| 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. :)
| InterNautic wrote:
| Now I no longer have to summon demons to generate an esoteric
| palette!
| JyrkiAlakuijala wrote:
| 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.
| meodai wrote:
| you can, scroll down and change the color-model
| TheRealPomax wrote:
| But then it would be backed by normal science.
| mattdesl wrote:
| Or Oklab?
|
| https://bottosson.github.io/posts/oklab/
| meodai wrote:
| I wanted to keep it lightweight, but as described in the docs
| it's easy to use whatever color model
| rendaw wrote:
| 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?
| meodai wrote:
| try changing the Position Function to "linear"
| whoopsie wrote:
| Technical. Delighting. This is what I come here for. Thank you.
| notafraudster wrote:
| This tool is really cool!
|
| 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.
| meodai wrote:
| 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
| michael-ax wrote:
| stand tall, you did great wordsmithing in that intro!
| sn9 wrote:
| I found it really amusing and thought it was clear it was all
| a bit tongue in cheek.
| mostlysimilar wrote:
| I think it's lovely. Our modern software tools are far too
| sterile, I respect and appreciate your willingness to put
| some whimsy into the world.
| dahart wrote:
| 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?
| :)
| anigbrowl wrote:
| 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.
| meodai wrote:
| thank so much for this comment!
| Jiocus wrote:
| 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.
|
| -
|
| https://en.wikipedia.org/wiki/Milton_H._Erickson
| bXVsbGVy wrote:
| This is color interpolation.
|
| 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.
| meodai wrote:
| 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
| loa_in_ wrote:
| 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
| zeristor wrote:
| This looks fine on Safari on my iPhone
| bee_rider wrote:
| You are supposed to be able to play with the anchor points
| while reading the text, but it causes scrolling at the same
| time.
| meodai wrote:
| I think this should work now
___________________________________________________________________
(page generated 2023-02-05 23:02 UTC)