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