Custom SVG cursor colour incorrect

Question

I'm using a custom cursor made from an SVG.

Despite using the exact same hex code as the swatch below #FFE420, you can see the cursor is a different colour.

Why is this the case and how can I fix it?

Thanks

* {
  cursor: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16z" fill="%23FFE420"/></svg>'), auto;
}

.swatch {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: block;
  background-color: #FFE420;
}

<div class="swatch"></div>