Show HN: A Color Picker I Made | Hacker News Reader

Show HN: A Color Picker I Made

colorsupplyyy.com

591 pointsmtgentry106 comments

This 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!

If 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.

(It’s hiding in the Utilities folder if you can’t see it in Applications.)

I just do cmd+space and type color.

Create a shortcut for it.

I have it set to CMD + Shift + C. Great to have it easily accessible

Hey, thanks to this comment, I just discovered that if you hit Cmd+Shift+C in Chrome it'll let you inspect any element by clicking on it. Cheers!

Also in Safari

and firefox

This is why I have no side projects, yet. Most problems have already been solved.

Commentbait, 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.

A 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.

Try https://sipapp.io/

Sip is really nice, but in my experience it doesn't pick the exact color.

I use this one! Love it. Does everything I need.

I 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.

You 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?

>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.

I 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?

There 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!

Yeah, 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.

I 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/) being the most advanced. This seems to be right in the middle of simple and advanced color selections which is pretty sweet.

would say those are generally two different markets user bases no? Not everyone who could leverage color pallets has to write code.

It'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!

FWIW, 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 :)

Hi, 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.

To be honest I don’t think any of the complimentary colours suggested by this are complimentary.

It'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

They 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.

that's the rgb compliment[1], this app uses the traditional colour wheel[2]

1: https://en.wikipedia.org/wiki/Complementary_colors#Colors_pr... 2: https://en.wikipedia.org/wiki/Color_wheel

TIL. I shouldn't have skipped art class. Thanks for the sources.

Ahhh I see. Thank you for the correction.

For anyone interested, Nerdwriter made a video about this very painting: https://www.youtube.com/watch?v=nKNAZr0QJzs

This 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.

The great thing this color picker provides that others don't is live-updating icons utilizing the colors. Awesome job!

Thanks for the feedback everyone! If anyone is looking for a senior visual/product designer here’s my portfolio: http://masongentry.com

looks 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]

Ahh thx, the color picker was initially built for desktop only so its super wonky on mobile. I need to fix that!

Same with Firefox 66, Android 8.

Would definitely like more 12 options.

I 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?

Offtopic, but why is there such a disparity in the percentage of colour blind people between the male and the female population?

"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_colo...

Interesting. 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

(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.

Color 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.

This feels like astroturfing since more than half the comments are "cool"...

If only I had the money and the ability to plan...

Looks 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.

I 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

Just 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.

I 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.

I 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.

Beautiful! 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.

From a few days ago, this is also excellent for exploring colours with accessible contrast from each other:

https://color.review/

This is perfect, thank you!

I would add HSL colors and ability to download color scheme.

Quite nice. So far I've been using http://paletton.com/ - not identical, but similar functionality.

I 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.

This 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.

This 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.

This 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).

Why 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?

Looks 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.

I'd suggest adding some sort of message for people with JavaScript disabled. Currently it just looks weird when JS is disabled.

Including the example images was GENIUS. Love it.

Wonderful 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.

Cool 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 ;)

I 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.

Very 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

This looks great thanks! I really appreciate the color blindness functionality. As a color blind web dev i really have issues with coming up with good color palettes and this looks like something i can use.

Great job!

Looks great! :) Love the animations

Love 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!

Awesome! What a great tool, not only to find the right color, but also to find inspiration when starting a new project.

Neat. What's the deal with the Blue Dot? Seems to indicate that somebody authored that palette. Why are some authored and others algorithmic?

I 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.

Amazing 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.

I've been on it for ~35 seconds and I've already learnt: square, complementary, split complement, triad and analogous colors. Wonderful!

This is amazing! A boon for people who cannot visualise colors in the head (people like me =)) Thanks for this and congrats.

Are the examples images supposed to change with the color picker? They seem fixed on red/green, otherwise looks awesome

Works in edge, but not in chrome for me.

Working in Chrome 71.0.3578.98 for me.

Works in Firefox 66

Great job! This is the first time I'm able to find a nice color pattern so easily. The sample images are very helpful.

There 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.

great 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.

Nice app mate, I particularly like the elements that show the colors used with a practical example.

This is design porn at its finest. Absolutely beautiful! What tools did you use to build this?

Thanks! It’s messy under the hood. The first version was all js, this latest version is Rails & js.

Very nice. Good idea on the example images. I may actually buy premium for some projects.

Love it :-) Having the colour applied to things right away is really helpful, great idea!

Awesome, just put together a movie poster using the orange / blue combo.

Very nice work!

[whispers] colorsupplyyy.app and colorsupply.app is available for purchase :)

Really cool! I will definitely use it when making new website.

Beautiful, original work. Thanks for sharing.

Appears to have collapsed under the load :(

Very nice and useful. Thanks for sharing.

Thank you. This is very pleasant to use.

Fails when cookies are turned off.

It's beautiful, really cool!

this is such great work - good job and thank you

so simple to use and love how u have an example

Good job and Good luck.

Thanks!

This 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!

this is awesome!!! nice work!!

Great

Very nice!

deep linking would be great

awesome!

Reply on news.ycombinator.com