I would like to know how to change the color of font using small square div instead of drop down I can change my font to any color I want using the drop down but I have no idea how to change it using square div is it possible to change color using div squares here are my codes 

**Script for drop down** 

```js
$("#foo").change(function() {
  //alert($(this).val());
  $('.fid').css("color", $(this).val());
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
  <option value=" #ab3fdd">purple</option>
  <option value="yellow ">yellow </option>
  <option value="red ">red </option>
  <option value="orange">orange</option>
</select>

<div id="any" class="fid">
  hello world
</div>
```

**This is what I want to use to change color:**

CSS

```
.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

```

HTML

```
<div id=fid>
  <div class="foo blue"></div>
  <div class="foo purple"></div>
  <div class="foo wine"></div>
</div>

```