This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Feb 04 - Read on Facebook

Part II of my mini series on HTML5's 'canvas'-element is about grabbing and processing pixels of an image to calculate its average color:

https://tr.im/canvasAvg

(btw that's pretty much how the famous 'Color Thief' script operates on a basic level: http://lokeshdhakar.com/projects/color-thief/)

#canvas #average #color #pixelThief

6 Comments

Chris Camargo

Love this. This is the kind of analysis Apple built into iTunes to create color schemes that match the album art in your library. Panic has a nice write up on it: http://panic.com/blog/itunes-11-and-colors/

Marc Krenn

Shout out to @Min-Sang Choi who has used Color Thief for one of his prototypes quite some time ago:

https://dribbble.com/shots/1676217-Material-Design-Dynamic-Color-with-Framer-js?list=users&offset=0 (unfortunately it's currently broken)

Callil Capuozzo

Wow this is awesome

Marc Krenn

Maybe I'll try to wrap an enhanced version or 'Color Thief' itself into a FramerJS-friendly module ...

Koen Bok

Protip: you can put the first x colors from colorthief into Framer Colors and then sort them by lightness to pick the colors with most contrast for for/background.

Max Batt

Killer. Is there any way to isolate an accent color of an image rather than averaging out all colors?

Read the entire post on Facebook