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

Question

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:

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>

Please create a minimal, concrete and verifiable example (like a code snippet) in your answer: it's really difficult to see if there are any other styles influencing the colours based on the screenshot alone. — Terry, Oct 27 '18 at 12:55
Using the code provided (which may be too minimal to demonstrate the problem) I can see no evidence of the issue shown in your screenshots. The text color appears to perfectly match the selection background color in Chrome. The screenshots suggest that there may be a slight transparency in the selection color, allowing some of the light blue background to show through. — Fred Gandt, Oct 27 '18 at 14:08
Hey! I see the same as you WorlderZee! It's because Chrome applies an alpha/opacity to it. Let me see if we can change that.. — Juan Elfers, Oct 27 '18 at 14:16
I added a lightblue background to the demo snippet which I estimated from your provided screenshots and sure enough, the issue is evident. This is why we ask that you always provide a [Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve) of the code you're currently working with. I was right in assuming that Chrome's selection appears slightly transparent. Now the question is more complete, hopefully you'll get helpful answers. — Fred Gandt, Oct 27 '18 at 14:19

score 2 · Accepted Answer · answered Oct 27 '18 at 14:21

2

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>

answered Oct 27 '18 at 14:21

GolezTrol

114,394
18
182
210

It seems like a feature attempting to avoid inaccessible text by setting the `::selection` `background-color` to the same `color` as the element's – ksav Oct 27 '18 at 14:27
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Accessibility_concerns . Strange that Firefox wouldn't implement the same functionality then? – ksav Oct 27 '18 at 14:36
1

@ksav Firefox (apparently) allows you to override the default semi-transparent color, while Chrome doesn't. – GolezTrol Oct 29 '18 at 07:28

score 2 · Answer 2 · edited Oct 27 '18 at 14:25

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>

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

2 Answers2