How to make a div into a checkbox

I recently started coding and I want to know the best way to make a box into a checkbox. So I want to make a website where the user can choose colors by checking the colored boxes to pick the ones they want. I have researched and can't find a good answer. All the boxes should be clickable, as the user can choose more than one color. Grateful for any help!

Here is my html:

<div>
          <a href="#" class="color-box black-box" value="0">
            <h3>Black</h3>
          </a>
        </div>
        <div>
          <a href="#" class="color-box grey-box" value="0">
            <h3>Grey</h3>
          </a>
        </div>
        <div>
          <a href="#" class="color-box blue-box" value="0">
            <h3>Blue</h3>
          </a>
        </div>

</div>

and here is the CSS:

.color-box {
  width: 15.20833%;
  min-width: 15.20833%;
  height: 0;
  padding-bottom: 15.20833%;
  background-color: #fff;
  margin-top: 0.72917%;
  display: block;
  float: left;
  position: relative;
  margin: 7px 0.72917%;
  border: 1px solid transparent;
}

.color-box h3 {
  color: #fff;
  text-decoration: none;
}

.black-box {
  background: #000;
}

.grey-box {
  background: #9E9E9E;
}

.blue-box {
  background: #205DB1;
}