Member Avatar for SergioQ

Am making my website with a BGCOLOR of #FFFFCC in the body element. Then my icons are transparent GIFs using the same color value as a the matte.

Here is my question, as I am not too familiar with browsers and all. I know that not all browsers will show all colors the same way.

So am curious, is there a way to find out how safe my background color is across browsers?

Thanks all

  • 4 Contributors
  • 3 Replies
  • 86 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by DangerDev

Dani AI

Generated

— your setup (page background plus icons keyed to that matte) is a perfectly valid simple approach, but it does make the icons fragile to differences in image palettes and device color handling. , and are right to flag browser/device variation and the need to test.

Practical, low-effort fixes: move away from color-keyed GIF mattes and use formats that support true alpha or vectors so icons simply blend into whatever background you choose. Make sure exported images are saved with an sRGB profile so browsers render the same RGB values. Control the page color with CSS (not a deprecated attribute) and, where possible, source icons as SVG or PNG-24 with alpha so there is no need to match a matte.

Testing and verification: check pages on multiple real devices and use cross-browser services to catch odd cases (for example, BrowserStack). Sample rendered pixels with your browser dev tools to confirm the displayed hex, and, if you need a stricter check, take screenshots and run a pixel-diff to quantify differences (ImageMagick can do this). Expect small shifts from monitor calibration; if absolute exactness is required, prefer vector icons or CSS-driven colors so the same value is applied by the browser. For background on formats and color handling see MDN: Image formats and CSS color.

Recommended Answers

All 3 Replies

Member Avatar for MattEvans

Use only the colours from the Web-Safe pallete: they are supposed to be the same everywhere. I find that I only need to use the websafe pallete with GIFs; other image types ( ie. PNG's ) tend to always look OK... But, transparency with PNGs is a problem in browsers older than or the same age as Internet Explorer 6...

Member Avatar for HI2Japan

Doubled up letters the way you have it (i.e. FF, FF, and CC) will always be web safe colors. Of course the web safe colors are only as good as the browser/graphic card rendering it. The abilities of the computer when it comes to color are not as worrisome as they were back in the day though.

Member Avatar for DangerDev

hi
whenever u r developing the website use 3 or 4 browsers to see the result, and after the development of each and every step see the result on every browser this is the only way to check the compatiblity with not only colors but with elements too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.