I’m trying to create a color scheme for text headlines that will have distinctly different colors for each level of header, but will also print out mostly dark. I looked at http://colorbrewer2.org/ , but that generates colors that will look different when printed in black and white (e.g. you have two regions on a map that are right next to each other, and you want them to look different). What I don’t want is colors that will be lighter than each other when photocopied: In other words, I want those with a color screen/printer to see the colors, but when photocopied in black and white, they will all be fairly dark headlines.
I saw the following question, but it’s not quite what I’m trying to do:
Yes, contrast is the issue, but I guess what my real question is “How do I know how dark a color will print in black and white?”
I’m working on curriculum materials with rather simple design (readings and worksheets) for high school physics classes. The main place where I hope to use color will be in headlines, so they will all be on white backgrounds. The materials are currently in black and white. I’d like to use different colors for headline levels (H1, H2, etc.), so they will jump out for students using electronic versions (on iPads and other devices), but also ensure that some of the headlines don’t turn too gray/light. The materials will be distributed as Word and PDF files, and most teachers who are photocopying the documents will likely print the PDF versions on a B&W laser printer first, then photocopy from that document (so the nature of the filters on the photocopier isn’t that important, I think).
I’m thinking that if I start with
#000000and start adding just a bit of each color (e.g.
#008800), these should print fairly dark, but I’m wondering if there is any tool out there that would help me pick colors that “go together” well (I’m a teacher and an amateur designer, so I often rely on online tools like colorbrewer2 to help me find “decent” color schemes).
Thanks again for your time and responses.
How do I know how dark a color will print in black and white?
I’ve recently been looking into how to obtain a measure of a colour’s perceived brightness, for similar reasons, although I’m interested in on-screen rather than paper viewing. Here are some things I found:
It is easy to transform an RGB value like the ones in your question to an HSB (hue, saturation, brightness) value. It might seem at first that the
B brightness value here is what you need. But the numbers here aren’t very related to how a colour appears to a human viewer. For example, changing H can make huge changes to the perceived lightness, and changing B can change the perceived hue. This is because RGB (and HSB, which is a simple transformation from RGB) are more about “what this device can produce” rather than “what the eye perceives”.
W3C “perceived brightness”
There is a “W3C formula” for perceived brightness:
(R*299 + G*587 + B*114) / 1000. (I came across this originally in a great book by Bill Van Hecke.) The RGB values in this formula range from 0 to 1. So
#FFFFFF comes to (1*299 + 1*587 + 1*114) / 1000 = 1.
#008800 example, the green value is hexadecimal 0x88, which is decimal 136. That number is in the range 0-255. So the W3C perceived brightness for that colour is (0*299 + (136/255)*587 + 0*114) / 1000 = 0.31.
Other “perceived brightness” formulae
The W3C formula is an approximation, and apparently gives bad results for shades of yellow. I found this page by Nir Dobovizki useful: it gives some good explanation and a few alternative formulae, including one called HSP by Darel Rex Finley, which is an attempt to model what Photoshop does when converting RGB to Greyscale. If you want yet more formulae, there are plenty listed in answers to this Stack Overflow question.
Colour systems actually based on perceptual measurements
I put “perceived brightness” in quotes above, because, if I understand correctly, those formulae are only simple approximations to what is actually perceived. Working that out requires a lot of experiments with actual human subjects in controlled conditions, and the results don’t fit a neat simple formula.
There is a system named CIELAB. “CIE” is the organisation that produced it: the numbers in this system are
L in this system is luminance, and if I understand right, this is the number we are looking for, and I believe this is actually based on large numbers of experiments with humans. Adobe Kuler is a great and free website where you can play with colours in various systems including LAB. However, the
b values are a bit beyond my current understanding. So I was very pleased to discover a predecessor to LAB…
The Munsell colour system uses Hue, Value and Chroma. It pre-dates computers, so the way the values are stated might look a bit “old fashioned”. But actually after a little study, I found this system made a lot of sense to me (I’ve been mystified by colour for years but this seems to be helping), and it does seem to be deeply rooted in studies of human perception. Here’s an example:
5PB 4.4/12 has H, V and C as below:
5PBis Purple-Blue. Munsell placed the hues around a circle (this is like the H value in HSB, which can be stated in degrees). In the Munsell system, letters are used to describe the hue (I’ll describe the digit in a moment). There are 10 hues — more than in other systems: Red, Red-Purple, Purple, Purple-Blue, Blue, Blue-Green, Green, Green-Yellow, Yellow, Yellow-Red, and back to Red, written as
PBetc. The digit, which ranges from 1 to 10, modifies the letter description to give more precision.
5PBmeans precise Purple-Blue.
10Ris half way between Red and Yellow-Red.
4.4/is near mid lightness. Values range from 0 (dark) to 10 (light). “Maroon” is a dark
Rhue, “pink” is a light one. These value numbers are actually comparable between hues, unlike most of the other systems here. If you hold
Vconstant and change
C, the colours all seem to have the same lightness. So Munsell’s
Vmay be what you are looking for.
/12is the “strength” of the colour. “Emerald” is a strong green, “grape” is a weak one. The range of values for chroma is interesting. 0 is grey. The maximum value depends on the hue and value. The maximum value for Red is approximately twice as large as that for Blue-Green. This complexity comes from measurements with humans. So this system isn’t mathematically neat — but to me, it does seem useful.
Here are a few references which explain the Munsell system better than I have here:
- “The Munsell Color System: A Practical Description With Suggestions for Its Use by T. M. Cleland” is a book from 1921. It can be read in full at the ApplePainter.com website, or you can buy it as a paper book. The diagrams are wonderful. I find it old fashioned, but actually quite accessible writing — it is aimed at a non-specialist audience:
The reader should be warned at the outset against that fear of scientific perplexity which is ever present in the lay mind. The three dimensions of color do not involve the mysteries of higher mathematics. There is nothing about them which should not be as easily comprehended by the average reader as the three dimensions of a box, or any other form which can be felt or seen. We have been unaccustomed to regarding color with any sense of order and it is this fact, rather than any complexity inherent in the idea itself, which will be the source of whatever difficulty may be encountered by the reader who faces this conception of color for the first time.
An article by Bruce MacEvoy which explains Munsell in context with many other systems. It also explains some colour paradoxes. This one blew my mind a bit — the search for a neat geometrical system to order colours-as-perceived is actually impossible:
… all color models we can see cannot represent colors relationships accurately, and color models that represent color relationships accurately cannot be seen (physically constructed or represented as an image).
- mColorDesigner Mac app: one of several on the Mac App Store by Yanmei He which help with exploring the Munsell colour space and converting to / from values you actually use in practise. I find it slightly slow and buggy at times, but it has really helped me to get a better understanding of this.