- This topic is empty.
December 27, 2013 at 10:25 am #159177
Demo link: http://lokeshdhakar.com/projects/color-thief/
I’ve seen it used in some really interesting way, including seeing it in a few WordPress Gallery themes to create a color palette for a screenshot.
I’m having trouble dissecting what does what as far as creating the output and keeping it simple to create a color palette from looking at the demo.
It’s one of those things for the newbie, it almost needs more of a walk-through to figure out what and how it creates the demo color palettes.
Anybody done anything interesting with the Color-thief library? There are precious few tutorials on using it.January 13, 2014 at 7:36 am #160255
Hey giving this a bump, I’ve found a nice and simple (if you understand the scripts) example for Color thief on JSfiddle: http://jsfiddle.net/FnQN6/15/ What I don’t understand is how to simply input the values for new images, and what returns what is seen at the top of the html code section, starting with, I think it’s Canvas, but don’t really get it yet:
<div class="imageSection ">
<img class="targetImage" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNr
To see the demo in a stand-alone html page use this link: http://jsfiddle.net/FnQN6/15/show/
If anyone out there understands quite how this works, can you give it a quick walk-through. I would like to create a gallery, and have each gallery piece return a color palette, but I honestly can’t quite figure it out from any of the examples out there. Tutorial desperately needed, for non-scripter neophytes. thanks, CrsspJanuary 15, 2014 at 9:58 am #160458
Thanks @Mottie that was exactly my thought, and had even inquired with the theme builder of a certain theme on themeforest, that is using color-thief. He claimed it didn’t create any issues.
Will check into your link then, thanks for the reply.
Feets don’t fail me now, scooting off to go check that one out!January 15, 2014 at 10:07 am #160461
To clarify my question, hate to start another topic.
I really would just like a slick way of auto-processing an image to get the color palette.
the palette could then be hard-coded into my wordpress gallery posts.
I’ve tried copy-pasting results from a color-thief, drag and dropped entry.
The problem there is it does a terrible job of separating design and content.
all of the palette attributes get set in the code, and it would be very heavy.
Sample below of this approach, this code is used to just show one color swatch from the generated palette:
<div class="swatch" style="margin: 0px 2px 2px 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-size: 18px; vertical-align: baseline; width: 60px; height: 30px; background-color: rgb(188, 43, 74); float: left; background-position: initial initial; background-repeat: initial initial;">