How to get value from onclick() Button to input jquery

i am trying to create a color picker, whenever i click on a colored button, the respective color name gets sent to the input automatically; if i click on white button i get in input : White and so on ... Here is my code so far:

HTML

function changewhite() {
    document.getElementById("color").innerHTML="White";
}
function changeblack() {
    document.getElementById("color").innerHTML="Black";
}
function changered() {
    document.getElementById("color").innerHTML="Red";
}
function changeblue() {
    document.getElementById("color").innerHTML="Blue";
}
function changeyellow() {
    document.getElementById("color").innerHTML="Yellow";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Color:</label>

<td width="314"><input name="white" type="button" id="white" onclick="changewhite()" value="" width="20px" />
<input name="black" type="button" id="black" onclick="changeblack()" value="" width="20px" />
<input name="red" type="button" id="red" onclick="changered()" value="" width="20px" />
<input name="blue" type="button" id="blue" onclick="changeblue()" value="" width="20px" />
<input name="yellow" type="button" id="yellow" onclick="changeyellow()" value="" width="20px" />

NB: I would like to add that before using an input to get the color, i was using <p id="color"> </p>, the code was working perfectly, but don't know why with an input it didnt work.