<ul class="color-with-marker">
  <li>These</li>
  <li>List Bullets</li>
  <li>are colored</li>
  <li>with</li>
  <li>::marker</li>
</ul>

<ul class="color-with-pseudo">
  <li>These</li>
  <li>List Bullets</li>
  <li>are colored</li>
  <li>with</li>
  <li>a pseduo-element</li>
</ul>

<ol class="color-with-svg">
  <li>These</li>
  <li>List Bullets</li>
  <li>are colored</li>
  <li>with</li>
  <li>SVG as a backround-image</li>
</ol>

.color-with-marker {
  list-style-position: inside;
}
.color-with-marker ::marker {
  color: red;
}

.color-with-pseudo {
  list-style: none;
  list-style-position: inside;
}
.color-with-pseudo li::before {
  content: "•";
  font-size: 130%;
  line-height: 0;
  margin: 0 0.3rem 0 -0.25rem;
  position: relative;
  top: 0.08rem;
  color: red;
}

.color-with-svg {
  list-style: none;
}
.color-with-svg li::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='red'/%3E%3C/svg%3E");
  background-size: 38%;
  background-repeat: no-repeat;
  background-position: left center;
  position: relative;
  top: 0.08rem;
}