[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"project-24397183":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":76,"maker_in_thread":164,"shape":173,"grid":178,"attempts":305,"same_week":306,"maker_shows":37,"maker_hidden":336,"reader_version":337,"card":338},"24397183","Tailwind.ink","AI color palette generator for Tailwindcss","title","Show HN: AI color palette generator for Tailwindcss","https:\u002F\u002Ftailwind.ink\u002F","tailwind.ink","manceraio",1599461710,2020,209,52,260,3028,9,"notable","dev_tools","color palette generator","web_app",[21,24,25,26],"tailwind css","neural network colors","design system colors","curious",-0.144,{"positive":30,"neutral":31,"mixed":32,"critical":33},3,13,0,8,24,{"performance":36,"idea":38,"docs":40,"design":41,"execution":43},{"positive":32,"critical":37},2,{"positive":32,"critical":39},4,{"positive":32,"critical":32},{"positive":42,"critical":42},1,{"positive":42,"critical":42},[42,30,42,32,32,32,32,32,30,30,32,32,32,32,30,32,32,42,30,42,30,30,42,30,32,45,42,30,42,32,32,32,45,30,30,32,32,32,42,45],5,null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":59,"openness":74,"stage":75,"team_size":74},{"value":49,"source":50,"evidence":51},"Generating full Tailwind-style color palettes from one color","inferred",[52,55],{"id":53,"by":11,"text":54},"24397635","It uses two neural networks trained with the original tailwind palette. Here is the GitHub page with more info: https:\u002F\u002Fgithub.com\u002Fdmarman\u002Fdmarman.github.io",{"id":56,"by":57,"text":58},"24398531","trevyn","The intention is that colors of the same number have a similar luminance, so you can easily adjust contrast and hue independently while designing. These schemes also keep a…",[60,67],{"value":61,"source":62,"evidence":63},"Brain.js neural network","maker",[64],{"id":65,"by":11,"text":66},"24397882","yep, this line of js was rendered using Brain.js https:\u002F\u002Fgithub.com\u002FBrainJS\u002Fbrain.js#standalone-function",{"value":68,"source":50,"evidence":69},"JavaScript",[70],{"id":71,"by":72,"text":73},"24397825","sillysaurusx","It's effective, for one. I was surprised how good it looks. Color matching is a lot harder than it seems when you're generating palettes. \"AI\" may seem cheesy, but you have to…","unknown","launched",{"praise":77,"objections":91,"requests":126,"questions":139,"alternatives":148},[78],{"value":79,"source":80,"evidence":81},"Palettes look good and effective","commenter",[82,83,87],{"id":71,"by":72,"text":73},{"id":84,"by":85,"text":86},"24398486","jack_riminton","This works really well, I'll be using it on my upcoming projects :)",{"id":88,"by":89,"text":90},"24398420","swyx","i've added it to my list of color palette generation tools - sharing in case it helps someone else https:\u002F\u002Fgithub.com\u002Fsw-yx\u002Fspark-joy\u002Fblob\u002Fmaster\u002FREADME.md#color-picking",[92,102,109,116],{"value":93,"source":80,"evidence":94},"Not really AI; it is a simple algorithm or curve fit",[95,99],{"id":96,"by":97,"text":98},"24397600","hackerman123469","So what exactly is AI about it? It just looks like a common algorithm that matches colors together and not some AI that has been trained to find matching color palettes.",{"id":100,"by":97,"text":101},"24397780","Yeah but if you look at the code it doesn't really predict anything on trained data etc. It's not really a neural network either. It will always return the same output for the…",{"value":103,"source":80,"evidence":104},"Missing gray scale; default Tailwind grays are blue",[105],{"id":106,"by":107,"text":108},"24398492","rutierut","This is a lovely app but it really needs to generate grays as well. You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue)",{"value":110,"source":80,"evidence":111},"Original color not included in generated palette",[112],{"id":113,"by":114,"text":115},"24398817","RocketSyntax","Why doesn't the generated palette include the original color? Makes me lose faith.",{"value":117,"source":80,"evidence":118},"Bright yellows and perceptual brightness are hard to normalize",[119,123],{"id":120,"by":121,"text":122},"24397944","deltron3030","These kind of palettes always struggle with brighter yellows like #ffe400 because of the necessary normalization across hues to make it a full palette in first place, which of…",{"id":124,"by":121,"text":125},"24398196","HSLuv is a sphere: https:\u002F\u002Fwww.hsluv.org\u002F They took the CIELUV\u002FLCH\u002FHCL solid and compressed it into a sphere, similar to HSL on top of RGB. The L* (perceptual luminance) value is…",[127,135],{"value":128,"source":80,"evidence":129},"Add gray colors to the palette",[130,131],{"id":106,"by":107,"text":108},{"id":132,"by":133,"text":134},"24401432","pspeter3","You could also try training from other palettes but it does look really good! Adding a grays would be key.",{"value":136,"source":80,"evidence":137},"Train on additional or other palettes",[138],{"id":132,"by":133,"text":134},[140],{"value":141,"source":80,"evidence":142},"Where is AI used and how are palettes applied in the page",[143,144],{"id":96,"by":97,"text":98},{"id":145,"by":146,"text":147},"24399224","zxcvbn4038","This does pick some pleasing palettes but I’m not clear how they are utilized in the page. A quick scan of Tailwindscss docs shows a bit of discussion about naming colors and…",[149,153,157],{"value":150,"source":80,"evidence":151},"Sip app for storing palettes",[152],{"id":120,"by":121,"text":122},{"value":154,"source":80,"evidence":155},"HSLuv color space",[156],{"id":124,"by":121,"text":125},{"value":158,"source":80,"evidence":159},"Tailwind UI updated palette",[160],{"id":161,"by":162,"text":163},"24398582","nickjj","> You just can't randomly drop in a color palette without changing the default TW grays. (they are pretty blue) reply The Tailwind UI updated color palette at…",{"comments":45,"answered":30,"key":165},[166,169,172],{"id":167,"text":168},"24398616","Yes, I also notice this. The model have some flaws. I could compensate adding some extra data points, but I wanted to train with the original palette. With the release of the new…",{"id":170,"text":171},"24397846","Well, it's doing inference with an already trained neural network. Inference will return the same result always. A training dataset is not needed once a model is trained. Of…",{"id":53,"text":54},{"commenters":174,"max_depth":175,"maker_replies":45,"first_comment_mins":176,"lifespan_hours":177},25,10,84,22,[179,181,184,185,188,190,192,194,197,199,201,205,207,210,213,215,218,221,223,225,229,233,235,239,240,242,245,247,250,252,254,256,258,260,261,264,267,268,270,274,277,278,280,282,285,288,290,293,296,298,300,302],[120,32,42,180,121,32],"project\u002Fcritical\u002Fperformance",[182,32,30,183,72,32],"24398024","project\u002Fneutral\u002Fidea",[124,32,42,180,121,32],[186,32,32,187,72,32],"24398223","other\u002Fneutral\u002Fnone",[189,32,32,187,121,32],"24398280",[191,32,32,187,57,32],"24398412",[193,32,32,187,121,32],"24398852",[195,32,32,196,57,32],"24405425","commenter\u002Fpositive\u002Fnone",[198,32,32,187,57,32],"24398358",[200,32,32,187,72,32],"24398538",[202,32,30,203,204,32],"24398274","project\u002Fneutral\u002Fperformance","spectramax",[206,32,30,203,121,32],"24398347",[208,32,32,209,57,32],"24398426","commenter\u002Fneutral\u002Fperformance",[211,32,32,212,121,32],"24398952","commenter\u002Fneutral\u002Fdesign",[214,32,32,187,204,32],"24400513",[216,32,32,217,121,32],"24400960","other\u002Fneutral\u002Fdesign",[219,32,32,220,204,32],"24404211","commenter\u002Fneutral\u002Fnone",[222,32,32,217,57,32],"24405412",[224,32,30,203,204,32],"24398455",[226,32,32,227,228,32],"24400267","other\u002Fneutral\u002Fidea","mpetroff",[230,32,32,231,232,32],"24400808","other\u002Fneutral\u002Fperformance","suby",[234,32,32,187,72,32],"24401585",[236,32,42,237,238,32],"24398301","project\u002Fcritical\u002Fidea","aurbano",[56,32,30,183,57,32],[241,32,42,237,121,32],"24398553",[243,32,30,183,244,32],"24399190","dkersten",[145,42,30,246,146,32],"project\u002Fneutral\u002Fdocs",[248,42,30,246,249,32],"24400668","pottertheotter",[106,37,42,251,107,32],"project\u002Fcritical\u002Fdesign",[161,37,30,253,162,32],"project\u002Fneutral\u002Fdesign",[255,37,30,253,249,32],"24400728",[167,37,32,257,11,42],"maker\u002Fneutral\u002Fdesign",[132,37,45,259,133,32],"maker\u002Fpositive\u002Fdesign",[96,30,42,237,97,32],[262,30,32,187,263,32],"24397608","laurensr",[265,30,30,183,266,32],"24397632","avery42",[100,30,42,237,97,32],[170,30,32,269,11,42],"maker\u002Fneutral\u002Fidea",[271,30,32,272,273,32],"24398020","commenter\u002Fneutral\u002Fidea","kuu",[275,30,32,187,276,32],"24399033","k__",[53,30,32,269,11,42],[71,30,45,279,72,32],"project\u002Fpositive\u002Fexecution",[65,30,32,281,11,42],"maker\u002Fneutral\u002Fexecution",[283,30,30,284,273,32],"24398028","project\u002Fneutral\u002Fexecution",[286,30,30,183,287,32],"24398247","ggggtez",[88,39,32,289,89,32],"other\u002Fpositive\u002Fnone",[291,39,32,187,292,32],"24398830","baxuz",[294,39,32,289,295,32],"24399700","nateweiss",[297,39,32,187,89,32],"24401133",[113,45,42,299,114,32],"project\u002Fcritical\u002Fexecution",[301,45,32,281,11,42],"24398903",[84,303,45,304,85,32],6,"project\u002Fpositive\u002Fnone",[],[307,312,317,322,326,331],{"id":308,"name":309,"points":310,"category":311},"24380969","Linux Upskill Challenge",780,"learning_science",{"id":313,"name":314,"points":315,"category":316},"24422432","Mimestream",403,"productivity",{"id":318,"name":319,"points":320,"category":321},"24381700","Talk",310,"consumer_social",{"id":323,"name":324,"points":325,"category":20},"24407706","Titanoboa",279,{"id":327,"name":328,"points":329,"category":330},"24370296","typing",237,"creative",{"id":332,"name":333,"points":334,"category":335},"24363493","kiss-orm",220,"languages",false,"v2",{"id":339,"name":5,"line":6,"ai":336,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":340,"top":18,"kw":341,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":342,"url":9,"mix":343,"praise":79,"objection":93,"sub":21},24397183,-0.14,[21,24,25,26],"1310000033000030013133130513100053300015",[30,31,32,33],1794036595668]