.fh-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex: 0 0 16px;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
  vertical-align: middle;
}
.fh-color-dot--black { background: #1c1c1c; }
.fh-color-dot--white { background: #f7f5ef; border-color: rgba(0,0,0,0.18); }
.fh-color-dot--gray,.fh-color-dot--grey { background: #9a9a9a; }
.fh-color-dot--beige { background: #d8c3a5; }
.fh-color-dot--cream { background: #efe6d6; }
.fh-color-dot--ivory { background: #f4efe2; }
.fh-color-dot--taupe { background: #9c8b7a; }
.fh-color-dot--brown { background: #7a5a43; }
.fh-color-dot--terracotta { background: #c96f4a; }
.fh-color-dot--orange { background: #d9853b; }
.fh-color-dot--yellow,.fh-color-dot--mustard { background: #d4af37; }
.fh-color-dot--green,.fh-color-dot--sage { background: #8fa27a; }
.fh-color-dot--olive { background: #7b8450; }
.fh-color-dot--mint { background: #a9c5b0; }
.fh-color-dot--teal { background: #4f8f8b; }
.fh-color-dot--turquoise { background: #58b7b2; }
.fh-color-dot--blue { background: #6f8fa8; }
.fh-color-dot--navy { background: #334a64; }
.fh-color-dot--pink { background: #d8a7ad; }
.fh-color-dot--blush { background: #dfb8b0; }
.fh-color-dot--red { background: #b84b4b; }
.fh-color-dot--burgundy { background: #7d2f3c; }
.fh-color-dot--purple,.fh-color-dot--plum { background: #7e648a; }
.fh-color-dot--neutral { background: #c5beb5; }