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.
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.
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.
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.
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!
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.
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.
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.
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 :(
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?
"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]"
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]
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.
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.
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.
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.
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.
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?
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.
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.
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!
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.
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!