.eye-color-amber {
  background-color: #B36800;
}

.eye-color-black {
  background-color: black;
}

.eye-color-blue {
  background-color: #2E536F;
}

.eye-color-bronze {
  background-color: #CD7F32;
}

.eye-color-brown {
  background-color: #634E34;
}

.eye-color-burgundy {
  background-color: #4D0013;
}

.eye-color-charcoal {
  background-color: #0A0A0A;
}

.eye-color-copper {
  background-color: #B87333;
}

.eye-color-dark {
  background-color: #2A1B0E;
}

.eye-color-dark-gray {
  background-color: dimgray;
}

.eye-color-espresso {
  background-color: #4E2A2A;
}

.eye-color-gold {
  background-color: gold;
}

.eye-color-gray {
  background-color: gray;
}

.eye-color-green {
  background-color: #3D671D;
}

.eye-color-hazel {
  background-color: #8E7618;
}

.eye-color-ice-blue {
  background-color: #CFF2FF;
}

.eye-color-light-green {
  background-color: #d7f9d7;
}

.eye-color-orange {
  background-color: #FF9500;
}

.eye-color-pink {
  background-color: lightpink;
}

.eye-color-purple {
  background-color: #7954A1;
}

.eye-color-red {
  background-color: darkred;
}

.eye-color-silver {
  background-color: #C0C0C0;
}

.eye-color-yellow {
  background-color: #8F7A10;
}

.color-sample {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--bs-gray-50);
  align-self: center;
  vertical-align: text-top;
}