mixing a little bit of color into greys

Question

In this wonderful blog post by Ian Storm Taylor he writes:

Saturation is just as important. You can do even better than staying away from pure #000000 black too. Whenever you’re working with grays, add a bit of color to them and they will feel less dull. The amount of color you can add is proportional to how dark the color is. The black from my Path photo had 69%! saturation, whereas a light-gray might only need 3%.

I’ve used that as a general guide when making the color palette for Segment.io. I mix a small amount of yellow-orange into our grays. Saturation starts at 2% for our lightest gray and steadily increases until it’s at 22% for the darkest gray, forming an arc across the Photoshop color picker. But don’t take my word for it again—let’s look at Facebook. Why does the Facebook Mobile interface feel so nice? Because all of those grays are pumped full of Facebook Blue.

I'm confused as to how saturation works in image editing programs. I usually use a grey color palette consisting of 2%, 10%, 20%, 50% grey. How would I introduce a tiny bit of color saturation into these greys using a specific color(#3b5999 as an example)?

Answer 1

Just bring up the color picker, enter the hex color value in the appropriate box in the dialog, then select S: for saturation. Afterward you can move the slider on the color bar up and down top pick the saturation value you want. The resulting color will be displayed in the top box with the "new" caption title.

Answer 2

Saturation refers to how much color you add. The 6-digit hex code is RRGGBB (red, green and blue respectively). In the tonal scale, the highest saturation is F (#FFFFFF is white or all colors 100%) and least saturated is 0 (#000000 is black or all colors 0%), so 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F makes up your 16 increments.

It is easy to confuse saturation with white/black, as #FFFFFF is all colors 100% saturated and also results in white. This works on the theory that mixing colors combined together equals white, while no color at all equals black.

Consider the second number of each pair as 'fine tuning' increments, so F9 is almost saturated, while 9F is closer to a mid tone. Many people just use a 3-digit RGB hex code instead #FFF, which simply removes the 'fine tuning' second digit to each color.

So without using the color picker, I know that:

• #770000 is a dark red, half strength red mixed with blacks (no green or blue). It is dark due to a lack of overall color (saturation)
• #FF0000 is bright red, as red is set to max saturation, and isn't 'dirtied' by the introduction of green or blue
• #77FFFF is a cyan shade, as there is half as much red as there is blue and green. Adding more or less red makes it a deeper or lighter cyan.
• #CCCCCC or #252525 are both neutral greys as the colors of red, green and blue are balanced. As C is more saturated, , that is a lighter shade of grey.

Hope this info helps.