11 ms·
Show HN: A Color Picker I Made
- Vanderson 8y agoThis is really neat. One suggestion, make the two circles in the color wheel that you can drag slightly different (at least). Maybe just line thickness, shape, filled/open something to note that dragging one will produce the opposite results from the other. Maybe make only one of them draggable? I know it doesn't really work this way, but I only figured out by accident that dragging to the orange/blue vs blue/orange produced totally different results.
- mikekij 8y agoThis looks awesome! Congrats on launching it. First: Don't get bogged down by random HN commenters' feature requests. Second: I have a feature request. I'd love a native version for Mac OS with a magnifying glass thing that allows me to select a color somewhere else on my screen, and then suggest complimentary colors. I'd gladly pay for that!
- asnrk 8y agoIf you'll accept the step of copying the values into the tool that figures out the complementary colors for you, macOS comes with Digital Color Meter, which will tell you the color of anything on your screen.
- floatingatoll 8y ago(It’s hiding in the Utilities folder if you can’t see it in Applications.)
- leesalminen 8y agoI just do cmd+space and type color.
- rovr138 8y agoCreate a shortcut for it. I have it set to CMD + Shift + C. Great to have it easily accessible
- meko 8y agoThis is why I have no side projects, yet. Most problems have already been solved.
- sh87 8y agoCommentbait, I smell it but still will say this.. A good side project takes one or more known solutions and applies it to a niche. There's endless niches out there if you stand still and squint a bit.
- markdown 8y agoTry https://sipapp.io/ https://sipapp.io/
- sbr464 8y agoI keep contrast (usecontrast.com) open as a picker and accessibility testing tool, but I agree, adding recommendations based on color theory, etc would make it even more usable. It has a few hotkeys that work well and is minimal enough to make the startup list.
- jjeaff 8y agoA quick and dirty way to make that ability easier (easier than creating a native app at least) would be to just offer a quick "paste or upload image here" section that then would allow the user to use a color picker on said image. Then one could take a quick screenshot of their screen and just paste it into the web app.
- soheil 8y agoYou just requested a random feature which contradicts the point you made in the previous sentence. Also why are you bringing money into this? And are you saying you wouldn't pay for this awesome tool as is?
- coldtea 8y ago>You just requested a random feature which contradicts the point you made in the previous sentence. 1) Requesting a feature immediately after was intended as a joke. 2) It still doesn't contradict it. The first point merely advices the programmer to "not get overwhelmed by feature requests". Such an advice is not contradictory to making one from a formal logic perspective.
- tenaciousDaniel 8y agoVery nice work! [whispers] colorsupplyyy.app and colorsupply.app is available for purchase :)
- uryga 8y agolooks nice! unfortunately when I try to select a color from the wheel, the line switches to a horizontal position (dark blue o----o bright orange) and gets stuck there :( [Android 7.1.2, Chrome 73]
- petersonh 8y agoLove it :-) Having the colour applied to things right away is really helpful, great idea!
- maybeiambatman 8y agoLooks awesome! Bookmarked. As someone who loves hacking together projects at times, I can see myself using this to take out the initial headache of picking color schemes.
- umvi 8y agoThe great thing this color picker provides that others don't is live-updating icons utilizing the colors. Awesome job!
- deleted 8y ago[deleted]
- desireco42 8y agoThis is perfect, thank you! I would add HSL colors and ability to download color scheme.
- akamaka 8y agoThis is suprisingly helpful. I’ve seen all these color systems before, but this site demonstrates the design possibilities they create much better than any color guide I’ve used before.
- berry_sortoro 8y agoPremium for a color picker, hell no!
- ediardo 8y agoGood job and Good luck. Thanks!
- cr0sh 8y agoI have to say I like this - great design, easy to operate, etc. I think something needs to be done to better indicate "other wheel selections" (ie - to move to "square" or "analogous", etc) - while I discovered it fairly quickly, it wasn't as intuitive as I think it could have been. Beyond that it's a great tool, and the pricing for the more advanced version is decent. That said, it wouldn't take much for someone to build something like this into say, a VSCode plugin or whatnot, so I'm curious what your plans are to stay ahead of that possibility?
- mt3ck 8y agowould say those are generally two different markets user bases no? Not everyone who could leverage color pallets has to write code.
- mtgentry 8y agoThere are other picker tools that are similar to mine and each of us has a unique take on the problem. It doesn’t worry me. If someone wants to make their own version that’s cool. Thanks for the feedback!
- bb88 8y agoYeah, I didn't realize this too until I read the first comment. I would have put the arrows down where "complementary" and "analogous" and made them more visible rather than elongated and thin.
- rajangdavis 8y agoI think it would be nice to have the other wheel selections available kind of like navigation tabs that show what state you are in with the same left right controls present. I don't think it would make the UI busier but it would look a little funky on mobile where I think the current set up might be a bit more advantageous. All in all, this is really cool! I've used a few color pickers with color brewer (http://colorbrewer2.org/ http://colorbrewer2.org/) being the most advanced. This seems to be right in the middle of simple and advanced color selections which is pretty sweet.
- onychomys 8y agoI like many things about it, but I think having it default to a red-green complimentary combo is a little iffy. Those of us who are colorblind (and we're 12% of the male population, and 0.5% of the female!) will have a lot of trouble seeing it clearly. Maybe just have it start on square instead? Or maybe have the line start out horizontally between blue and orange instead of vertically between red and green?
- adtac 8y agoOfftopic, but why is there such a disparity in the percentage of colour blind people between the male and the female population?
- hayksaakian 8y ago"It is sex-linked: genetic red-green color blindness affects males much more often than females, because the genes for the red and green color receptors are located on the X chromosome, of which males have only one and females have two. Females (XX) are red-green color blind only if both their X chromosomes are defective with a similar deficiency, whereas males (XY) are color blind if their single X chromosome is defective.[12]" via https://en.wikipedia.org/wiki/Color_blindness#Red-green_color_blindness https://en.wikipedia.org/wiki/Color_blindness#Red-green_colo...
- acomjean 8y agoInteresting. Because one of the X-chromosomes is inactivated in female cells (which have XX). Otherwise it would lead to over expression of X-chromosome Genes (well most anyway).[1] [1]https://ghr.nlm.nih.gov/chromosome/X https://ghr.nlm.nih.gov/chromosome/X (There are some genetic disorders where an organism have 3 of one chromosome. Trisomy its called.) Which X is inactive is somewhat random however so it seems that it reduces the instance of color blindness.
- e98cuenc 8y agoColor blindness is due to a defective gen that express one of the three kind of cones in the eye. Usually the cones more sensitive to middle length photons (M ~green) become closer to the cones more sensitive to long length photos (L ~red) and thus they can only discriminate colors in between thanks to the other short length cone (S ~blue), but the S cones are almost blind to these colors. The thing is, these genes are in XY chromosome in males, and thus we only have a single copy for each of these genes. Women have two copies of each gene, so even if one goes wrong, the remaining one can express the cones. Funny thing is woman with a defective gen usually just goes unnoticed, but the defective gen in some cases can express a fourth kind of cone with a peak sensitivity between M and L cones, allowing them to perceive colors that usual humans can't perceive.
- ionforce 8y agoIncluding the example images was GENIUS. Love it.
- mrapogee 8y agoAre the examples images supposed to change with the color picker? They seem fixed on red/green, otherwise looks awesome
- mrapogee 8y agoWorks in edge, but not in chrome for me.
- ericschn 8y agoWorking in Chrome 71.0.3578.98 for me.
- BeefySwain 8y agoWorks in Firefox 66
- notafrog 8y agoGreat job! This is the first time I'm able to find a nice color pattern so easily. The sample images are very helpful.
- jv0010 8y agoso simple to use and love how u have an example
- kevingrahl 8y agoI'd suggest adding some sort of message for people with JavaScript disabled. Currently it just looks weird when JS is disabled.
- esilver 8y agoIt's gorgeous and easy to use. I especially appreciate inclusion of demo images and hex codes for easy copying. I'll probably refer to it from now on instead of googling "complementary colors" as I've been doing. Well done!
- MayeulC 8y agoFWIW, I've been using the one in DuckDuckGo's instant answers (search for "color picker" there), and it's been working great! This one is nicer-looking for palettes, though, and has more functionalities :)
- ekun 8y agoJust a heads up...on your homepage when hovering over the artist's name "Anastasiia Andriichuk" the highlight seems to add padding on each side which makes the line break in between their first and last name and the page gets jumpy. This is using chrome on my laptop.
- tunnuz 8y agoIt's beautiful, really cool!
- anonytrary 8y agoThis is design porn at its finest. Absolutely beautiful! What tools did you use to build this?
- mtgentry 8y agoThanks! It’s messy under the hood. The first version was all js, this latest version is Rails & js.
- ridicter 8y agoThis feels like astroturfing since more than half the comments are "cool"...
- mtgentry 8y agoIf only I had the money and the ability to plan...
- winrid 8y agoVery nice. Good idea on the example images. I may actually buy premium for some projects.
- deleted 8y ago[deleted]
- mholt 8y agoI think you should charge more for Premium, especially for the top two plans. Also -- really sell it. I had to dig for a while to find the upgrade plans and what they get me.
- chewmieser 8y agoWonderful design. Example images are an awesome touch, quite useful! Feedback for mobile safari - it would be helpful if the wheel was fixed to the top of the window (position:sticky?). Not the end of the world to scroll, but there’s quite a bit of back and forth as-is.
- bigmanwalter 8y agoawesome!
- arendtio 8y agoI like the usability with the arrow keys and the instantly changing examples, but the results do not convince me. You might want to take a look at the adobe color picker [1] to get some inspiration for other modes. [1] https://color.adobe.com https://color.adobe.com
- mtgentry 8y agoThanks for the feedback everyone! If anyone is looking for a senior visual/product designer here’s my portfolio: http://masongentry.com http://masongentry.com
- tmountain 8y agoLove this, I'm always digging around on the usual suspect website trying to find good themes for my apps. I'll definitely be using this in the future. Thank you for sharing!
- ineedtosleep 8y agoAmazing work. Thank you for sharing! I've been looking for a color palette generator like this for the past week and this is exactly what I needed.
- klhugo 8y agoThis is the most practical colour picker that I've seen. Puting the sample icons using the colours we select makes all the difference. Great work!
- elagost 8y agoThis is fantastic, and gets a lot of little things right. Just piling on at this point, but you can never have too many compliments. I really like the little added touches like keyboard navigation and the quick, bouncy animations. Makes it feel really friendly. Super cool! I'm bookmarking this. In the future would there be a way to enter a hex code and have the system work off that? That's the only thing it's missing (for me).
- anitil 8y agoI've been on it for ~35 seconds and I've already learnt: square, complementary, split complement, triad and analogous colors. Wonderful!
- snissn 8y agodeep linking would be great
- tszymczyszyn 8y agoQuite nice. So far I've been using http://paletton.com/ http://paletton.com/ - not identical, but similar functionality.
- Adamantcheese 8y agoI was about to comment, Paletton is far nicer with the amount of color choice (every color!), but it lacks the examples for simple icons and gradients. The best combination would be to use both together.
- sbr464 8y agoBeautiful, original work. Thanks for sharing.
- alternize 8y agogreat color picker, really love the preview images. the only thing missing for me is to have the possibility to specify a specific color in hex as a starting point: most of the time when I'm looking for additional colors for a project, the main color is already pretty much set.
- caprese 8y agoWhy does "check out premium" go to a memoir of their design career - with a call to action basically hidden at the bottom - instead of straight to the subscription page? I read the first two sentences, then scrolled a little faster trying to figure out if they were going to post a patreon link for basically donations, and then scrolled faster like what even is this, all to find a normal expected subscriptions page. WTF?
- anthonyscompton 8y agoI think this is a really attractive and useful tool. Great work! I'm not really the target market, I don't think. But my first thought as I was playing with it was "can I upload my own images/logos and have the colors displayed on my stuff?" So, like the top comment said--don't get bogged down with random suggestions. But, here's mine: If a premium user could upload their own SVG (or multiple) that adhere's to some kind of standard that lets you style it up with the colors like you're doing with the preset ones, that might be useful for visualizing the colors on their brand.
- dflock 8y agoAppears to have collapsed under the load :(
- duxup 8y agoThere are a lot of color pickers out there. This one is pretty cool. I wish I could feed it a color and get options from there.
- tidwall 8y agoVery nice!
- asdf333 8y agothis is awesome!!! nice work!!
- WrtCdEvrydy 8y agoAwesome, just put together a movie poster using the orange / blue combo.
- dupouy 8y agoBeautiful! Congrats on shipping it. And you're right about the Square/Complementary/Analogous/etc. selection mechanism. Your target audience is smart enough to figure it out in seconds.
- FailMore 8y agothis is such great work - good job and thank you
- time0ut 8y agoThank you. This is very pleasant to use.
- ficklepickle 8y agoThis is really great. I mostly do front-end web dev but I'm terrible with colours. Until now I've used adobe's color wheel thing even though I hate it's buggy guts. This looks like it will be a drop-in replacement for me. Bonus points for making a good responsive layout. I haven't fully evaluated it, but it seems functional from my phone so you beat adobe küler or whatever it is called. Edit: spoke too soon. First colorpicker broke on 2nd interaction. Brave on android.
- matt_j 8y agoNice app mate, I particularly like the elements that show the colors used with a practical example.
- wawhal 8y agoThis is amazing! A boon for people who cannot visualise colors in the head (people like me =)) Thanks for this and congrats.
- balance_it 8y agoVery nice and useful. Thanks for sharing.
- Bouncingsoul1 8y agoHi, great work, quick suggestions red<>green is the "ugliest" combination of complimentary colors, which creates quite a disturbance in the viewers eyes (you could do some research on Van Gogh "The Night Cafe" where he used this for effect). So maybe don't use this as default/start color.
- pushpop 8y agoTo be honest I don’t think any of the complimentary colours suggested by this are complimentary.
- firmgently 8y agoIt's complementary, which is a different word and has a very specific meaning when it comes to colour theory (a colour's complement is the colour directly opposite it on a colour wheel) https://en.wikipedia.org/wiki/Complementary_colors https://en.wikipedia.org/wiki/Complementary_colors
- rhgg 8y agoThey don't appear to be complementary either. The complement to #ee4035 is in the cyan range (~5cf7fa). You can get this by hand. Convert #ee4035 to rgb(234, 64, 53). Subtract those values from max RGB domain (255) and take square root of difference of squares. i.e sqrt(255^2 - 238^2) etc. You end up with rgb(92, 247, 250), or the cyan color mentioned above. You can also check this in several other complementary calculators. I could be missing something.
- wdutch 8y agothat's the rgb compliment[1], this app uses the traditional colour wheel[2] 1: https://en.wikipedia.org/wiki/Complementary_colors#Colors_produced_by_light https://en.wikipedia.org/wiki/Complementary_colors#Colors_pr... 2: https://en.wikipedia.org/wiki/Color_wheel https://en.wikipedia.org/wiki/Color_wheel
- FilipPanoski 8y agoVery interesting design! I have too focused on solving the problem for finding color schemes specifically in web design. Tell me what do you think - https://csscolors.io https://csscolors.io
- polyterative 8y agoGreat
- Smithalicious 8y agoCool tool! I really like the idea of showing some actual pictures with the colors chosen. Definitely a case of something I never knew I desperately wanted. As a tip, maybe try to not include your entire life story on the "upgrade" page ;)
- joelanman 8y agoFrom a few days ago, this is also excellent for exploring colours with accessible contrast from each other: https://color.review/ https://color.review/
- cjg 8y agoFails when cookies are turned off.
- chiefalchemist 8y agoI like the concept of how this works. Do you have a mailing list. I think I want to wait for a couple more color wheels. In any case: > "Ability to bookmark your favorite colors for later." Is this read-only? Can I share such links with clients (i.e., people who aren't using the paid version)? What that said, some sort of web font integration would be a nice touch. Begin able to show a less design-minded clients a "rough draft" of colors and fonts would be helpful. If not, if anyone can suggest anything for doing a simple, rough draft-y "style guide", that would be helpful. Thanks again. Nice work.
- k__ 8y agoLooks cool, doesn't work. At least on my mobile Chrome on Android. I can only set a color once, then the black selectors just wiggle around in place whenever I choose a color.
- mrstefan 8y agoReally cool! I will definitely use it when making new website.
- philipov 8y agoI like it. I noticed that when changing pattern type, it doesn't remember which color I had selected. It would be nice if it remembered that, so one could quickly cycle through all the patterns for a selection.
- edraferi 8y agoNeat. What's the deal with the Blue Dot? Seems to indicate that somebody authored that palette. Why are some authored and others algorithmic?
- steveluc 8y agoAwesome! What a great tool, not only to find the right color, but also to find inspiration when starting a new project.