js onclick for newly created element

Hi I am trying to create a simple colorpicker for my project. It should dispalay DIV vith colored SPANS and each span should onclick call my function -pickColor()- with its onwn value.

The problem is that, after clicking on any Span my function is simply called with last walue from my array instead of the coresponding one. Any idea how to correct it?

here is my code

var colors = [ "303030", "777777", "da0025", "f01800", "ff4300", "fd6c05", "feab07", "ffc91e", "93c900", "54c300", "00ab62", "00c3c4", "009bf0", "006afe", "3f00dd", "9025ff", "ff3ec2", "fe0b6b"];

//color picker var picker;

function createPicker(){
//create picker wrapper
picker = document.createElement('div');
picker.id = "colorPicker";
picker.style.display = "none"; // initialy invisible !
picker.style.margin = "0";
picker.style.padding = "0.5em";
picker.style.backgroundColor = "rgb(30,30,30)";
//create picker color options
var newColor;
for (var i = colors.length - 1; i >= 0; i--) {
    newColor = document.createElement('span');
    newColor.id = colors[i];
    //set style for color option
    newColor.style.display = "inline-block";
    newColor.style.width = "50px";
    newColor.style.height = "50px";
    newColor.style.margin = "0";
    newColor.style.padding = "0";
    newColor.style.backgroundColor = "#"+colors[i];
    //add onclick function

    newColor.addEventListener("click", function f(){pickColor( colors[i] )}, true);

    //append option
    picker.appendChild(newColor);
};
//append colorPicker to file
document.getElementById('here').appendChild(picker); // value must be set to the parent elements id !
}

function displayPicker(){
picker.style.display = "inline-block";
}

function pickColor(id){
//set value
console.log(id);
var input = document.getElementById('color'); // must be the 'input' elements id that we want to set !
//console.log(input);
input.value = id;
// hide picker
picker.style.display = "none";
}