7 ms·
Poline – esoteric color palette generator
- akdor1154 4y agoThat has the worst scrolling breakage I've seen for a very long time, on FF mobile at least.
- ibbtown 4y agoI was feeling the same
- ericrallen 4y agoI would certainly classify the mobile experience as “esoteric.”
- meodai 4y agoI 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?
- McBeige 4y agoIt 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.
- ericrallen 4y agoTo be clear, it’s still a super neat project. 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.
- parasti 4y agoI 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.
- meodai 4y agoI 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
- meodai 4y agoas 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.
- akdor1154 4y agoI 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.
- meodai 4y agoshould be fixed now right?
- Jiocus 4y agoWow, I love it.
- whoopsie 4y agoTechnical. Delighting. This is what I come here for. Thank you.
- loa_in_ 4y agoUnusable 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
- swyx 4y agoadded to my collection of palette generators in case anyone is shopping around https://github.com/sw-yx/spark-joy/blob/master/README.md#palette-generators https://github.com/sw-yx/spark-joy/blob/master/README.md#pal...
- nier 4y agoThanks 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 https://adriannier.de/colordoggy
- petesergeant 4y agoThat's a great alternative to the Color Meter, thank you
- victor106 4y agoThis is great! Thank you
- meodai 4y agoyou might find a few more here: https://www.notion.so/elastiq/Color-My-Journey-Through-the-Spectrum-2cfd8dc540474b1c9ef381b9a3bc0f8e https://www.notion.so/elastiq/Color-My-Journey-Through-the-S...
- sctgrhm 4y agoWhat wonderful resource. As a brand designer, it's refreshing to have creative and refreshing methods of building color palettes. Merci !
- osantos 4y agoSorry to OP for plugging my own service in their post. Could you add https://ensa.io https://ensa.io to your list? Among other things it's also a palette generator.
- JyrkiAlakuijala 4y agoIt could use CIELAB (low spatial freq use) or xyb (high spatial freq use) behind the polar coordinates for smoother and more psychovisually even colors.
- mattdesl 4y agoOr Oklab? https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- meodai 4y agoI wanted to keep it lightweight, but as described in the docs it’s easy to use whatever color model
- meodai 4y agoyou can, scroll down and change the color-model
- TheRealPomax 4y agoBut then it would be backed by normal science.
- rendaw 4y agoI 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 4y agotry changing the Position Function to "linear"
- notafraudster 4y agoThis 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.
- bXVsbGVy 4y agoThis 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 4y agoOf 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 https://codepen.io/meodai/pen/GRyjQoZ
- bXVsbGVy 4y agoYeah, 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.
- 323 4y agoHas 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 4y agoMetamerism 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).
- wwalexander 4y agoThis 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 https://github.com/wwalexander/imgscheme
- all2 4y agoI'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. :)
- wwalexander 4y agoI 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.
- InterNautic 4y agoNow I no longer have to summon demons to generate an esoteric palette!
- IIAOPSW 4y agoI 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 https://i.imgur.com/VmymK4K.png
- themulticaster 4y agoThat 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". [1] PDF can be downloaded at https://www.vbb.de/en/driving-information/maps/ https://www.vbb.de/en/driving-information/maps/ - select "S+U-Bahn in Berlin - suburban trains and underground"
- IIAOPSW 4y agoDon'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/massimo-lella-vignelli-design-is-not-art-10.jpg 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-city-subway-map-large.jpg 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.
- hosteur 4y agoDoes not work on mobile
- meodai 4y agocan you be more specific?
- parhamn 4y agoReally 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 4y agoah thats a cool idea, il try to make this happen!
- gusfoo 4y agoI like the fact that there is still lovely design-stuff on HN. Well done.
- shmerl 4y agoNice, 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.
- POiNTx 4y agoReally cool, would love to have an export button for tailwind color schemes.