Why am I getting different colors in different browsers using the same hexadecimal value?

Admin 1
Viewed 1563

I set the selection color in my css file, using a hexadecimal value. The thing is, Firefox and Chrome do not render the same color out of this.

Do I need to specify something to make the code render the same?

I tried using the -webkit- and got nothing out of it. The hexadecimal value is the exact same I used for the text color. Everything, from rendering color to JS animations works perfectly with Firefox and IE, but Chrome does weird things.

On Chrome:

Chrome

On Firefox:

On Firefox

::selection {
  background: #f997f1;
}

::-webkit-selection {
  background: #f997f1;
}

::-moz-selection {
  background: #f997f1;
}

body {
  background: lightblue;
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}
<p>Some text to select</p>

css html
2 Answers

I can reproduce it in Chrome. It looks like it is because the selection is not completely opaque. If you set a background picture, you can see it shine through. This also means that the blue background color shines through, affecting the overall color of the selection.

I cannot (yet) find what exactly causes this and how to change it. Opacity doesn't work. The color is normal rgb... Anyway, proof of the cause can be seen here.

::selection {
  background: #f997f1;
}

::-webkit-selection {
  background: #f997f1;
}

::-moz-selection {
  background: #f997f1;
}

body {
  background: lightblue;
  background-image: url(https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}
<p>Some text to select</p>

user_5115290

Here's one solution; the problem is that Firefox doesn't apply an alpha and Chrome does, so you'll need to do it by yourself like this:

::selection {
  background: rgba(249,151,241,.6);
}

::-webkit-selection {
  background: rgba(249,151,241,.6);
}

::-moz-selection {
  background: rgba(249,151,241,.6);
}

body {
  background: lightblue;
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}
<p>Some text to select</p>

user_33032760
Related