Html – How to create a small color box using html and css


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.

How can I do this?


Best Solution

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>