Colours on the web | Bit depth, gamut, sRGB, Adobe RGB and more!

This is a thread I created for a different forum, but I guess spreading knowledge doesn't hurt. I recently now freshened it up.

Introduction
A while back I found a thread by some member on a different forum. He asked,
How can i fix colors in photoshop because they are really different than on computer and web?

So this is an issue I have looked in to a lot because I work a lot with professional photos (I don't take pics, I suck at that). We publish a lot of them on the web, and only a month or two back I noticed how absolutely shit an image looked, so I just had to look it up and learn about it. Here's a summary of what I have learned.

I was about to write a reply to it when I realized that this might be an interesting topic to not only cover, but also discuss.
This thread is split up in 4 sections; "Colour bit depth", "Gamut", ?The Web, then at the bottom "Summary".
You can read through it all, or skip to a title you that seem intriguing to read about.

There may be some incorrect things here and there, or something not fully correct. Feel free to correct that. If possible, also include something to back up your claims, as it will help prove youre not just wrong yourself too.

Colour bit depht

Getting started
Image quality vary depending on several factors, in the case of colours it's bit depth and colour mode (mainly).
Normal and most computer screens these days use 8-bpc (bits per channel) colours. .JPG files cannot is limited to max 8-bpc, so you cannot use the 16/32 Bits/Channel (bpc) however it can make a difference due to dithering. More on dithering later. A .PNG file can hold more, but more on that later.

So, what is bits per channel (bpc)? Simply put, its the amount of variation in colours you can have. You may think I mean gamut, but that's another side of the same coin.

First of all, I want you to watch this video. Watch it once, or maybe twice.

While gamut is a spectrum of colours you can choose from, bit depth is more of steps. Bellow is an illustration showing bit depth and gamut. Greyscale itself is another topic I wont go in to, so ignore that and pretend it can be anything.



Simplifying bits as an introduction
As the image example illustrate, gamut is the range of colours and bit is the steps. Like a stairway going from some place high to some place low over a span of say 10 meters (this would be the gamut), you can have 1 step (bit) for every meter, or maybe 3 steps (bits) for every meter. 10 steps over 10 meters is quite noticeably large steps, but 10 steps over 1 meter is very small.

If you have many enough steps, it basically becomes a smooth slope. Thats what happens with colours too, a smooth gradient.

8 bpc and 10 bpc | 8/24 bit/bpc and 10/30 bit
So, 8 bit (bpc) is a standard, then you have a higher one which is 10 bpc. Now 10 bpc may also be referred to as 30 bit. Its 10+10+10 bits. 8 bit can be referred to as 24-bit or 32-bit. Here's why. As mentioned earlier, bpc means bits per channel, and you have three main channels: Red, Green and Blue.

So that means you have 8 R, 8 G, 8 B. That's a total of 24 bit. But you also have another 8 bpc, which is alpha, giving a total of 32.
Naturally, same rule apply for the 10/30 bit. 10 R, 10 G, 10 B.

10 bit means you get more steps, which can eliminate an issue that often occur for people that does retouching of images. Ever seen those bands while you make that smooth gradient? Yeah, those are called "colour bands".

Now this is caused by your computer not being able to have enough colours to work with, so what can you do? Introduce more bits. Now this wont magically make it go away, you have to edit again. Think of it as pouring water in to a bigger bucket. The bucket gets bigger, but you dont get more water until you add some more in it.

How bits are calculated
If you're a programmer, you might already know what a bit is. That's basically the starting point for colours too. One bit has two values in programming.

Therefore to calculate colors, you need to use ascending. If you have 2 bits, you have 4 colours. If you have 4 bit, you have 16.
1 bit = 2 values, ascended by amount of bits. 2^1 = 2, 2^2 = 4, 2^4 = 16 and so on. Now this is where it gets confusing.

The words, small differences in them and so on are used interchangeably, like italic and oblique although they have to with the same thing, they are indeed different and therefore can cause missleading information. Even this thread might have as I have read up through various other sources.

If an image uses 8-bit color (calculated as 2^8) that means it has a maximum of 256 colours. But jpg uses 8-bit, and it clearly supports more than just 256 colours!? JPG uses 8 BPC, not 8-bit color or have an colour depth of 8 bit (although it's possible). '8-bit color' actually means BPC, which I will go in to in the section bellow. As you might have learned in art-class in primary school, RGB is only the primary colours. With RGB, you can create other colours. Therefore an 8 bit channel (bpc) can create 256 shades of, say, green. That means we can get much more colours by combining them. To calculate the amount of colours you can get from a bit depth, you simply do the following: bit^depth^3 (3 being Red, Green and Blue). Lets do this step by step.

A bit has two values, 0 and 1. On and off, so basically we always have 2^depth^3.
If we have an eight bit, its 2^8^3.
2^8 gives us the 256 shades of one colour.
So again; we can mix one colour with another to get a new one.
That means we can multiply like this 256x256x256, or in simplified math; 256^3.
That gives us 16 777 216 (over 16 million) colours!
8x3 = 8+8+8 = 24 (8 is bpc (Bits Per Channel).
24 is the bit depth, also referred to as the colour depth (your monitor most likely has this colour depth).

2^8 = 2x2x2x2x2x2x2x2 = 256
256^3 = 256x256x256 = 16777216 (These 16 million colours are referred to as ?True colour)
So let's try this with 10 bpc. 2^10 = 1024 1024x1024x1024 = 1 073 741 824. That's over 1 billion.

Be it noted though that some colour depths do not have equal amount of bits per channel. For example with 8 bit (8 bit colour depth) it does not divide in to three (RGB). Its channels are RRR, GGG, BB (8 bits, 8 channels). It uses less blue as the human eye cannot perceive as much of the blue spectrum as it can with the red or green, the latter being the biggest and thus what is usually expanded when switching between colour spaces. I go more in on that later in the gamut section.

Bits Per Pixel vs. Bits Per Channel
A pixel on your screen is made up of other smaller components. Technically when referring to these smaller parts that makes up a pixel its called BPP (Bits Per Pixel). One bpp means theres one component being either on or off, and makes up one pixel. Or you can have 4 bpp, which gives you 16 (2^4) colours in this one pixel. So whats the difference?
Theres three channels: R, G and B. 8+8+8. If we plus these, to give us 24, you get what I mentioned above is the bit depth / colour depth. It is also called the bits per pixel since, well, it has 8+8+8 bits in that one pixel. So yeah, its basically the same.

When I say 24-bit, it is equal to 24 bpp. 8-bit is equal to 8 bpp, and should not be confused with 8 bpc.

Why 8 bpc in some cases isn't enough
But shouldn't 16 million colours from 8-bit per channel already be more than enough!? Let's take this scenario to shades of gray again. That is actually a gradient between 2 values, black and white (the gamut). Therefore we will be using only one channel. And as you might remember 8-bit one channel is 256 colours. So, you have 256 shades of gray, which is not enough to make it appear smooth. With 10-bit (bpc) however, you will have 1024 shades of gray, which is four times more than 8-bit! Way smoother!

You will see that when working in 8 bpc in Photoshop will automatically create some sort of dithering, while in 16bpc it's nice and smooth. In the image link bellow, you will also see that the "bars" of the same colour is much bigger and wider in 8bpc compared to 16bpc. I've highlighted a container for a single "bar" of colour, so you can see what I mean more clearly.


Note that zoom-level also can induce bands, because you are viewing an area go from colour A to B in a shorter span. Youre obviously zooming in on the steps.
Try viewing the image in 100% (Press CTRL+1) to see how it really looks like. You can also try zoom in to near-pixel level to see how great the difference from one shade to the next is (ctrl+h to toggle white pixel grid & rulers when really close).

What should you use in Photoshop?
Its generally recommended by Adobe if I remember correctly that you should have as practice of using 16bpc in Photoshop, as Photoshop (and Lightroom etc) apparently "prefers" it. The file size grows bigger due to this however, and possibly a little heavier to work with. What I recommend is to use it when youre working on dark artwork, as it is most apparent then. You will not see any difference in vivid colourful imagery, and it is unlikely to see it with the same grading in light colours as oppose to dark.
Although 16-bit will cause a few features to not be available (Dont worry, most will work only some weird ones very few use wont), you will be better of in the end.

But if your screen is 24 BPC, doesnt that mean you wont be able to tell the difference anyway? The answer is no, you will see a difference depending on your screen and brightness, but that is also beyond one of the points. When you convert back to 8 bpc from 16 bpc, Photoshop will add dithering if you have it enabled (which it is by default). It does its trickery to keep it as smooth as possible. It may be an apparent difference, it may not, but at least better.

If you have a higher grade screen that supports 10 bpc, and a newer graphics card you will see an even bigger difference. Newer graphics cards like GTX series from Nvida should have it, but you also need a cable capable of transferring the amount of information. DisplayPorts and HDMI 2.0 (Depending on other factors like refresh rate and resolution) should be able to handle it.

Dithering and noise is a common way to make the colour bands magically go away. In real, they're still there, but the dithering/grain/noise works as camouflage.

Why not 32bpc?
Well that's overkill, unless you're doing some major professional shit working with crazy images and expensive equipment. Hell, 16 bpc is already more than your eye can see already! One of the biggest reasons you shouldnt be using it is that most of the features in Photoshop wont be available when you do that, and if you want to convert back to 8/16 bpc when done you will need to do a lot of adjusting on some panels. If you dont it will basically ruin your image.

Most people can't tell the difference between 16 bpc and 32 bpc, but you will comparing 8 bpc to 16 bpc. By enabling 32-bit, all your effects will also be removed. You can either chose to merge image when doing that, or leave it layered but effects disappear.

32-bit?? / 48/40bit?
32-bit not to be confused with 32 bpc (like in Photoshop mentioned above), is basically 24 bpp with another channel: alpha. I haven't fully grasped this aspect with alpha channel yet, but as it has something to do with alpha to create even more combinations for grading.
So if you looked at the "How bits are calculated" section, you know how it's calculated. To recap, it's calculated this way; 8 bpc for R G B and A (Alpha). 256 x 256 x 256 x 256 = 4 294 967 296.

Thats how it is with the other bit depths as well. They can have an uneven distribution of reds, greens, blues and alphas.

How hardware comes in to play
Now this is something that I was researching after I started planning my computer, and eventually started walking hand-in-hand with my research for colours previously.
If you want to take full advantage of 10 bpc colours, you need the hardware for it. As mentioned somewhere in here, most standard screens are 24-bit. You will actually in most cases have to ask specifically for a 10-bit screen (I said bit, although its technically BPC. Reason is most people dont know the difference and its sometimes listed as something 10 bit colour), and those are usually professional-grade ones. Not only that, but you will also need a GPU and cable that can support it too!

1. You need a GPU that supports 10-bit (Again, actually BPC) colours. Some even supports 12.
2. You need a cable. I think there's two supported cables for 10 bpc colours; HDMI 2.0 (and over) and DisplayPort. Probably better, and easier, to get any DisplayPort cable as it has more capabilities and headroom for the future.

3. The screen. Professional grade screens can be pretty expensive, so you're going to have to take a decision on that one.
The ones we use are Eizo ColorEdge CG series. And as mentioned, they need to support 10 bpc colour / 30-bit.

Nvidias Quadro series all support 10 bpc, and as mentioned the GTX series does as well. Not sure if its only the newer ones or all, so you should look in to it case-by-case.


When all of that is in place, you will need to enable it. Via the Nvidia control panel, you need to navigate to "Resolution" or something (Only know the Norwegian equivalent).
There you should see at the top which monitor you are using then a list of resolutions. If you scroll down there, you will see a few more options that you need to check. While using DVI, only the first of the four options was available ("Hyest (32-biters)") and the 8 bpc in the dropdown next to it.

After switching to DisplayPort, or any other supported able, along with a compatible GPU, two new options showed up (bottom two dropdowns) as well as 10 bpc on the second dropdown.



Finally, I believe you have to start using it in Photoshop. First of all, enable 30-bit display.
Edit > Settings > Performance (enable GPU acceleration too if you have the good GPU) > Advanced Settings, then tick of "30 bit display".

You may also select "Advanced" on the dropdown depending on how good hardware you have. If you think you have good enough, try turn it on. If Photoshop turns slow and sluggish, turn it back down to "Normal" or "Basic". Then you have to go to Image > Mode > 16 Bits/Channel whenever you make a new project. If you have made a document already, go to Image > Mode > [x] Bits/Channel. Keep in mind that changing from 8 to 16 bpc only gives the headroom to fix the colour banding, it doesnt fix it right off the bat.

Gamut
Introduction to gamut/colour space
Here comes the other part of this long guide thing.
So what is gamut, also referred to as colour space (although something different)? It is the amount of colours a screen or printer can present/produce. The wider the gamut, the richer your colours will be. You could say that you may have a bit depth that can give a shit-ton of gray tones, but your screen can only show black, white and shades of gray. A wider gamut, the richer colours.

As for colour space, its a "pre-defined gamut", in other words a pre-defined range of colours. Read the "sRGB, Adobe RGB and ProPhoto RGB" section bellow.
Like I showed earlier up in the simplifying bits as an introduction section my colour gamout was a black to white. This particular can range is also a colour space: grayscale (although mostly people use graytones in RGB).

The Adobe RGB spectre had white whites and blacker blacks, while the sRGB had less. Now that was just an example, the blacks depend on your monitor and whatnot, but imagine it being basically any colour. You can have greener greens (especially true), reder reds and so on. Bit depth is the amount of steps within that range.

Note that the following colour spaces are not gamut themselves, per se. Simply a colour space. Gamut is the abstract concept of colour range. You can think of the max space as the visible spectrum your eyes can perceive from the different wavelengths.

Colour spaces are sort of indexed. They have coordinates, names, codes that indicate which colour you are picking. Like RGB picks a red, green and blue. Theres also pantone used for industrial things like paint for walls, fabric and plastics. These have codes, like Pantone 13-1520 for a rose quartz.
CMYK has a system similar to RGB, with an index like C: 0%, M: 20%, Y: 12%, K: 0% for an identical (as close as can be) colour.
The HEX/RGB is for that same colour would be #F7CAC9 / R:247, G:202, B:201.
YCbCr (used for TV signals and process of JPG compression) would be Y:0.84, Pr:0.09, Pb: -0.03.
LAB, a mathematical system for all perceivable colours, thus used for colour conversion between RGB and CMYK, would be L:85.11, A:15.74, B:6.5.
Note however what I said about LAB. Its the entire colour space, thus its bigger than all of these previously mentioned systems.

sRGB
For digital output (screens), there is two main colour spaces you can take in to account; sRGB and Adobe RGB.
Spectrums often look like this


sRGB is the most commonly used one, as it supports a lot of colours. It is the 24 bpp, which gives more colours than the eye can see. Thats why it is essentially why it is called true-color. Its the colour depth you get in an .jpg file as it supports only 8 bpc. It is considered the standard web colour (not to be confused with web-safe colours) as its widely used.

Its why you have the 255 RGBs (In computers, 0 is counted. Thats why its 0 to 255, which is actually 256 colours). RGB(255,255,255) gives you white, while rgba(0,0,0) gives you black. Its also the limit of HEX as it is only, basically, a formula to get the RGB 0 to 255.

How the colours within that range is displayed by the screen however may vary, not depending on gamut, but the physical scree, preferences and so on. Thats what web-safe colours is for, as theyre colours that are consistently shown identically across 24 bpp monitors/screens. I will not go in to web-safe colours any further.

Adobe RGB
Then there's Adobe RGB (Often listed as Adobe RGB (1998)), which supports even more colours, aka, have a wider gamut. Now'days a lot of display retailers will brag about their gamut by saying "Supports up to 96% of Adobe RGB", or something long those lines. That's one way to know that yeah, your screen have pretty rich colours. 100% of sRGB is not impressive though, but it can seem impressive to someone unaware of what it actually means, and thus a selling point for the retailer. Adobe RGB is a standard among photographers world wide, even where I work. I am not too sure about other design firms as I have not seen much discussion it, but it would surprise me if it wasnt there as well. Print labs (basically printing company) however uses a different colour-space that works differently, called CMYK. This is also used within the design industry due to the designer having to control the colous as conversion from RGB to CMYK is not always accurate.


The difference is that RGB is, like in real life, is additive. That means the more colours you add, the whiter it gets. White is a reflection of all colours.

CMYK
CMYK on the other hand is like painting. The more colours you mix in, the darker it gets. Thats called a subtractive colour. The whitest colour you get is where theres no ink, and thus the colour of the paper. Common printers does therefore do not have a white colour, but have at least cyan ©, magenta (M), yellow (Y) and black (k). Higher grade printers made for photo print have even more colours, such as Light Cyan (LC), Vivid Magenta (VM), Light Gray (LG), Photo Blank (K, normal black), Matte Black (BK), and so on.

ProPhoto RGB
Finally there's ProPhoto RGB. Now ProPhoto may be a spectrum you can use for even more colours, but it mostly just adds more green in return for much greater filesizes. It's not used often. Adobe RGB does too, compared to sRGB, but still adds a lot more other colours and theres a pretty fine line between amounts of green one would want to have in an image and what is too much. Thats not all spectrums there is obviously, theres many more, but these are the commonly used and known ones.



The Web
Why colours are so different on the web
So now comes the part that made me make this thread to begin with. Why does the colours shift so much from your Photoshop to out there on the web?
Frankly, it's an issue I have had encountered a lot before, but not so much anymore thanks to reading up a lot on it.

What happens when I make a jpg/png?
First of all, your image will look better in Photoshop than it will exported for web, obviously. While in Photoshop you might be using Adobe RGB or sRGB while editing photos, and maybe in combination with high bit depth for colours! So when you save for web in your jpg are obviously compressing and losing quality.

But what is lost? Aside general data and calculations to predict pixels, the two things discussed in this thread; bit depth and colour space. It will be reduced to 24-bit and sRGB. Now that alone degrades quality of colour. The algorithm that makes the makes the file size smaller (main reason) only predicts your colour through basically a function. The more complex the function, the more accurate it gets, but also the bigger the filesize. Depending on your image, the function may be simple and thus be very small in size and of very high quality. Sometimes the opposite.

While jpg is limited to 8 bpc (24 bit) and sRGB, png can have more. It's why it can have transparency. When an png has transparency it's actually a 32 (R:8 + G:8 + B:8 + A:8) bit image (24 bit when no transparency), 24 bit with an additional 8 bit alpha channel (a bpc). Furthermore it can be 16 bpc, as well as hold other colour spaces for example Adobe RGB. The specific limits of an png I do not know.

Browsers have a say
Aside from export, browsers are also another factor on how colours "shift" due to the way they handle profiles and, well, colours. There's two types of browsers; those that handle colour managing and those who does not. The browser I am currently using, Vivaldi, is colour managed. So is the newest Google Chrome (v54), Internet Explorer, Edge and Firefox. However they may handle it differently. Heres a side-by side comparison of the same blue colour in Vivaldi compared to Chrome, both Chromium based browsers:


Not that the difference is even bigger in real, before colour information is lost due being enclosed in the file format.

Colour profiles
But what is this "colour managing"? It means the browser is reading any embedded "settings" for the images. Profiles and other information for conversion and making it appear correctly on your monitor. This profile is called ICC profiles, and stands for International Color Consortium. When you save an image using Photoshop, there is a box that is always checked by default; Embed ICC-Profile. In most cases it's a good idea to leave it checked, as it will in most cases only add a tiny bit of size to your file in exchange for making the colours appear correctly.


When to, or not to, use embedded colour profiles
Although your ICC-profile greatly improves the colour experience for the user, it is kind mostly useable if you have a colour space other than sRGB. JPG files does not benefit much from it in other words, however it can have an impact. Its different with .png however since it can both have 16 bpc and a different colour profile, like Adobe RGB. But since using that colour space is dependent on the monitor, which vary, its risking being shifting heavily.

Let it be said though that embedding an ICC profile does not always additional filesize, and sometimes its only as small as a few byte. In my opinion, you should embed the ICC profile.

Correctly preparing your images for the web
To be honest, I have had a few different results with this, so I guess it depends on the actual content you are exporting.
To get the most accurate colour representation you should use jpg. JPG is for complex colour photos, its in its name, so thats why it handles it better. You may think that png is best since its uncompressed? Well, no. PNG handles colours poorly, but details nicely due to little/better to no compression. With normal imagery, like portaits, scenery etc jpg is always best. Its small, it can be high quality and it contains more accurate colours. Note that jpg file sizes will not always be smaller than png.

PNG is nice for things that contain text and is expected to be moved around a lot. PNG will preserve the details of the image. On things such as black-white text documents you will not see a difference, most likely. As soon as colours are introduced, it shifts, and depending on compression, it may very well do so drastically.

The most accurate color-representation:
Go to Edit > Convert to Profile. There a panel should show what you are currently working with (Source Profile and Destination.
Even if you are already on sRGB you should do this:
- Leave Engine at Adobe (ACE).
- For dark or vivid colours the Relative Colorimetric intent is best. For skin-like tones and other general use Perceptual is better.
- The Use Black Point Compensation. This is especially important with CMYK to RGB profile. The 100% blackness in CMYK is close to R:10, G:8, B:10. A complete black in RGB would be R:0, G:0, B:0. The black point compensation will basically take care of the blackness and make it relative, so 100% blackness in CMYK is 100% blackness in RGB.
- Use Dither is especially important when working with the dark colours. Its basically applying the camouflage to your image by adding subtle ?noise to it, so it blurs out the colour banding of sorts. This option may not be available if your image is a single layer, and thus you do not get the dithering. Theres already some dithering in Photoshop by default. In case it is bad however, try add some noise manually by going to Filter > Noise > Add Noise.
- Flatten Image to Preserve Appearance is something you also want to have checked. Photoshop can best preserve its appearance if it puts it in one layer.
Basically, have as many checkboxes as possible ticked in the Convert to Profile dialogue.
- Saving. You should Save As because it will bring up the dialogue for embedding ICC profile, and so you dont ruin your workfile with layers and whatnot. Have the ?ICC Profile: [profile here] checked.

And there you go, the best possible jpg save for preserving colour in Photoshop.

If you wish to save for web, heres how to do that.
(Not fully tested this and compared to previously mentioned method)
Save for Web will do the necessary background work preparing your image for the internet.
"Embedded Color Profile" ticked off.
"Convert to sRGB" ticked on.

Check image after saving!
Like I said, I've had different result with this. Mostly good though. I've gotten a habit of testing the images I export for colours across browsers. You should too if you're serious about keeping it in good quality. Internet Edge actually has a pretty good color management, Firefox too, for images that are "untagged" (without ICC profile), while Chrome often make images appear more bleach. Why does this happen?

Browsers still matters. The other aspect of browsers is how they handle the untagged images. If I for example export an image that uses Adobe RGB colour space, Firefox might take that in to the equation and make up for it, while Chrome disregards it entirely and still just shows you the image. This is what I meant by "good colour management". Internet Edge does the same.

An image appearing bleach is not the only thing that can change. Anything from slight difference in black richness to drastically increasing/decreasing the brightness or what seem to be exposure of an image can change from browser to browser, image to image. That's why I always first drop my image in to Google Chrome, copy the image link and paste in Internet Edge (and other browsers), and then finally compare them to Photoshop. Internet Edge often gives the best result, close to Photoshop, while Chrome makes it more bleach or darker if an ICC profile is not embedded.

However there has been cases where saving without the ICC profile has yielded better results. Anything from virtually indistinguishable to Photoshop to completely different, with and without the ICC profile. This is why you should check it afterwards in a browser.

Does OS / Screen matter?
Now obviously monitors is also a factor in the equation of how images will appear, so yes it does, not to mention the different types and quality of monitors like panel types TN and IPS, consumer grade, higher grade, professional grade and so on.

Unfortunaltely I haven't gotten around to test nor read about OS differences, but I believe Mac have their own colour space. Apple RGB, so there might be a little difference, but I doubt their monitor technology for their laptops/iMacs are much different.

It would require some effort to test as even the brightness of the room, the kelvin/brightness of your lightbulb and more can change how colours appear although the biggest differences for that are often seen on printed images.

Summary
Note that summary does not contain the "full truth". You should read all of the sections for all the information, like conditions, depth and so forth.

What is bit depth?
Colour depth, also referred to as Bits Per Pixel (BPP). The higher bit-depth, the richer the gradient steps.
Read "Why 8-bit in some cases isn't enough" section for a bit more on that.


What is gamut?
A pre-defined span of systemized colours, so you can look them up. Like RGB has 255, 255, 255 for white, while CMYK is C:0,M:0,Y:0,K:0 and so on for other spectrums.

What bit depth should I use in Photoshop
Work in 16, even if you're converting to 8 when done (for web) when working on dark colours, slight colour differences and gradient-like stuff.

Why does colours look so different from Photoshop to web?
Compression, colour conversion and output of the file itself. Browsers read and handle colour differently. Last factor on a case from person to person is the monitor, as not monitor is capeable of being 100% identical, even professional grade ones.

How do I get the best quality for web?
For colour: Convert to sRGB first, that is the most sure-fire way. Embedding ICC-Profile can also have a say in it. Read "Correctly preparing your images for the web" and "Check image after saving!" sections for just that.

As for the quality, a PNG would preserve details best but is bad when it comes to colour. Generally PNG is nice for things that need to keep it details, like text in an image: eg. A thread design. However a JPG is also acceptable, since the only compression that will take place is saving and uploading. It wont be moved around after that.

JPG is best for imagery. Its best at preserving colour and keep file sizes small. In images with a lot of greens the file can be much bigger as the green spectrum is bigger, thus require more information. Its a good rule of thumb to use JPG unless theres a specific reason to use PNG, like transparency or that it will be upload/downloaded a lot.

Sources:
http://content.provideocoalition.com/upl...mple01.png
http://www.computerhope.com/issues/ch001557.htm
http://www.diyphotography.net/8-bit-vs-1...e-matters/
https://en.wikipedia.org/wiki/Color_depth
http://www.nvidia.de/docs/IO/40049/TB-04...02_new.pdf
https://www.youtube.com/watch?v=f2odrCGjOFY
http://www.gballard.net/psd/go_live_page...files.html
http://www.gballard.net/psd/save_for_web...ofile.html
http://www.interactivesearchmarketing.co...ormatting/
https://en.wikipedia.org/wiki/Lab_color_space
https://en.wikipedia.org/wiki/JPEG
https://en.wikipedia.org/wiki/8-bit_color
https://www.tutorialspoint.com/dip/conce..._pixel.htm
https://en.wikipedia.org/wiki/Color_space
https://en.wikipedia.org/wiki/Pantone
http://www.patrickhansen.com/2011/02/04/...4-32-what/
https://en.wikipedia.org/wiki/Additive_color
http://www.techradar.com/news/computing/...n-586268/2