Show HN: My first native iOS app – Cone, a real time color picker | Hacker News Reader

Show HN: My first native iOS app – Cone, a real time color picker

coneapp.io

418 points_kush151 comments

Hi, HN!

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

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.

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.

Webp is much better for compression, but is support does not exist.

tinypng is actually based on pngquant + more optimizations not in pngquant

30MB for the app itself seems excessive, though.

Most of that is probably due to Swift's runtime library.

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

It's because swift doesn't have ABI stability yet.

Thanks

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

This is why I don't ship Swift yet.

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!

I did not try the app, but the landing page is just great. Kudos.

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)

Either way, thanks, this will be used a lot

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.

Thank you!

Very cool. Did you come up with these "color names" yourself?

From the footer:

> The Resene RGB Values List is copyrighted to Resene Paints Ltd, 2001. Name That Color by Chirag Mehta

Why is that copyrighted? Now that work is a literary work and no one can use the code till Disney gets permanence on their copyrights.

There are so many better licenses.

Private, old company. Its their nature unfortunately.

Really beautifully designed app!

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!

Had a similar idea to help with my color deficiency, but never developed it. Would totally use this if it were on Android.

Seconded.

Really keen to try this, congratulations on launching. I've been missing something like this since Adobe bought and slowly crippled Kuler.

Awesome. Great idea, even better execution. Would you be interested in an Android developer for developing an Android version?

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.

Being severely chromatically challenged myself, I instantly fell in love with this app - a much better execution than the apps I've tried in the past.

I'd upvote you twice if I could.

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.

I really liked the landing page, especially the outline of the iPhone with an example of the app running inside of it.

+1 to that, landing page is beautiful, another +1 for choosing Iceland <3

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.

I thought it was just the right speed.

Another option: maybe stop the loop after 1 cycle? Or add a pause between cycles? :)

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 if this would have been inspiration, however Samsung currently has an ad campaign out to showcase how much screen surface area there is; https://img.us.news.samsung.com/us/wp-content/uploads/2017/0...

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.

Video of the issue in Chrome (iOS) - http://imgur.com/ntTmynl

If you don't mind me asking how'd you screen cast this so well?

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

This is a serious pro tip. I didn't know this was possible. Thank you!

It's also great for presentations/live demos!

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.

Does anyone know what that parameter means?

This article is a couple of years old but it appears LS is Load Store: http://blog.geni.us/2013/12/06/parameter-cheat-sheet-for-itu...

Ah makes a lot of sense. Thanks for the link!

You're underselling this hugely! $0.99 is far too cheap

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

It was this price point that got me to buy it to try it out. If it were $1.99+ I probably wouldn't have. Psychological stuff...

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.

If I could get a refund if an app sucked I'd be infinitely more willing to try out random paid apps.

Use the steam method if necessary, only auto-refund it if you've used it less than x hours

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.

I've made almost the same thing :) https://colorna.me/

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 really happy you liked using the app.

Exporting multiple colors at once is a great idea! I've added it to my roadmap and will be implementing it very soon. Thank you!

Question here, how do you put a name on the hex? Do you have a database that map each hex code to "limelight", "grey asparagus", etc ?

How else would it be done?

Using a RNN that makes up plausible names based on a training set of actual colors.

I kinda hope that was a genuinely curious question and not an arrogant rhetoric one.

Why RNN? I would probably settle for a nearest neighbour in Lab color space.

Because I'm no data scientist but I somewhat understand that a RNN can extrapolate a training set. Nearest neighbors are cool too!

your conception of RNN as a magic bullet is sorely mistaken.

for something like a meaningful name for a colour requires far more learning, data and context than is reasonable...

Welp

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?

You can skip the square root, too.

At the very bottom of the page you can see the list used: http://people.csail.mit.edu/jaffer/Color/resenecolours.txt

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.

Hope that answers your question!

You could also use the layperson-supplied colour names from the XKCD survey:

https://blog.xkcd.com/2010/05/03/color-survey-results/

http://xkcd.com/color/rgb/

It took colourblindness into account.

There's a PWA that does mostly the same, apart for the naming: https://use-the-platform.com/rainbow-explorer/

Is there anything to covert hex codes to paint colors? Live, real word paint on the wall. That would be neat.

I haven't looked at a paint can in a while, maybe it's as simple as rgb?

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

There are multiple standards for this.

- RAL – https://en.wikipedia.org/wiki/RAL_colour_standard

- Pantone – https://en.wikipedia.org/wiki/Pantone

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

Pantone even provides RGB/CMYK mappings for applicable colors in their sample books: https://www.pantone.com/images/pages/19890/Pantone-Extended-...

There are also palletes for graphics software like Adobe Illustrator. But some colors look weird on the RGB display obviously.

(Source: i worked as a backpack designer for years, we did a lot of pantone prints)

iirc pantone charge you an arm and a leg to use their colours...

Yeah, that's true. Even these cute color books are ridiculously overpriced.

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?

This is very well done and looks beautiful. What an iPhone app is made to look like.

For everyone who is wondering how he got the hex, and names, etc. there are links in the bottom of the coneapp.io page. Here are the links:

> The Resene RGB Values List is copyrighted to Resene Paints Ltd, 2001. Name That Color by Chirag Mehta

Resene RGB Values List: http://people.csail.mit.edu/jaffer/Color/resenecolours.txt Resene Paints Ltd: http://www.resene.co.nz/ Name That Color: http://chir.ag/projects/ntc/

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.

Do you know of any such app for Android?

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!

To convince yourself of this, just google "optical illusion color".

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)

http://www.pro-lite.co.uk/File/RAD%20Imaging%20Sphere%20Pape...

[Edit: spelling]

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.

[1] https://www.amazon.co.uk/gp/product/B004QXU8VI/

Lots of DIY stores will custom-mix colour matched paint if you take a chip of it in.

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

[1] https://www.amazon.com/dp/B01KKEMIF0/

Well, I made this one back in 2011. But please don't use it for selecting paint. https://play.google.com/store/apps/details?id=com.jenspeterv...

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!

Adobe Color CC (now Adobe Capture CC) was released 4 years ago, in May 2013 https://itunes.apple.com/US/app/id1040200189

The landing page is awesome! I wish the app was available for Android so, you know, 80% of smartphone owners could check it out.

You mean the 80% of smartphone users who are much less likely to purchase apps? [1] Could be a chicken-and-egg problem, but still.

[1] https://www.appannie.com/en/insights/app-annie-index-market-...

Oh, so Cone app is NOT free?

Did anyone say it was free?

I thought that everything that is posted to Show HN should be available for free so that everyone could play with it.

Here you go: https://github.com/dektar/ColorNamer

Nice idea! I just can't figure out why is the size of app almost 30MB?

Probably libs.

It said 14MB or so for me.

Nice job! When I started iOS development, I made a similar app for my portfolio. I still use it occasionally, since I'm also colorblind.

It's been a while since I updated it, but it still works aside from the occasional Core Data crash because I didn't know any better back then: https://itunes.apple.com/us/app/colormyworld-color-picker-an...

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?

Thank you! I am an interaction designer but I picked up development (frontend on web) early on and have been doing both since.

I see that you're based out of Pune. Are you looking for a job? :)

https://coneapp.io/?color=#156077 "Blue Stone, aka Green"?

Nope - it's a dull blue, with a _hint_ of green.

FWIW, I don't know if I'm a tetrachromat or not, but I do have a very good colour detecting ability.

Do all 16 million color combinations have names? That would be crazy!

Looks like it chooses from one of 1383 names.

From [0] linked in the footer.

0: http://people.csail.mit.edu/jaffer/Color/resenecolours.txt

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 name. Cones are the color receptors in our eyes concentrated in the fovea. Love it when names hve scientific meaning but remain simple ;)

Is there a story behind the name? It's a cool name, but it doesn't seem obvious at first glance.

(Edit: cone cells! of course! cheers :) )

My guess: cone cells in the eye, responsible for color vision.

There is actually a story behind the name. I am a colorblind designer and colorblindness is caused when you're missing some cone cells in your eyes.

Since this app helps me see all the colors, I decided to name it Cone!

Does the app say out loud the colour name? If not - it would be a good feature for partially sighted users also.

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.

It's certainly worth its price but I wonder how many people would pay for it. Nice work! I like the design.

Thanks, now I'm that guy in public holding up my phone to stuff. Kidding, this is really great :)

So this app is using the device's camera? How does it account for the fact that camera's perception of color is often no where as similar as our eye?

Or is the intent for the user to see the world through the app and find colors that look appealing on the screen?

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!

Looks great! Really love the landing page! How long did the app take you to build?

Thank you! It took me about a month to build this from scratch. I am familiar with JavaScript so that helped me in picking up Swift quickly.

Being familiar with JavaScript did you consider something like React Native over Swift?

I wonder if this is the kind of app you can "never" properly write in a cross-platform way...

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!

Bravo, a wonderful app indeed. I just see so many uses for it. And it is priced just right for it to pick up quickly.

The app design is just wonderful - minimal and quite intuitive. Good luck!

I have zero reason to use this but i love it - thanks!

Great app! Very small critique: at a quick glance to my home screen, the icon looks like an app in the download/install process.

Great work and good luck with sales! Did you write it in Swift or Objective-C? BTW: just bought it! :-)

Thank you for the purchase, I hope you have fun with it! I made it in Swift 3.

This is one of those apps you look at and think, "Oh yeah, this should exist"

Seems obvious in hindsight.

It's so simple and pretty that it makes me sort of angry.

Thanks for the inspiration (and app) Kushagra!

This is nicely designed. Love the simplicity and the navigation is a neat twist.

Shameless plug of my app which is very similar: https://itunes.apple.com/us/app/qolor-fast-color-grabber/id9...

Ouch that review

yeah I guess some people are pretty stupid ^^

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?

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

Yup it's luck

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.

well done. this is a cool app.

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.

Love it fantastic app. +1 purchase from down under.

I can't find it in the Canadian App Store.

That's strange! Here's a direct link: https://itunes.apple.com/ca/app/cone-live-color-picker/id122...

I'll look into the issue.

This is so cool - just bought! Great work.

Congratulations, looks very useful.

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.

Interesting color names data can be downloaded here: https://blog.xkcd.com/2010/05/03/color-survey-results/

Great work !

Loved the same.

Reply on news.ycombinator.com