Extract colors from an image

Get color swatches from image with Vibrant.js. Extract colors from an image.

HTML

<script src="//cdn.rawgit.com/jariz/vibrant.js/master/dist/Vibrant.js"></script>
<div id="details" class="colorVibrant">
    <div id="image"></div>
    <span class="swatch colorVibrant"></span>
    <span class="swatch colorMuted"></span>
    <span class="swatch colorDarkVibrant"></span>
    <span class="swatch colorDarkMuted"></span>
    <span class="swatch colorLightVibrant"></span>
    <div id="drop">Drop an image here <small>(Looks like reading an uploaded image works in Chrome only)</small></div>
</div>

SCSS

@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
    font-family: "Open Sans";
}

small {
    display: block;
    font-size: 12px;
    padding-top: 10px;
}

#drop {
    border: dashed 1px rgba(#000, 0.5);
    padding: 40px 0;
    margin: 20px;
    text-align: center;
    border-radius: 5px;
    color: rgba(#000, 0.5);
}

img {
    width: 55%;
}

#image {
    margin-bottom: 20px;
}

#details {
    padding: 10px;
    text-align: center;
    height: 100vh;
    -webkit-transition: 1s;
    -moz-transition: 1s;
}

.swatch {
    display: inline-block;
    height: 40px;
    width: 40px;
    border: solid 1px rgba(#000, 0.3);
    border-radius: 50px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
}

CoffeeScript

dropZone = document.getElementById "drop"

handleFileSelect = (event) ->
    event.stopPropagation()
    event.preventDefault()
    
    files = event.dataTransfer.files
    f = files[0]
    reader = new FileReader

    progress = (event) ->
        image = new Image(200, 200)
        image.src = event.target.result
        document.getElementById("image").innerHTML = "<img src='#{event.target.result}' />"

        # https://jariz.github.io/vibrant.js/
        vibrant = new Vibrant(image)
        swatches = vibrant.swatches()
        
        for swatch of swatches
            if swatches.hasOwnProperty(swatch) and swatches[swatch]
                for el in document.querySelectorAll ".color#{swatch}"
                    el.style.backgroundColor = swatches[swatch].getHex()

    parseFile = (theFile) -> progress
    
    reader.onload = parseFile(f)
    data = reader.readAsDataURL(f)

handleDragOver = (event) ->
    event.stopPropagation()
    event.preventDefault()
    event.dataTransfer.dropEffect = "copy"

dropZone.addEventListener "dragover", handleDragOver, false
dropZone.addEventListener "drop", handleFileSelect, false