0

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>
jx3
  • 921
  • 1
  • 7
  • 22
  • I can't reproduce the issue, for me the cursor is the same color (see https://i.stack.imgur.com/E8Go5.png for a screenshot when running your code snippet). – Marijn May 24 '23 at 14:48
  • So strange. Which browser and OS are you using? I'm using Chrome, MacOS – jx3 May 24 '23 at 15:59
  • I tried it on Firefox in Linux, there the issue does not appear. However, just now I tried Chrome as well and there I do see the issue, the cursor is a darker yellow/orange than the square in the background. – Marijn May 24 '23 at 18:36
  • 1
    Some more experimentation shows that https://stackoverflow.com/questions/6237455/chrome-renders-colours-differently-from-safari-and-firefox is the problem. When I set the color profile in Chrome to sRGB (following [this answer](https://stackoverflow.com/a/50465374/5763564) to that question) then the colors of the cursor and the background are the same. Of course this is not a very good solution as most visitors of a page will not have that color profile setting. – Marijn May 24 '23 at 18:43
  • Well spotted. Gosh, not super encouraging it's been around since 2016! Guessing there's no way around it? – jx3 May 24 '23 at 22:00
  • I guess if you draw the swatch as an svg too then the colors would at least be the same within each browser. – Marijn May 25 '23 at 06:09
  • Good point. The only issue is I'm actually trying to match to the favicon, rather than anything on the page. Such an annoying problem! – jx3 May 25 '23 at 07:19

0 Answers0