Really excited to share my little project here. Being a colorblind designer, it was often hard for me to figure the color names and decide which colors to use. Hence, I decided to make this app.
Cone lets you pick colors in real time using the phone's camera. It lets you build color palettes while on the run, capturing and recording color for later comment/discussion, sending the colors to someone else quickly and efficiently, and of course translating a physical objects color to a usable set of information without having to get expensive colorimetric equipment.
I like how you kept the site and dependencies simple.
34.7KB of js (~21 is mostly color definitions), and 4.2KB of css.
Just FYI:
1. You could save ~15.75kb by minifying your JS/CSS (a bit nit-picky since your resources are a fraction of what most sites have)
2. The 1MB background image comes out to 570.6 KB through tinypng.com (47% off!). If lossless is more your thing, you could save about 5% by running it through something like imageoptim.
If you're willing to go lossy, also look at PNGQuant - https://pngquant.org/ I've started using it on all of my web images. I've yet to see the loss on a couple dozen images, but the size drops by up to 66%, even after being run through imageoptim.
Usually, my website projects have a couple grunt tasks running for image compressing, minimizing files, etc., but for this landing page, I just went with the basic HTML and CSS workflow. I realized how easy it was to create a website when there was no grunt or other dependencies haha.
However, I'll definitely be optimizing the files. Thank you for the tip!
Surely if you're using core Swift, or core Objective-C, the runtime is a shared lib shipped with the OS? I can't imagine that every single app built on Swift or Objective-C is bundling the exact same foundation? That seems so unlike Apple to miss such a massive optimization to reduce the download size of nearly every app. I can understand there being exceptions with some apps that use custom setups, but surely the majority of apps are written in XCode using exactly what is provided as a toolset.
> I can't imagine that every single app built on Swift or Objective-C is bundling the exact same foundation
In fact, every single app built on Swift is bundling the full set of runtime libraries, both on iOS and Mac. This will continue until the Swift ABI is finalised.
I'm not an expert in the why, but as far as I am aware the whole of Swift is shipped as part of each app as it is still being developed. There is a road map to ship with the OS I believe but it's not for a while
Really cool - simple and effective. Love that it starts right away when openened. (And cool landing page too)
Being color blind too (well, anomalous trichromat) I sometimes take pictures of things I want to buy/examine and analyze the colors at home: could you make a Force Touch option to load a picture from the camera roll instead of using the camera? (I suggest force touch because I don't want to interfere with the current simple interface/starting right away)
This feature is definitely on the roadmap. Force touch is a good idea but it makes discoverability of the feature difficult. I will find a way to make it more obvious and keep the interface simple.
This looks nice (and has many knowledgable people say so) and simple, so I don't want to come off as too much of a critic.
But, can I just say that I think the use of "real time" for an interactive color picker is a bit over the top?
I mean, what would the opposite be? You click a color, then one hour later you get an e-mail? Color picking in one shape or another has been done for 30+ years[1], and it has always been real-time, it's a basic interactive tool when working with computer images.
I realize it maps the color from a camera-fed image to a human-readable name (which perhaps wasn't always done in the past), but that's still not an operation I'd expect to have to wait for, not even when running on a mobile phone.
In short, I think those two words should be removed.
[1] This number is only slightly out of thin air; I picked colors on my Amiga in the late 80s.
As a fellow colourblind person, I've looked for similar "name the colours" apps before as I struggle to identify some colours (more out of curiosity than any real need, as I'm not a designer) but didn't find anything as nice as this!
Looks awesome for creating palettes too. Thanks for posting!
Thank you! Currently, I don't have the resources to hire an Android developer but I'll definitely do it once I complete the feature set in iOS. Please send me an email so that I can contact you back when I need you.
I'm color bind too. I'm actually jealous I didn't think of this. I have been working in Krita lately, and I'm guessing on colors. Krita will give hexadecimal # of a particuliar color, but not a worded description of the color.
This has so many potential uses--fashion websites for one. I can't go by the color on websites for the clothing; I need to look at the details for the written color. I usually just buy black, and people call me Jonny Cash. A therapist once asked me why I always wear black. Just too dissalusioned on so many levels to tell why. That was my last session.
I imagine sites like The Gap would pay for a custom app incorporated into their site?
Will I pay for this app? Maybe? It will be my first bought app. All these years, and I never gave Apple my CC, on principle. They might get it today though.
The landing page was really cool. A minor suggestion I have: could the animation be slowed down a bit? I was scanning the page and the cursor moving around was a bit annoying.
I think that the way the application works will still be clear if the animation plays at half of its current speed.
Definitely not stop it after 1 cycle. I watched it over and over many times. Please no pause either. I really really like it the way it is now. One of the best demos I've seen.
Not sure how many people this affects but clicking on the download button from the website on Chrome (iOS) takes you to an iTunes page that doesn't contain the app. Clicking on it via Safari (iOS) sends you to the app store to the app proper.
Thank you so much for reporting that. I just copied the link from my iTunes connect account which only has one additional parameter "?ls=1" that seems to work in Chrome.
Tethered the iPhone to a Mac and used Quicktime to capture/record the device input (New Movie Recording then change the camera input to the iPhone), export as MOV (720p).
I agree that it's too cheap, but that's the state of thee app store. There tons of other apps that do the same thing + more for free (I was building something like this to pick light colors with my HUE lights).
Yep. It's a sad state we're in. It's just too risky to pay more for an app from a publisher who is not well-known. All too often, installing an app for $3-5+ is disappointing when you discover the app is not what you were expecting. I rarely pay for apps, simply because I'd have paid thousands of dollars over the lifetime of a single phone, only to uninstall 95% of apps after discovering it was not for me.
Is an in-app purchase required to offer something tangible? Instead of using ads and offering an in-app purchase to remove ads, I'd love to see cheap apps (ie: free or $0.99, without ads) with options for in-app purchases - maybe $3, $5, $10, $20 - that are nothing more than a voluntary donation to pay more for an app I find worthwhile.
If I could volunteer to pay more for apps after using them for an extended period of time (fully unlocked, no trial gimmicks), I'd likely have spent a lot more money than I have thus far. I won't pay thousands for a bunch of crappy used-once apps, but I'd pay a few hundred for the bundle of apps I've kept.
Cool indeed! I had a similar need and created https://github.com/Zalastax/colornamer. Finding a good source of names was the hardest part so you might want to complement your list of colors with those in my list.
Super nice! Had I just known about it earlier...
We made some different choices, but the end result is quite close. It's a shame that the native html color picker is so bad, I wish I could have used it, but FlexiColorPicker is a delight to work with.
You made something very simple and beautiful. I bought it right away, and had fun building a palette of the Kansas sunset while my dogs ran through the woods. I know I could do the same thing just by taking a photo and extracting a palette later, but I really liked the experience of doing it in the moment.
Just one request: I'd love a way to export a bunch of colors at once. Is there a way in the current interface? If not, please consider it for a future update.
I am using a database with Resene color names (and some names from the Wikipedia colors list) mapped to specific hex codes.
I find the closest hex code from the database to the one in your camera and show the name associated with it.
You've got like 3 features, and a list of names with values for each one of those features. You could literally do
_, result = min([(sqrt((i.R - c.R)^2 + (i.G - c.R)^2 + (i.B - c.B)^2), c) for c in colors])
and you're done.
Why would you want a computer to come up with color names anyway? They're identifiers, so you want them to be consistent. What if it comes up with names like Piss or Ennui? Why go through that trouble?
- some others, often with military roots (FS595, British Standard, …)
Pantone has different charts for paper/textile prints etc. RAL is mostly used for paint. It's common to have RAL codes on spray cans or wall paint buckets here in Europe.
There are tools to approximately convert RGB (and HSL and others) to these colors, eg. http://rgb.to/. But since the color models and intended use are different, there are some colors with no equivalent.
It's definitely not as simple as RGB. Displays use an additive color model (you start from black and add more light), whereas paints use a subtractive color model (you start from white and add pigment).
The standard model for subtractive color is CMYK -- cyan, magenta, yellow and black. Calibrating RGB displays to offer a reasonable preview of CMYK color is quite tricky due to the completely different color space and dynamics.
Wall paints are an additional step removed because you can't buy them in CMYK, and the vendors don't provide a mapping from their private color names into a standard CMYK space.
Neither is a good fit of describing colours in the real world, as they're dependent on the output device (in case of CMYK both the printer and the paper change the resulting colour). So a mapping of paints to CMYK or RGB would be rather meaningless.
That's certainly true. But CMYK would be more useful because the commonly used CMYK spaces can represent a color gamut that's closer to the range of shades in the actual paints, whereas the commonly used RGB spaces are too limited. (A regular color printer can print a substantial range of colors that are aliased when represented in sRGB, i.e. you can't distinguish them on screen unless the preview is adjusted to compensate. This also happens the other way: many on-screen greens can't be printed without extra inks.)
I am currently working on a feature which will show the closest matching Pantone colors to the captured color (which is calculated in the LAB color space for high accuracy). Would that fit your use case?
What a great idea. I am renovating my house right now and I have to buy some paint for partially painting a facade. I could use such an app to be able to choose the paint color, in the store, as close as possible to the original one.
Beware the effects of incident lighting on colour perception. As a human, you do a lot of processing you're not even aware of to normalise the colours you perceive. Cameras cannot do this (without calibration), so if the incandescent/flourescent/daylight/sunlight mix and intensity is different in the store to your house, you could end up with a very different shade.
It's really interesting. My wife and I have done lots of painting at our house over the past year and we never get exactly what we expected. Most recently, we spent a long time selecting a light gray, which looked very much gray with a group of other grays. Then we painted the first portion of wall, stepped back and both said, "well, that is blue".
I'm guessing you looked at the paint in the shop under artificial lighting (which is more orange - making blues look more grey), then painted it in your house where there is more bluer daylight!
Always buy the extortionately priced test samples. It's worth it!
Matching the appearance of existing paint / colored surfaces is difficult.
You need data on the variation of colour, intensity and reflectance as a function of viewing and illumination angles.
Not something a mobile device can do.
The device described in this paper can:
(note: I am not affiliated; just out of interest)
If you have an app, and a standard color card[1]. then the processing to normalise the image (and therefore the colours) should be doable on a mobile device.
If you really care about matching existing paint, you want specialized equipment. Professional colorimeters call handle this task with ease, but I don't think smartphone cameras are quite up to the task.
If I wanted to do this, I'd try something like the Color Muse [1]. It's a $60 Bluetooth peripheral that proports to do accurate color scanning. Then an app on your phone tells you the specific paint that corosponds to the scanned color.
I haven't used it personally and can't vouch for it's performance, but I wouldn't trust phone camera alone and wouldn't spend $1k+ on a pro model, so I figure it's worth a shot
This is something I didn't know I needed for a long time, how has this not existed until now? It's so simple and truly is a delight to use. Thank you kind sir!
i must say the name, the website, the app's UI all look pretty neat. you seem more of a designer than a developer, may I ask you, what's your expertise?
Perhaps it's using one of those luminance-from-RGB vectors somewhere in the calculation? That could overrate the contribution of green to the appearance.
Great idea ! I wish I had this idea after working on a website that tries to map RGB colors to paint names. An example of result with the Limeade color - http://en.tacolor.com/hex/6fb400/
This does the distance check in the CIELAB color space.
Would you be interested in supporting color space conversions for Apple developers? Like how does UIColor(displayP3Red:0.7 green:0.8 blue:0.4) map to extended sRGB? Standard sRGB? If you give you an sRGB color, what's the saturated version of that color in P3? What's the 50% desaturated version of a given color? Etc.
Very nicely done. I would recommend either a simple tooltip popover for each button on first startup, or a simple help button somewhere. It took me a while to realize/notice that the snowflake button was to freeze the frame.
I wouldn't want to clutter the elegant simplicity of this app, but it was confusing to me initially.
Great looking app. I'm an iOS dev, and I need to implement a similar color picker for picking a color within an image in my app. Any tips or example code you can point me to for how to performantly target a screen pixel and get the hex?.
Congratulation for your new app. Adobe has a similar free app called Adobe Color. However, your app is better as it clearly define the color name and code. You may like to check their app and add a color scheme feature.
Very good work!
I actually started with React Native but soon realized the limitations and switched to Swift. Learning Swift and shipping the app was definitely faster than trying to figure out how to do X in react native and make it work properly.
I think React Native is good if you're building database apps but when you want to leverage the device capabilities like camera, Bluetooth etc, going native is the best option.
Very cool!
A feature suggestion for the future: add a Watch app! That shouldn't be hard to implement at all, and would be a killer feature, I believe. A quick color browse from a pic in the gallery.
This is wonderful, thank you! I appreciate that there is a subgrouping color such as "blue" under the hex codes, it really helps for colors with names that are not related to the base color.
I've actually been looking for something like this. I only rarely ever need to figure out what a color is, but its always been difficult. This app makes it much easier. Thank you!
Am I just too stupid to see the grander idea of this app or why does it get so much attention and top position on HN? It's just a color picker on camera images or what did I miss? It's very well done I agree but still seems remarkably trivial. Why all the fuzz?
Compared online equivalents 'Snap It' that help color identification which require taking a picture and uploading to their site. This is really helpful in identifying colors on the go. The simplicity of this app is where it sings.
It's easily monetized by connecting app to paint suppliers like Sherwin Williams, Home Depot, or Lowes.
Isn't it largely just luck? This was posted a few weeks ago, and went nowhere. Now posted again it reaches the top because a few people upvote it early on.
It will also float down again pretty quickly. Trivial but fun - a few minutes of fame - well deserved
good luck charging for it though... if there is not a free one, some free-app loving developer might waste a couple of hours of his afternoon doing the same and shipping it for free.
Looks cool. I wanted to build something similar some time ago, but never got to it. My idea was that it would serve colorblind people so that they can check what color some things are.
Really excited to share my little project here. Being a colorblind designer, it was often hard for me to figure the color names and decide which colors to use. Hence, I decided to make this app.
Cone lets you pick colors in real time using the phone's camera. It lets you build color palettes while on the run, capturing and recording color for later comment/discussion, sending the colors to someone else quickly and efficiently, and of course translating a physical objects color to a usable set of information without having to get expensive colorimetric equipment.
Really excited to hear feedback from you all :)