Are web-safe colors still relevant?

Colors

Colors Problem Overview


Since the vast majority of monitors are 16-bit color or more, including mobile devices, does it make sense to even consider web-safe colors when choosing color schemes? Or is it something that ought to be relegated to history as a piece of trivia?

For those of you that don't know what web-safe colors are:

> Another set of 216 color values is commonly considered to be the "web-safe" color palette, developed at a time when many computer > displays were only capable of > displaying 256 colors. A set of colors > was needed that could be shown without > dithering on 256-color displays; the > number 216 was chosen partly because > computer operating systems customarily > reserved sixteen to twenty colors for > their own use; it was also selected > because it allows exactly six shades > each of red, green, and blue (6 × 6 × > 6 = 216). > > The list of colors is often presented > as if it has special properties that > render them immune to dithering. In > fact, on 256-color displays > applications can set a palette of any > selection of colors that they choose, > dithering the rest. These colors were > chosen specifically because they > matched the palettes selected by the > then leading browser applications. [Wikipedia]

Colors Solutions


Solution 1 - Colors

For me web safe color palette is no longer primary concern. Optimize for the largest target audience.

According to w3schools site visitors:

  • In January 2009 1% of site visitors had 256 color displays, 95% of users had 24 or 32 bit.

  • [Update] In January 2015 0.5% had 256 colours, 0.5% had 24 bit and 99% had 32 bit

I found similar numbers from a business app site that I look after:

32-bit  79.01% 	

24-bit  15.64% 	

16-bit  5.27% 	

8-bit   0.08%

Solution 2 - Colors

I don't think web safe colors are relevant any more. To me, a much bigger problem for smartphones are all the fixed-width 960-pixel wide web pages.

Solution 3 - Colors

I think the most important thing when choosing a colour palette is keeping in mind colour-blindness. There are a few different types that I know of, but the main thing is making sure that you have enough contrast between colours.

For example green text on a red background might be easier for some to read, but very difficult or maybe impossible for others (5-10% of males!), especially if the values of the colours are close.

Solution 4 - Colors

For those of us (like me) that didn't know exactly what web safe colors are, they were

> developed at a time when many computer > displays were only capable of > displaying 256 colors. A set of colors > was needed that could be shown without > dithering on 256-color displays; the > number 216 was chosen partly because > computer operating systems customarily > reserved sixteen to twenty colors for > their own use; it was also selected > because it allows exactly six shades > each of red, green, and blue (6 × 6 × > 6 = 216). > > The list of colors is often presented > as if it has special properties that > render them immune to dithering. In > fact, on 256-color displays > applications can set a palette of any > selection of colors that they choose, > dithering the rest. These colors were > chosen specifically because they > matched the palettes selected by the > then leading browser applications.

It's hard to imagine any of this applying to today's modern displays, since almost nobody runs their display in 256 colors anymore (unless perhaps they are playing an old version of Leisure Suit Larry).

Solution 5 - Colors

In my opinion, its history.

Solution 6 - Colors

It depends what you mean by web safe colours.

In terms of 16bit colour it's probably not worth worrying about. However Colours do not appear the same across devices. This can lead to all sorts of problems particularly if a designers gamma settings are different to your particular monitor set up.

So you still need to test your design across multiple set ups.

Solution 7 - Colors

Yes, it's definitely a thing of the past. Place its importance right next to your marquee tags.

Solution 8 - Colors

IMHO the point is really moot. Colors that aren't web safe are dithered anyway. It may not look the best in 256-color modes but as long as functional elements of the page/applications are not dependent on those colors it will not disturb the user experience that much.

Also most users surfing in 256-color modes will be aware of the fact colors will be dithered as I don't think that a lot of sites adhere to the web-safe colorschemes anymore.

Solution 9 - Colors

According to research, even the web safe colors were not web safe. It was an interesting idea while it was relevant, thankfully that's over now.

Solution 10 - Colors

Web safe colors are pretty much not a problem anymore unless you are dealing with consumers that will have legacy (think > 10 year old) video display equipment.

Solution 11 - Colors

It's still important if your target very poor to developing nations, such as countries in here south asia. I personally have a full blown IPS monitor with Windows 10, so it's not a problem to me, but we are minorities, and majority of them have old hardware/computers/operating systems except mobiles phones, as it's cheap to buy a latest mobile phone, but computer hardware are expensive due to the taxes/ import cost etc.. compared to the salary of an average person.I personally witnessed many people still use old Windows XP, 98 PC with 256 colors on Pentium 4 processors. So if you target such audience, it's better to use web safe colors, but if you are doing a business it's not worth, as they are less likely to be your customers, but if you are doing an information site, a blog, an activist site that people can read and get informed without having to pay for something then always use fallback theme or something with web safe colors. since such people are mostly on windows xp/98, try to detect the OS, and if the user is from such operating systems, then use the fallback theme.

So remember that, most of people in this world are poor, and most of people still use old hardware and technologies. If you want to cover them all without working a lot hard on your current theme, then always use fallback themes. One for old mobiles, one for old desktop displays, one for modern displays and modern mobiles (responsive)

Solution 12 - Colors

Some colors do not display on some mobile devices. (trying to make a list)

The title bars are supposed to be a blue fade from CSS:

background: linear-gradient(to bottom, #0099CC1, #0033CC) repeat-x scroll 0 0 #006DCC;

On many devices the background is not visible, and the header looks like white-on-white.

Solution 13 - Colors

So, I'm just trying to explain the tip to determine browser-safe colors just by looking at its hex code

For a hex color #xxyyzz, the color is browser safe if

  • For pairs:

  • position 12 i.e xx values are same

  • position 34 i.e yy values are same

  • position 56 i.e zz values are same

  • Allowed values are

  • 0

  • 3

  • 6

  • 9

  • C

  • F

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGavin MillerView Question on Stackoverflow
Solution 1 - ColorsLeahView Answer on Stackoverflow
Solution 2 - ColorsNosrednaView Answer on Stackoverflow
Solution 3 - ColorsMatthew RapatiView Answer on Stackoverflow
Solution 4 - ColorsRobert HarveyView Answer on Stackoverflow
Solution 5 - ColorsChickenMilkBombView Answer on Stackoverflow
Solution 6 - ColorsTimView Answer on Stackoverflow
Solution 7 - ColorsnatasView Answer on Stackoverflow
Solution 8 - ColorsRoberto De VivoView Answer on Stackoverflow
Solution 9 - ColorsJordan ReiterView Answer on Stackoverflow
Solution 10 - ColorsBrianView Answer on Stackoverflow
Solution 11 - ColorsDon DilangaView Answer on Stackoverflow
Solution 12 - ColorsTomTerrificView Answer on Stackoverflow
Solution 13 - ColorsxameeramirView Answer on Stackoverflow