3

Hi im new to web development but i've noticed a problem with the colorization of my site; when i set the css background color to gray, the same site displays differently. Firefox displays the site in a shade lighter than chromium.

I've tried searching online and on this site, but all the results that i've seen were irrelevant (they talk about fonts being displayed differently)

please visit my github.io site (https://kingsslave.github.io) to see the problem live, but if you dont want to, here is the css I used:

body{
    margin:0;
    background-color:gray;
    width:100%;
}

if you want, I can post everything here. I also took a screenshot that shows the problem: https://kingsslave.github.io/images/screenshot.png

I want to make the color the same on all browsers. Any help you can provide would be really appreciated.

Thanks in advance!

kingsslave
  • 33
  • 3
  • 1
    Instead of using keywords like 'gray', consider using color hex values to set you color. – Wimanicesir Jun 27 '19 at 09:20
  • 1
    @Wimanicesir AFAIK `gray` is `gray`. AKA: `#808080` **everywhere**. – Roko C. Buljan Jun 27 '19 at 09:22
  • Adding to @Wimanicesir , [this](https://stackoverflow.com/a/2054534/6024572) seems relevant. – Gaurav Singh Jun 27 '19 at 09:22
  • Also, read 2nd paragraph at [this](https://en.wikipedia.org/wiki/Web_colors#X11_color_names) section of wikipedia article on Web colors. – Gaurav Singh Jun 27 '19 at 09:26
  • 1
    The color name should be fine, could be related to this: https://stackoverflow.com/q/48129374/723769 – Jona Jun 27 '19 at 09:27
  • @Wimanicesir i just tried #aaa but the colors are still being displayed differently – kingsslave Jun 27 '19 at 09:29
  • I'd say _everything_ looks darker in Chromium, not just the color `grey`. Compare other areas. Also your screenshot doesn't seem consistent with the site. The screenshot seems brigher. `grey`s on it are `111` (chromium) and `170` (firefox); not `128`. – akinuri Jun 27 '19 at 10:05
  • Also people can't guess your exact problem. They should be able to reproduce it, and to do that, they need to know all the variables, e.g. OS, browser (+version), monitor (calibration?), etc. – akinuri Jun 27 '19 at 10:08

2 Answers2

3

There are many theories for this as Chrome renders colours differently from Safari and Firefox. you can check more about that here

  1. Colours are different in different browsers
  2. Color Rendering Difference: Firefox vs. Safari
  3. Web browser color management guide
  4. How Your Web Browser Affects the Way Colors Are Rendered
  5. Chrome NEEDS to support Colour Management like it's competitors.

Hope this will help you to understand

Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
0

Try using #808080 instead of grey.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Braiden Govender
  • 1
  • 1