The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Color-thief Javascript Color Palette generator goodies!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #159177

    Has anyone had a look at the Color-Thief Javascript project library on Github from Lokesh Dhakar?

    Demo link:

    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.


    Hey giving this a bump, I’ve found a nice and simple (if you understand the scripts) example for Color thief on JSfiddle: 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 ">
    <div class="imageWrap">
    <img class="targetImage" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNr

    To see the demo in a stand-alone html page use this link:

    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, Crssp


    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!


    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;">


Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.