GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Color swatch

HTML

<div class="swatch">
<div class="swatch__item" style="background-color: ..."></div>

<!-- Repeat other items -->
...
</div>

CSS

.swatch {
/* Wrap the items */
display: flex;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;

/* Space between items */
margin: 0.5rem;
}
Demo
Follow me on and to get more useful contents.