Author Topic: Whats Its Color - December 25, 2006 (Read 62,401 times)

Veign · « **on:** December 16, 2006, 10:16 PM »

Whats Its Color - December 25, 2006

Online Application

First public release

WHAT IT DOES:
Whats Its Color is a fun little online application for getting the primary and complementary dominant colors of an image, how many visually unique colors are in an image, and the top ten visually unique colors in an image. Why is this useful? Well, if you were creating a website around an image or using an image as the primary inspiration for any type is design it can be very helpful to know what its primary dominant color is or what are the unique colors that people can see when viewing the image. The final results will display your image on a background that is best suited for that image. This application is just fun to play around with.

KEY POINTS:

Images are resized for display purposes only. The original image file, and all its color information, is used in the processing
Font colors used in the results page are adjusted based on the colors that are in the display
Full support for JPG, GIF and PNG
Option for discarding the background from being used in calculations. This lets you process an image on a solid color background without the colored background affecting calculations
Information on the amount of visually unique colors are displayed. This includes the top ten
Additional color information is gathered but currently not displayed. Open for suggestion on what else to display

Check out the website to see it in action

If you find a problematic image then please contact me so I can look into it.

Veign · « **Reply #1 on:** December 17, 2006, 05:55 AM »

Right now the online application will only accept JPG files and I have fixed an issue where it would fail on PNG and GIF images without giving any feedback as to why.

I will add PNG and GIF support before the Jan 1st release.

Arjen · « **Reply #2 on:** December 17, 2006, 12:47 PM »

Nice! It seems to work OK for an image I uploaded.

One thing that is not clear to me is the "complementary color": the code of the complementary color is displayed, but I can't see what color it is. Or am I missing something? It would be nice if the complementary color could be displayed in a box, like the dominant color. Or is it the background color of the page?

What I think would be really great too, is if the application could suggest a color palette instead of two colors.

Something else I'd like to see is some tips on how two use these colors when designing a web site.

Hope this helps!

Veign · « **Reply #3 on:** December 18, 2006, 12:34 AM »

The complementary color is the background of the entire page. That's why the page background color changes for each picture you upload. The background displays whats considered the background best suited to display that image on.

Color Palette is a great idea and something I may play around with in future releases. I was thinking of giving 3 or 4 colors thats work off the 'images average color'.

I have been wanting to play around with the pixels of an image and would love more ideas on things it can do. What I'm doing with the algorithm is evaluating every pixel in the image so I have access to a lot of information.

(I just added support for Gif and Png so it now supports Jpg, Gif and Png)

TPReal · « **Reply #4 on:** December 19, 2006, 03:47 PM »

Hi!
Dunno how it works and normally I don't trust such mechanisms so I'm surprised that it works so nice

Good job.
TPReal.

Veign · « **Reply #5 on:** December 19, 2006, 03:53 PM »

Thanx.

What's being worked on now:
- A feature that will let you discard white backgrounds in an image which can throw off the calculations.
- Some method for displaying a visual representation of the color make-up of an image. Kinda like a histogram but different.

Veign · « **Reply #6 on:** December 19, 2006, 06:00 PM »

I removed the versioning information from this post since its an online application and I really don't want to keep versioning info.

Also, I added the Discard White Background option to give better results with images with large white backgrounds - since the white throws off the calculations.

I'm thinking I could add a Remove Background from the calculations options by automatically throwing out the color in the 1,1 position of an image. Might be an OK assumption that covers most images with a background. WIll play around with this in the future.

Veign · « **Reply #7 on:** December 20, 2006, 04:56 AM »

It will now automatically detect the background color and remove it from calculations if requested. Now I just need to speed things up as much as possible.

Arjen · « **Reply #8 on:** December 24, 2006, 03:02 AM »

Nice.

Maybe if the user chooses "discard background" you could take the second most dominant color?

Quote

481200 Total pixels in this image
481157 Pixels Have Been Evaluated

What happened to those 3 pixels?

Veign · « **Reply #9 on:** December 24, 2006, 03:08 AM »

Did you choose to discard the background color? If so then the color at 10,10 was sampled and removed from the calculations. If it was not the actual background color then thats what happened.

If you have an image causing weird results than you can email me it so I could evaluate things better.

If I get time this week I will be working on a Top 3 list to list the top 3 colors in the image.

Veign · « **Reply #10 on:** December 26, 2006, 05:01 AM »

Updated the main posting with an image of the results page. This shows the new information that is feed back: number of visually unique colors in the image. I also list the top ten visual colors in the image.

Calculations on the top visual colors in an image is a work in progress as I need to delve deeper into the math of this. The first shot is not bad but you can see some colors averaging out too much.

Comments?

mouser · « **Reply #11 on:** December 29, 2006, 05:07 PM »

now it's looking quite cool!

mouser · « **Reply #12 on:** December 29, 2006, 05:09 PM »

some feature ideas:
let user click on any of the top colors and make that color the background color of the page.

Veign · « **Reply #13 on:** December 29, 2006, 05:13 PM »

Great idea. I will see if I can get that implemented before Jan 1st.

Any other ideas?

mouser · « **Reply #14 on:** December 29, 2006, 05:17 PM »

i know there are theories about complimentary colors - to tell the truth color sense and rhythmic sense are two things i was born without. but it might be nice to take the dominent colors and maybe list some "complimentary" colors, and maybe allow either sets to be used for both background and maybe a border?

And then lastly a button that might give you the html code to show the image on a standalone web page?

Just an idea, not sure if it's worth your time..

Veign · « **Reply #15 on:** December 29, 2006, 05:26 PM »

The colors stuff is something I need to read up on a lot more. There is so much theory around it I just need to flesh out what useful to someone. I do like the suggestions you have made and will look into these as a fun thing to do late Saturday night after the G/F has gone to sleep.

As far as HTML code. That can't be done since the resized image is never stored on the server. Its built in memory and streamed down the pipe to the users browser. I need to be aware of bandwidth use so this doesn't cost me anything (I have no problem building stuff for free when its my time that is being put in but really not in a position to pay out of pocket).

I need to play around with Javascript / CSS popups and maybe offer a Color Scheme when you click one of the top ten colors or the primary and complementary colors.

So many ideas, so little time.

mouser · « **Reply #16 on:** December 29, 2006, 05:34 PM »

i didnt actually mean to give the user html code linking to image on the server -
i meant it more like sample html code with colors and refering to the image as if it were in the same directory. ie user could just upload the web page and their own copy of the image to their server. just an idea.

Veign · « **Reply #17 on:** December 29, 2006, 05:37 PM »

You mean to show a color scheme in a webpage built around their image where their image is just a place holder? The code could be shown in a TextArea where they could easily copy and paste or download a pre-built html file.

mouser · « **Reply #18 on:** December 29, 2006, 05:45 PM »

right.

Veign · « **Reply #19 on:** December 29, 2006, 05:55 PM »

Not only interesting, but feasible. I will look into this. Might be something for a future release.

DocSavage · « **Reply #20 on:** January 02, 2007, 12:46 AM »

Perhaps, as you consider the palettes, a checkbox to limit to "websafe" colors.

Veign · « **Reply #21 on:** January 02, 2007, 01:05 AM »

Will add this to the list of possible future additions.

What I want to do is see how or why people would use the website and add features to solidify those uses.

Keep the suggestions coming.

Veign · « **Reply #22 on:** January 05, 2007, 11:05 PM »

Picked up by a pretty decent blog:
http://hyperculture.typepad.com/sarah/2007/01/whats_its_color.html

steeladept · « **Reply #23 on:** January 10, 2007, 03:29 AM »

Interesting program. I first thought to use it to determine a good background for my machine desktop, and it is still good for that to show off any shortcut icons you have. However, I find I like to have a changing picture and I would prefer to be able to sample user defined sections of a picture with the background and foreground separately defined for this purpose. So I guess that would be a use and a potential suggestion. Don't know how you would accomplish it, but it is an interesting thought...

Veign · « **Reply #24 on:** January 10, 2007, 04:10 AM »

Not sure I follow. I understand the define sections (I think like a region selector) but not sure what you mean by 'background and foreground separately defined'. Explain in more details and I will see what I can do.