La diferencia radica en lo que devuelve cada uno de los métodos:
Por id
document.getElementById("color");
La id, al considerarse que debe ser una clave única, devolvería un solo elemento, el que tenga como atributo id el valor color.
Por clase
document.getElementsByClassName("color");
La clase, al ser una clave que puede darse en múltiples elementos de tu DOM, devuelve un array. Por ello, para poder referenciar a <div id="color"></div>
deberías hacer:
document.getElementsByClassName("color")[0];