10 Kolors a 10KApart project

Live example: http://10kolors.azurewebsites.net/.

This is a web application to be able to detect and extract the main colors from any image.

• from a local image (browsing it or with drag & drop)
• from an online image hosted somewhere, throughout an http link.
• typing directly a website; our software will take care of creating a print-screen for you and will detect colors.

You will have all the main colors detected and displayed to you, in a gradient view and via color code bullets.

You can save the url and see your palette of color whenever you want. You can export the palette colors in sass, less. We are not storing ANY printscreen or images.

The project it is multilngual and.....All stay under 10KiloByte to partecipate to the competition 10KApart.

Evolutions

In the future we would love to implement:

• export in more formats; rgb, photoshop, png ...
• display the gradient in different ways.
• display the color by amount (percentage) in the image.
• in settings refine the details of colors found in the image.
• display in the results the image (source of the palette).

To launch the app :

• npm install
• npm start
• go to : http://localhost:8080

Authors:

Aldo Ferrari - @aldo_ferrari & Maxime David - @Xouuox

TNX TO: (some of ur inspirations)

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://codepen.io/towc/pen/ByVJre
• http://codepen.io/Lewitje/pen/doJRBX
• https://css-tricks.com/snippets/javascript/showhide-element/
• http://realfavicongenerator.net/