[{"data":1,"prerenderedAt":289},["ShallowReactive",2],{"project-1634648":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":43,"post_text":45,"what":46,"said":71,"maker_in_thread":163,"shape":173,"grid":176,"attempts":266,"same_week":267,"maker_shows":32,"maker_hidden":281,"reader_version":282,"card":283},"1634648","zetamac.com","My &lt;canvas&gt;-based, Photoshop-esque JavaScript color picker","title","Show HN: My &lt;canvas&gt;-based, Photoshop-esque JavaScript color picker","http:\u002F\u002Fzetamac.com\u002Fpicker\u002F","spicyj",1282782724,2010,73,35,23,370,7,"notable","dev_tools","color picker widget","web_app",[23,24,25,26],"javascript color picker","canvas color picker","photoshop color picker","css color","mixed",0.237,{"positive":30,"neutral":31,"mixed":32,"critical":33},8,9,1,2,20,{"execution":36,"performance":38,"idea":39,"docs":41,"design":42},{"positive":37,"critical":37},0,{"positive":37,"critical":32},{"positive":40,"critical":37},3,{"positive":33,"critical":37},{"positive":37,"critical":32},[37,40,37,40,37,37,44,37,44,37,44,40,37,37,37,37,44,44,40,40,37,40,37,44,40,37,40,40,32,37,37,40,44,32,44],5,null,{"problem":47,"audience":45,"pricing":45,"motivation":54,"time_to_build":45,"stack":58,"openness":68,"stage":69,"team_size":70},{"value":48,"source":49,"evidence":50},"Picking a CSS color without opening Photoshop","maker",[51],{"id":52,"by":10,"text":53},"1634652","I made this for the An Event Apart JavaScript 10k contest but unfortunately finished it after the deadline (but not by much!). Anyway, here it is for all of you to enjoy.…",{"value":55,"source":49,"evidence":56},"Built for An Event Apart JavaScript 10k contest, finished after deadline",[57],{"id":52,"by":10,"text":53},[59,64],{"value":60,"source":49,"evidence":61},"JavaScript",[62],{"id":63},"post",{"value":65,"source":49,"evidence":66},"HTML5 canvas",[67],{"id":63},"open_source","launched","unknown",{"praise":72,"objections":89,"requests":111,"questions":142,"alternatives":150},[73],{"value":74,"source":75,"evidence":76},"Well-done and useful for teaching or quick color picking","commenter",[77,81,85],{"id":78,"by":79,"text":80},"1634766","charliepark","This is really well-done. In terms of suggestions ... how hard would it be to turn it into a jQuery plugin?",{"id":82,"by":83,"text":84},"1634935","jswinghammer","This actually filled a need I have for showing someone who is only mildly technical how to pick colors for a feature we're testing. Thanks! It looks great!",{"id":86,"by":87,"text":88},"1634854","mynameisraj","Wow. Really incredible work. Mind posting a packer-free version so we can look at the source?",[90,101],{"value":91,"source":75,"evidence":92},"Slow performance in Firefox",[93,97],{"id":94,"by":95,"text":96},"1635152","jonah","Nice! I've been using this one: http:\u002F\u002Fjohndyer.name\u002Fpost\u002F2007\u002F09\u002FPhotoShop-like-JavaScript-Color-Picker.aspx but yours has a few more options. One thing I did notice though is…",{"id":98,"by":99,"text":100},"1635555","maushu","There is a slow down when dragging on left side on the grey, unlike on the right side. Weird performance glitch.",{"value":102,"source":75,"evidence":103},"Cross pointer does not replace arrow pointer in IE9",[104,108],{"id":105,"by":106,"text":107},"1635561","olalonde","Very nice but it would be more usable if the cross pointer would completely replace the arrow pointer.",{"id":109,"by":10,"text":110},"1637119","In Safari, Chrome and Firefox, it should. I couldn't get it to work properly on IE9.",[112,124,131,135],{"value":113,"source":75,"evidence":114},"Publish unpacked source code",[115,116,120],{"id":86,"by":87,"text":88},{"id":117,"by":118,"text":119},"1634906","paulirish","Ditto. I really wanna dig into the source. This is a perfect widget for people to learn some canvas basics from.",{"id":121,"by":122,"text":123},"1635002","benatkin","A sneak preview: http:\u002F\u002Fpastie.org\u002F1117052",{"value":125,"source":75,"evidence":126},"Add CMYK support",[127],{"id":128,"by":129,"text":130},"1635852","daychilde","It would be really cool to see CMYK support - I prefer HSL to RGB to find good colours that work together; but I prefer CMYK to even HSL It would also be cool if multiple copies…",{"value":132,"source":75,"evidence":133},"Convert to jQuery plugin",[134],{"id":78,"by":79,"text":80},{"value":136,"source":75,"evidence":137},"Keyboard arrow adjustment of values",[138],{"id":139,"by":140,"text":141},"1635513","nader","very nice! the only thing missing is adjusting the values with the keyboard cursor like in photoshop. Arrow-up: 1% more, Arrow-Shift-Up: 10% more",[143],{"value":144,"source":75,"evidence":145},"What license is the code released under",[146],{"id":147,"by":148,"text":149},"1635056","proexploit","I second the \"would like to look at the source\" and I've got a html5\u002Fcss3 button maker just waiting on a color picker. What kind of license are you going to distribute it with? I…",[151],{"value":152,"source":75,"evidence":153},"Other canvas\u002FSVG JavaScript color pickers (johndyer.name, ecritters, jquery-dropper)",[154,155,159],{"id":94,"by":95,"text":96},{"id":156,"by":157,"text":158},"1635766","bd","If you want to have it much faster, use transparent PNG image for saturation-value rectangle instead of drawing everything in canvas and then just color its background property…",{"id":160,"by":161,"text":162},"1636086","sstrudeau","Nice implementation. I spent a lot of time looking at these when I was putting together a UI that needed some color picking. When I read the headline, I thought you may have made…",{"comments":164,"answered":40,"key":165},6,[166,167,170],{"id":52,"text":53},{"id":168,"text":169},"1637128","I'm not quite sure how this would work; the color models I have currently are three-dimensional so can be specified by three pieces of information (square x, square y, bar y).…",{"id":171,"text":172},"1635011","Not really sure; I've never written a jQuery plugin before, so I'll need to look into what's required. If I have time, I'll do my best.",{"commenters":174,"max_depth":44,"maker_replies":164,"first_comment_mins":33,"lifespan_hours":175},26,37,[177,179,183,187,189,193,196,198,200,201,202,206,208,212,214,216,218,220,221,225,226,228,229,231,234,236,239,242,245,247,249,253,255,259,262],[52,37,37,178,10,32],"maker\u002Fneutral\u002Fnone",[180,37,40,181,182,37],"1634900","project\u002Fneutral\u002Fexecution","jp_sc",[184,37,37,185,186,37],"1635508","commenter\u002Fneutral\u002Fexecution","DrJokepu",[156,37,40,188,157,37],"project\u002Fneutral\u002Fperformance",[190,37,37,191,192,37],"1635791","other\u002Fneutral\u002Fnone","ELV1S",[194,37,37,195,129,37],"1635856","other\u002Fpositive\u002Fdesign",[128,37,44,197,129,37],"project\u002Fpositive\u002Fidea",[168,37,37,199,10,32],"maker\u002Fneutral\u002Fidea",[78,32,44,197,79,37],[171,32,37,178,10,32],[203,32,44,204,205,37],"1635081","maker\u002Fpositive\u002Fnone","JangoSteve",[94,33,40,207,95,37],"project\u002Fmixed\u002Fperformance",[209,33,37,210,211,37],"1635492","other\u002Fneutral\u002Fperformance","wlievens",[213,33,37,210,157,37],"1635860",[215,33,37,210,211,37],"1638326",[217,33,37,210,157,37],"1638738",[86,40,44,219,87,37],"maker\u002Fpositive\u002Fdocs",[117,40,44,219,118,37],[222,40,40,223,224,37],"1635609","maker\u002Fneutral\u002Fdocs","TimLangley",[121,40,40,223,122,37],[227,40,37,223,10,32],"1635007",[147,40,40,178,148,37],[230,40,37,178,10,32],"1635074",[82,232,44,233,83,37],4,"project\u002Fpositive\u002Fnone",[160,44,40,235,161,37],"project\u002Fneutral\u002Fidea",[237,164,37,191,238,37],"1635910","eli",[240,17,40,235,241,37],"1635543","foxtrot",[243,30,40,235,244,37],"1635424","timinman",[105,31,32,246,106,37],"project\u002Fcritical\u002Fdesign",[109,31,37,248,10,32],"project\u002Fneutral\u002Fdesign",[250,251,37,191,252,37],"1635329",10,"nailer",[139,254,40,248,140,37],11,[256,257,44,197,258,37],"1635017",12,"chubs",[98,260,32,261,99,37],13,"project\u002Fcritical\u002Fperformance",[263,264,44,233,265,37],"1634978",14,"smysore",[],[268,272,277],{"id":269,"name":270,"points":271,"category":19},"1650317","VoiceForms 4000",27,{"id":273,"name":274,"points":275,"category":276},"1646290","prldr",15,"productivity",{"id":278,"name":279,"points":40,"category":280},"1647272","Draftboard","other",false,"v2",{"id":284,"name":5,"line":6,"ai":281,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":285,"top":17,"kw":286,"maker":10,"domain":5,"tier":18,"attempts":37,"strip":287,"url":9,"mix":288,"praise":74,"objection":91,"sub":20},1634648,0.24,[23,24,25,26],"03030050505300005533030530331003515",[30,31,32,33],1793990867584]