2 - 2. Final Color Palette

Main Points

• Historical Research and Manuscript Aging Researching the look and coloration of old documents and how they age.
• Integrated Color Studies More realistic chips to visualize what the color combinations will look like when applied.
• Final Palette So here is our color palette for the website.
• ^{Skip to Main Points} links return to the Main Points menu.

Historical Research and Manuscript Aging

On the one hand, I pretty rapidly became dissatisfied with some of the color options from the previous phase, and on the other I'd done a fair amount of work in pure colors, based on their psychology. Now, before I made any final selections, it seemed like the time to do some research on old manuscripts. My inspiration is the Medieval / Disney scroll, but I wanted to take a look at what some real documents look like. I needed old parchments and papers to help me decide what colors were really appropriate and you can see, I started looking ahead to the texturing phase of the design which is coming up. I started paying attention to exactly how historic documents age.

• 

  Book of Kells -

  The first idea I ran across comes from the most intricate and beautiful of the Medieval Christian manuscripts, The Book of Kells; this is a Gospel illuminated by Irish Celts ca. 800 AD. It's the oldest document in this gallery by about 700 years. It's also the most grayish of all the documents. Partly this may be age, but two other factors are also at work. One, it's the only document I've confiremd that's not written on paper; it's written on calf vellum, a calf skin stretched thin and scraped clean of hair. Two, it's been reused. To the right of the angel's head, and above the border, you can see the previous writing which the monks scraped off as best they could. Vellum is not like paper, you chop down a few trees and you can make pages and pages; to make vellum you have to slaughter a comparatively expensive cow and it will only produce a few carefully preserved sheets. It was therefore common to scrape away the ink from an old book you didn't want anymore so you could reuse the vellum - this was the sad fate of many ancient pagan texts. This has caused some smudging and accounts not only for some of the coloration but the variation in coloration as well. I like the idea of underwriting like this, but what you see here is too strong, it would interfere with reading the page content. While that was a common problem reading recycled vellum, I don't want my design to be that historically accurate.

• 

  Ayer Vocabulario -

  A 16th century (ca. 1540) Nahuatl trilingual - an extraordinary dictionary in Latin (the language of European scholarship), Spanish (the language of the conquerors), and Nahuatl (the language of the Aztecs of central Mexico). There is subtle underwriting from a previous text which probably indicates that the book is made of vellum (animal skin). Note the splotchy discolorations near the right edge of the page. Subtle effects like this are more representative of the style I'm looking for to create an aged look. I also like the color of the writing surface. I'm not really fond of the taupe in some of the other images, and this vellum is a much warmer color.

• 

  American Fleet Porting Uraga -

  The most recent document is a paper hanging scroll from the Kyoto National Museum. Painted in 1886, it depicts Commodore Perry's American fleet entering the Japanese harbor at Uraga in 1853. Subtle age spots are visible behind the largest ship, off the peninsula and under the Japanese characters which identify the point.

• 

  Topkapi Scroll -

  A detail from a Turkish scroll ca. 1500; these are architectural designs, muqarnas, from the vault of the Turkish palace. The discolorations here occur in bands and may have come from some kind of contact, possibly as simple as places the paper was touching while it was rolled up. This is also an interesting color of paper, not white, but not gray either. A more subtle version of the warm color of the Ayer Vocabulario, it's less rosy and closer to a clean ivory.

• 

  Tractatus de Sphaera -

  A 1550 book printed on paper, a copy of the university textbook on Astronomy by 13th century scholar Johannes de Sacrobosco, ie English scholar John of Holywood. He was one of the earliest advocates for Islamic learning and joined the University of Paris in 1221; his work on astronomy was recopied and then reprinted for centuries. The bottom of the pages are tattered and there appears to be liquid damage to the bottom right corner of the right page. There is a clear boundary at the edge of the damaged area, and the ink of the diagram has been partially washed away within the boundary. There is a discoloration in the same corner, though it's notably darker outside the liquid boundary. The discoloration is relatively even but there is a subtle patchiness similar to the Ayer Vocabulario. The most interesting aging feature is on the left page where markings indicate some kind of event around a notable trapezoidal void. I don't know what made it, but these are all interesting pieces that might make their way into the design. I like the texture of the paper as well, you can "feel" the screen used to make it.

The different samples give a realistic range of colors for both the writing surface and the discolorations. I will definitely be referring back to these not only as I work with colors, but later when I'm addressing adding texture to the design.

Integrated Color Studies

First, we started with the color chips that we created, and I tried them out on some quick and dirty demo chips to see which ones I wanted to turn into a full color study. I added color swatches with source information and simply started erasing and in some cases adding to the palette

I started searching for a primary background color. It had to be light to serve as a reasonable background for text, and I wanted to use a second "slightly" darker color to emphasize other sections with or without a border. Searching through the colors I'd tagged as possible primaries and trying to work up a palette failed to turn up any acceptable combinations. So my initial search was a complete failure. I retooled and started again.

This time, I widened my search and looked at some color samples from the Ayer Vocabulario and the ivory tone from color psychology section at top. By working up these colors as possible primaries, I was able to make progress and start choosing the rest of my palette. Two main candidates for the primary background color finally emerged from my tests: the lightest of the Ayer colors, which I'm calling Ayer 3 - #FCE6B5, and a brightened version of the Ivory color swatch - #FFF0CD. The Bright Ivory is brighter than the Ayer 3, and less brown. It has a cleaner look and feel, and provides more contrast with a text color, while Ayer 3 is a little more natural color, not surprising since it's sampled from a real historic text.

• 

  Bright Ivory / Ayer 2 -

  It's an earlier demo in Bright Ivory using black text before I started experimenting with text colors. It's combined with the darkest of the Ayer shades, Ayer 2 - #FBD6A1, which provides the most contrast of any study between the two background colors. This study also uses the rich brown color, #5A0107, from the Demo 1a color scheme for coloring borders.

• 

  Bright Ivory / Ayer 2a -

  This palette was one of my last studies. It uses the Bright Ivory and Ayer 2 backgrounds for maximum contrast. The border color is based on the rich Demo 1a brown but with more red, and it's assigned the name Demo 1a Tint, #700008. It's a bit richer and brighter than Demo 1a. I also modified Demo 1a into a deep shade of brown, Demo 1a Shade, #260003, for use as a text color. In this study you can really tell the difference between the two backgrounds; look how different the text color is. Against the Bright Ivory it looks nearly black, while against the Ayer 2 it looks rich brown; you'd hardly know I was using the same color for all the text on the page. Yet even against the Ayer 2 it has good contrast despite Ayer 2 being the "darkest" of the background colors in the studies. I'm not sure whether I like this effect, or whether I want darker text for more contrast.

• 

  Bright Ivory / Ayer 1 -

  This is my final study in Bright Ivory. It uses the modified Demo 1a browns, Demo 1a Shade for the text and Demo 1a Tint for the borders. However, the second background color is Ayer 1, #FFDFAC. It's substantially lighter than Ayer 2 providing less contrast against the Bright Ivory, though still noticeable, and more contrast with the text. You can still see a marked difference between the text's brownish appearance against Ayer 1 and it's blackish appearance against the Bright Ivory.

• 

  Ayer 3 / Ayer 1 -

  This study uses Ayer 3 and Ayer 1 for the background colors; this combination has the lowest contrast of any of the background combinations I studied and I'm not sure I like the rosy hue which Ayer 1 picks up against Ayer 3. This study does open the way for an all Ayer layout with Ayer 2 being applied as a special discoloration effect with Ayer 3 and 1 for backgrounds. It makes use of the original Demo 1a color for the border and applies Demo 1a Shade for the color of the text.

• 

  Ayer 3 / Ayer 1a -

  Against the darker Ayer 3 color, the Demo 1a border looks very dark, darker than I wanted, so this study modifies the Ayer 3 / Ayer 1 palette slightly using the Demo 1a Tint. This makes for a much brighter more attractive border, and really put the nail in the coffin of the original Demo 1a as a border.

• 

  Ayer 3 / Ayer 2 -

  I think this was the earliest of all the color studies posted here. Ayer 2 has much more contrast with Ayer 3, but doesn't really harmonize well. The black text and original Demo 1a border don't look great either. Again you can see how much darker the Demo 1a looks against these backgrounds than it does against the bright yellow if it's own color chip. That's why the new tint was created to achieve the same rich effect with these colors.

• 

  Ayer 3 / Ayer 1 / Deep Blue -

  Here are a couple "Green" color studies. I tried a number of studies with woodsy forest and marine palettes which didn't work out. This was an interesting color study in a deep authoritative blue which just couldn't win. The original Deep Blue color from the color psychology section was too dark and flat. In order to richen the color, I created this (and several other) more vibrant variants. However, as the color got richer and really started to pop, what little harmony it had in the first place completely disintegrated. This palette gives me a headache looking at it. It's a gorgeous marine blue though, and may show up in some other location that works. I just don't know what that would be right now.

• 

  Bright Ivory / Ayer 1 / Green -

  Here is another "Green" study that works better. It's the cleaner Bright Ivory with Ayer 1. It uses a custom shade of green since the forest and marine greens just weren't working. While this color combination is better than the deep blue, it doesn't really work for an old scroll theme. I'm not really sure if I thought this would work out, but I wanted to explore the idea fully before going with all earth tones.

Bright Ivory seemed to work better with the various other colors. It's relative whiteness compared to Ayer 3 may be less authentic, but made it far superior for harmonizing with other options in the color palette and hopefully colors used in content as well. Yet it still has a nice warm color without being rosy. Nor does it bring out the rosiness of Ayer 1 as Ayer 3 did. This allows me to use Ayer 1 as a “second” primary color instead of the darker Ayer 2. I like this for several reasons. One, Ayer 1 is more subtle while still providing noticeable contrast with Bright Ivory, whereas Ayer 2 is a much sharper contrast; two, Ayer 1 provides a much better contrast with the text color which is probably the most important factor. Also, Ayer 2 is based on the discolorations in the Ayer Vocabulario and I'd like to use it for recreating those effects instead of as a primary palette color.

The secondary colors in the end turned out to be much easier though they required a lot more testing because there were so many of them. The borders emerged fairly early as the Demo 1a Tint color. I tried an entire range of "Green" colors after that, but none of them panned out. The rich brown harmonized much better with the background colors and was more thematically appropriate to my concept of the Medieval scroll. I think this at least partly explains why the Chocolate Brown crept into my color psychology section even though it's psychology was completely different from my themes. It visually works so well with the other colors, and I obviously had it in mind from the very beginning. The text I may revisit more during the typography phase as I really haven't spent a whole lot of time dealing with it.

In the end what we've wound up with is not technically a monochromatic color scheme, but it's close; everything is various shades of brown from light earth tones to the deep brown text. I also found some nice monitor rich colors in the "Green" palette from the woodsy, natural Traditional 1a palette, to the Seagrasses, to the Active 2. There are definitely some colors I can play with and modify for other projects even if they're not going to work directly into this design.

Final Palette

So here it is. This is the color palette I've put together for the site.

• Bright Ivory (#FFF0CD) - Primary Page Color
• Ayer Beige (#FFDFAC) - Close approximation of the primary color for subtle emphasis
• Rich Chocolate (#700008) - Secondary color
• Deep Brown (#260003) - Text color
• Black (#000000) - Darker text color for emphasis

Now it's time to put it to work...

• Beta Home
• Beta Reader's Guide
• Beta Projects
• Beta FAQ

Subjects:

• Core,
• Core