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]
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%
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.
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.
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).
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.
In my opinion, it's just history.
Yes, it's definitely a thing of the past. Place its importance right next to your marquee tags.
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.
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.
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.
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)
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.
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
Related
Im trying to calibrate/adjust my screen color configuration more towards a specific paint color like RAL.
Im using Encycolorpedia works great tot determine (what color) and even deltas between specific paints. However my screen doesn't come close to the real life situation, I've received a color wheel and oh my gosh... what a huge difference. So ordering paint online is an absolute no-no.
The big question how to close that gap between Adobe RGB Color and paint-colors like (Sikkens) RAL or Pantone? Something within the ICC profile of the monitor (which is a Samsung)?
I know there are color-spiders to calibrate screens, but I really wonder if there's an online database or which corrections or calibrated settings for monitors ?
You cannot do it. And possibly you do not have correct understanding of ICC, colour profiles, and RAL.
If you want to calibrate your screen, you should have a good screen (I recommend one "hardware calibrated", so you will not lose colours), and a calibration device. So you will have a good calibrated monitor, which display the correct colours. You will use the ICC file to tell the screen (or graphic card) how to handle colours, and to the program, so they know which range of colours they can use.
A ICC profile just tell a screen how to convert numbers (colours). An AdobeRGB profile will not make your screen to see AdobeRGB colours, it will just transform the colours so that you will have the "numbers" as expected by a 100% precise AdobeRGB screen (which never exist, so it is better to use device specific profiles). If your screen is not 100% AdobeRGB it will display some colours in an unexpected way. Our eyes may adapt colours (so for a single person, this is not a huge problem, but if you are doing a magazine, with 15 graphic editors, the reader want consistency (there is not time to adapt eyes for every image).
But then you go to Pantone and RAL: there are different kind of colour description (really, forget RGB for such colours: you need spectral distribution). These are for real objects, so they are seen with different lighting conditions (illumination), and an object can be seen in different colours (as RGB), but being of the same colour (as paint/dye).
And Pantone and RAL have discrete colours (enumerated colours, not homogeneously distributed). And for screens we just use LUT or LUT3D, so simple matrix conversion of received colour numbers to displayed colour numbers). Not a thing a screen can do so quickly (60 time per second, for every pixel).
Finally: screens are very different technologies as objects. There are some screens which create the same feeling (and also they seems more "opaque"), but this is not a thing we can every reach with standard (or most of good wide-gamut screens). And screens sucks on yellows and yellow greens (now I'm thinking at various RAL used for emergency). Out of reach for most monitors. An interaction with a soft printing is necessary (and you need a [frequently] calibrated printer).
Note: usually you get drivers for your monitor (look online for your monitor manuals and drivers [and look just at manufacturer website]). They will usually have the "driver", which it is a ICC profile. But this is just a "standard" profile. Monitors will change with time (either cold [at start-up] to hot), but also with long period using it. And different batched may be different (especially if produced in different places, common for very common monitors). If you use their profile, you should get better colours. If you calibrate yourself, you will have much better colours, but as I wrote, it is probably not possible to have good/very good matching colours.
I cannot understand why Apple's default terminal has only 16 colors, iterm2 etc support 256 colors, but X11's terminal supports true color (although its user interface is crappy).
My question is in two parts:
Why, in this day and age, are terminals not able to support higher colors (i.e., higher than 16 and 256)?
The last time I asked this, I only got rude comments like "Why don't you write one yourself"... I'm asking seriously, because I do not know about what goes into the internals of a terminal and why the constraint. Is it simply because there is no demand?
If I'm wrong and there are good terminals that support true color, could you recommend them?
My observations are based on a Mac, but other platform answers are welcome too, because they might be helpful to others.
KDE Konsole has true colour support, i.e. every character can have a different 24-bit colour.
Xterm and most other terminal emulators these days have a palette of 256 colours, whereby each of those colours can be chosen out of the full 24-bit range.
In the older days where terminals originate, they were hardware, and their colourfulness was limited by hardware constraints (i.e. memory shortage). Now we mostly use virtual terminals, which often emulate these older devices in software. So, one point is whether the software terminal actually emulates a device with its historical limitations.
Another point is that there are no conceptual limitations on colours, fonts or anything. This is because terminal is controlled by commands, which are simply special reserved sequences of characters. Commands are not standardized and differ from a terminal to a terminal. And that's exactly why there are virtually no such exotic functions implemented, as it would leave the users with two limiting options:
require all terminals to support the feature (which is not practically feasible)
limit the usage of the software to few particular terminals which do support the feature (which is highly unpleasant).
The third point I'd notice is that such features are not really needed by majority of people.
I know I'm very late for the party, but I found this :
a gist titled "True Color (16 million colors) support in various terminal applications and terminals", which gives information about which terminals support true colour and related discussions in the corresponding communities.
If you're looking for a quick link for Mac OS X, I just got iTerm2 nightly build and it works perfectly with true color:
https://iterm2.com/downloads/nightly/#/section/home
To answer the question about why this is useful: I do research on color, and being able to display colors right in the terminal is super useful for debugging/scripting/you name it.
Given two seperate computers, how could one ensure that colours are being projected roughly the same on each screen?
IE, one screen might have 50% brightness more than another, so colours appear duller on one screen. One artist on one computer might be seeing the pictures differently to another, it's important they are seeing the same levels.
Is there some sort of callibration technique via software you can do? Any techniques? Or is a hardware solution the only way?
If you are talking about lab-critical calibration (that is, the colours on one monitor need to exactly match the colours on another, and both need to match an external reference as closely as possible) then a hardware colorimeter (with its own appropriate software and test targets) is the only solution. Software solutions can only get you so far.
The technique you described is a common software-only solution, but it's only for setting the gamma curves on a single device. There is no control over the absolute brightness and contrast; you are merely ensuring that solid colours match their dithered equivalents. That's usually done after setting the brightness and contrast so that black is as black as it can be and white is as white as it can be, but you can still distinguish not-quite-black from black and not-quite-white from white. Each monitor, then, will be optimized for its own maximum colour gamut, but it will not necessarily match any other monitor in the shop (even monitors that are the same make and model will show some variation due to manufacturing tolerances and age/use). A hardware colorimeter will (usually) generate a custom colour profile for the device under test as it is at the time of testing, and there is generally and end-to-end solution built into the product (so your scanner, printer, and monitor are all as closely matched as they can be).
You will never get to an absolute end-to-end match in a complete system, but hardware will get you as close as you can get. Software alone can only get you to a local maximum for the device it's calibrating, independent of any other device.
What you need to investigate are color profiles.
Wikipedia has some good articles on this:
https://en.wikipedia.org/wiki/Color_management
https://en.wikipedia.org/wiki/ICC_profile
The basic thing you need is the color profile of the display on which the color was seen. Then, with the color profile of display #2, you can take the original color and convert it into a color that will look as close as possible (depends on what colors the display device can actually represent).
Color profiles are platform independent and many modern frameworks support them directly.
You may be interested in reading about how Apple has dealt with this issue:
Color Programming Topics
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DrawColor/DrawColor.html
You'd have to allow or ask the individual users to calibrate their monitors. But there's enough variation across monitors - particularly between models and brands - that trying to implement a "silver bullet" solution is basically impossible.
As #Matt Ball observes calibrating your monitors is what you are trying to do. Here's one way to do it without specialised hardware or software. For 'roughly the same' visual calibration against a reference image is likely to be adequate.
Getting multiple monitors of varying quality/brand/capabilities to render a given image the same way is simply not possible.
IF you have complete control over the monitor, video card, calibration hardware/software, and lighting used then you have a shot. But that's only if you are in complete control of the desktop and the environment.
Assuming you are just accounting for LCDs, they are built different types of panels with a host of different capabilities. Brightness is just one factor (albeit a big one). Another is simply the number of colors they are capable of rendering.
Beyond that, there is the environment that the monitor is in. Even assuming the same brand monitor and calibration points, a person will perceive a different color if an overhead fluorescent is used versus an incandescent placed next to the monitor itself. At one place I was at we had to shut off all the overheads and provide exact lamp placement for the graphic artists. Picky picky. ;)
I assume that you have no control over the hardware used, each user has a different brand and model monitor.
You have also no control over operating system color profiles.
An extravagant solution would be to display a test picture or pattern, and ask your users to take a picture of it using their mobile or webcam.
Download the picture to the computer, and check whether its levels are valid or too out of range.
This will also ensure ambient light at the office is appropiate.
I especially hear it from those advocates of "business" notebooks manufactured by IBM/Lenovo, HP, Dell (maybe) that "business users do not need quality screens". They stick in the worst possible LCDs out there (even if with a high resolution) and dare to sell that crap. You can't even distinguish hue variations like light-yellow vs. light-grey.
I really miss it - do all of you agree color reproduction of a developer display is irrelevant, be it even a grayscale display it will do?
I understand most of developers work with text but... at times there is some design work to be done which is not doable on cheap LCDs.
And besides - wouldn't you enjoy fresh saturated colors even in a development environment? Bright cheerful icons on menus? Isn't it better to sit in a sunny office with green trees and flowers out of the window than in a garage with dark colors and weak artificial lighting?
P.S. Inspired by the topic about keyboards: Keyboard for programmers
The question about displays and developers really interests me since a very long time.
Even though I don't need a high quality screen, I appreciate the difference, and like esnoeijs said, an occasion will arise where I'll need to critique some graphic design work where the quality monitor will make a difference.
I think, "developer" is too broad to give a precise answer.
If you are a code-crafter of programs reading text emitting text, without the need to make some colors look nice, then yes, then you really can go with a monochrome screen. you need black as a background, white as the foreground and some reversing to highlight matching braces. In this particular case, I would value high resolutions far far more important than colors, since usually it is about seeing more code (and especially, more things about and around the current piece of code, like documentation, tests, a quick interpreter loop, some research paper, you name it).
If you are a developer just learning a language and if you have an editor with syntax highlighting, then color is a massive, massive usability leap. I would not want to miss the ability to display keywords in a bright pink, strings in a brigt cyan and similar things (all on a black background)
If you are a frontend-designer, then it is a completely different story. If you are a frontend designer, you will need a high quality display with good color display abilities. You do not need the best one possible, but your display should at least be able to display the colors your regular user will use, so you will not put in green, because you wanted blue and your users see yellow (or other nonsenses).
if you use tools that require the use of colors in order to encode information, color is crucial, because you might be unable to see the additional information.
...
So, I think, most programmers do not need some ridiculous color displaying abilities, even though, most of the time, a good solid color display is helpful, because they need to work on some frontend or because they want to learn some language.
HTH,
Tetha
Better quality color monitors can come in handy in a lot of ways. The first way that comes to mind is if you are using a code development tool that has the capability of highlighting keywords such as Zend does.
I once spent half a day trying to add zebra striping to a table in my company's webapp that already had it because both my screen and QA's screen were unable to display the different colors of the zebra stripes (they rendered as the same color). Likewise, I once had my boss ask me to change the color of part of an icon, and to me it made the icon look like a uniform blue, but on his much better monitor, you could clearly see both shades of blue and it looked really nice... it was hard to make that edit without being able to see what I was doing.
I guess the developers in my company end up doing some design work in addition to real dev. I do spend most of my time in the shell though, so aside from the constant flickering that gives me headaches (yes, it's an LCD), a low-qual monitor is OK.
I'm a developer but being in webdev land i've picked up enough design stuff to be critical about it, so i mostly try to get samsung screens with a good colour range.
With a good monitor, you can adjust it to your likings.
Personally, I have a $700-Fujitsu Siemens monitor bought in (afaik) 2000, and a $340-BenQ bought in 2005, and I prefer coding on the first monitor, as I don't have to crank up the brightness (reducing headaches) and can still see everything I want to see (subpixelhinted 6 point fonts, subtle variations in syntax highlightings etc.).
At least one author would disagree. He ranked color accuracy on four notebooks:
Lenovo ThinkPad W700
IBM/Lenovo ThinkPad T60
Dell Inspiron Mini 9
Apple late-2008 MacBook Pro 15 inch
I'm less picky about the actual monitor I have and more picky that I have two monitors that are exactly the same model and use the same video connector.
As a web developer, it can be frustrating to have colors that don't match because one of your monitors is VGA and the other is DVI.
Possibly the sort of "business user" who works on invoices all day does not need a very good display, but anyone who works on anything whose appearance counts, from software developers to business users who need to make Powerpoint presentations, does.
If you are a hardcore terminal+vim user like me, they color quality and fidelity are almost irrelevant, except for the quality of blue (which I use in some situations, like directory names) which tends to be too faint to be seen on my black background. Nothing that cannot be fixed with some tinkering though, but I am used to blue.
That said, I actually have a couple of things to say about the new screen on the macbook unibody. The glossy finish is a real pain. So annoying. And the color fidelity is very low. I spent an evening trying to understand why on a gradient from light green to white I had a pinkish stripe. Turns out that the pink is an artifact of the macbook screen. Another screen does not show the issue. On the plus side, the LED backlight is very powerful and nice, making the colors very vibrant.
This to say that color fidelity is fundamental if you use color-intensive stuff like eclipse (which communicates a lot also through different shades of colors), and of course for web frontend development. If you just need a terminal and a vim running, I don't think color fidelity makes a real difference, once you have a comfortable setup with low reflections, and a good contrast.
(note: it's been a few years since I've shopped for a monitor. this may be out of date)
I find it interesting that nobody has really defined "quality" yet, other than to say more vibrant colors. Generally, LCD panels fall into one of two tracks:
Good color/image reproduction (S-IPS panels and similar)
Good response time ( TN panels )
I consider SIPS and similar panels a must for development for one crucial reason: look angle. The image doesn't change colors or do other weird things as you angle to the screen changes. Very important for collaboration.
At the high end of this scale are monitors that are designed to perform will with color calibration. Most developers won't need anything this fancy.
TN panels are decent for gaming, movies, and other things featuring fast motion. They are optimized for pixel response time, and it's usually the main feature touted for these panels. Many cheaper panels are going to be of this variety.
In a monitor, I look for four things:
panel type (S-IPS or similar)
brightness (no more than 300cd/m2)
dot pitch (for good text, go with a small dot pitch: 0.27 is too big)
good contrast/ light leakage/ etc. (how black is black, and how uniform)
Although I love S-IPS panels, I must admit that any LCD monitor that can meet criteria 2-4 above would be a good choice, even if it's a cheaper TN panel.
It depends what you're doing.
If you're dealing processing images, yes, a good "quality" monitor is important.. but equally (or more) important to have it set-up correctly and calibrated.
If you're doing web-design, having a decent monitor is important, but again only if it's setup correctly (contrast/brightness/colour-balance).
If you're just "writing code", having a monitor your eyes like is important, the colour replication isn't important. A monochrome monitor might be stretching it, syntax-highlighting is nice, but even vim and it's 16 colours is "enough"
The term quality is also a bit "it depends" also.. CRT's have far better colour replication than TFT's, but I wouldn't recommend them (I always found reading text on them difficult, and they are hard to find, bulky and generally deprecated now).
For web-design, pretty much any monitor will be fine as long as it's not a 10 year old CRT with a broken red cathode-tube.. Again, as long as it's set-up correctly, most monitors are capable of displaying colour "good enough"
For "writing code", I think size/resolution/number-of-screens is more important than colour replication, as shown by most answers to any of these questions
Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree » Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.