Fashion For All : Color combination generator with AI

Home Page
After take a picture
Choose Complement Style
Choose Triad Style
Choose Analog Style
Choose Monochromatic Style

Inspiration

Colour (color) blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 3 million colour blind people (about 4.5% of the entire population), most of whom are male. Worldwide, there are approximately 300 million people with colour blindness, almost the same number of people as the entire population of the USA!

Buying clothes is frustrating for the colorblind

Shopping for clothing is one of the more problematic experiences for the colorblind. It brings together some of the most fundamental problems of being color blind.

So based on this background, we would like to make a project that can help colorblind people more easier buying clothes.

What it does

The website we made will give a name of color in same perception with normal people see. User only need to take a picture that they want to know the color and the website will tell the color name.

I will tell you what it does and how it works.

There is a man called John. He go to shopping mall and he want to buy T-shirt and Pants.

Normally John didn't know what color he should choose for T-Shirt and pants. John use the website we made. and John looking for a T-shirt he likes (the models) without concern to the color.

After John find T-shirt he likes. He only need to open website link and take a picture of the T-shirt, after that the website will tell John what is the color name of the T-shirt and the website will tell John to choose Color Style for matching color.

The color style we provided on the website based on Wheel Color theory. It used by Clothing Designer to determine what color should be combine with.

So the step to use the website is :

Take a picture
Choose Color Style
Website will show captured picture color and the matching color (It can be used for buying pants, so it will match with the T-shirt.

How we built it

We Built the website by using PHP & HTML language.

The techology we used are :

Bootsrap framework link
Microsoft Cognitive Service as the AI system. link
Webcam.js library to acquire the picture link
Name the Color JavaScript library by Chirag Mehta link
TinyColor.js library link

The Website Flow : We made Landing page with Bootsrap framework.

By using Webcam.js library, The website have capability for using camera of the device who access it (need authorization form user)

The picture generated by webcam.js library will be passed to Microsoft Cognitive Service : VISION API. the AI will describe the image and send back the data to server.

After server get information from Microsoft Cognitive Service API, the website will show picture that already taken, and also show dominant color that the image have.

This dominant color (hexcode) will be passed to name the color javascript library by Chirag Mehta. after that the library will show the color name.

the dominant color (hexcode) from Microsoft Cognitive Service API also used by tinycolor library. It will convert the color, into wheel of color style based on user selection.

Challenges we ran into

Because we made this website by using multiple service, It's very difficult to make it works, because some libraries didn't support with another library.

Oh the otherhand, the color precision still not 100% accurate because it depend on the camera of the device.

Accomplishments that we're proud of

We are very proud of this project, because we can make a tools for helping color blindness people. It also can be used for Clothing Designer to make their work easier.

What we learned

We learned from this project, There are so many technology exist out there. We Only need 1 out of the box Idea and combine all of the technology and It will become new technology.