I'm using an inline SVG as a cursor image:
#someElement{
cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' xml:space='preserve'%3E %3Ccircle cx='8' cy='8' r='8' fill='%23145afa' /%3E %3C/svg%3E") 8 8, auto;
}
The SVG's fill is set to #145afa (a light shade of blue). However, when testing this in Chrome and Firefox, the cursor's color does not match the color of other (regular HTML) elements on the page with a background-color set to the same hex-code. In Safari the colors match (as intended).
This snippet demonstrates the problem:
html {
cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' xml:space='preserve'%3E %3Ccircle cx='8' cy='8' r='8' fill='%23145afa' /%3E %3C/svg%3E") 8 8, auto;
}
#blue {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #145afa;
color: #fff
}<div id="blue">
<p>
my background-color is #145afa
</p>
</div>How/Why does this happen? Since the hex-code in the inline SVG and the hex-code of the div's background is the same, shouldn't the colors match?
EDIT: Responding to a comment, here's a photo of the mismatching colors on my screen:
