Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.


<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

    function change(i) {

      var elements = document.getElementsByClassName("color");
      for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor="blue";
        }
     

    }

<!-- language: lang-css -->

    .div-1 {
      background-color: orange;
      width: 50px;
      height: 50px;
      float: left;
      margin: 5px
    }

    .div-2 {
      background-color: black;
      width: 50px;
      height: 50px;
      float: left;
      margin: 5px
    }

    .div-3 {
      background-color: green;
      width: 50px;
      height: 50px;
      float: left;
      margin: 5px
    }

    .div-4 {
      background-color: red;
      width: 50px;
      height: 50px;
      float: left;
      margin: 5px
    }

    .color {
      background-color: transparent;
      border: 2px solid #000;
      width: 50px;
      height: 50px;
      float: left;
      margin: 5px;
    }

<!-- language: lang-html -->

    <div class="div-1" onclick="change('orange')"></div>
    <div class="div-2" onclick="change('black')"></div>
    <div class="div-3" onclick="change('green')"></div>
    <div class="div-4" onclick="change('red')"></div>

    <div class="color"></div>

<!-- end snippet -->