How can I create a small color box using html and css?

Question

I have a picture on a html file/site and I want to add the list of available colors for that picture. I want to create very small boxes or dots, a small box for every color.

Answer 1

You can create these easily using the floating ability of CSS, for example. I have created a small example on Jsfiddle over here, all the related css and html is also provided there.

.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;
}

<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>

Answer 2

If you want to create a small dots, just use icon from font awesome.

fa fa-circle