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.

How can I do this?

Thanks!

Answer 1

With old browsers, you would often use float, but then you would need a clearfix so this approach is not used often these days.

.box {   float: left;   width: 20px;   height: 20px;   border: 1px solid rgba(0, 0, 0, .2); }  .blue {   background: #13b4ff; }  .purple {   background: #ab3fdd; }  .wine {   background: #ae163e; }

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

In modern browsers, the easiest way is with flexbox:

.wrapper {   display: flex; }  .box {   width: 20px;   height: 20px;   border: 1px solid rgba(0, 0, 0, .2); }  .blue {   background: #13b4ff; }  .purple {   background: #ab3fdd; }  .wine {   background: #ae163e; }

<div class="wrapper">   <div class="box blue"></div>   <div class="box purple"></div>   <div class="box wine"></div> </div>

Or alternatively with display: inline-block:

.box {   display: inline-block;   width: 20px;   height: 20px;   border: 1px solid rgba(0, 0, 0, .2); }  .blue {   background: #13b4ff; }  .purple {   background: #ab3fdd; }  .wine {   background: #ae163e; }

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

Answer 2

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

fa fa-circle