All black and white, all the time.


Making Your Site Black and White

                               


  1. Understanding Hexadecimal

    There are really three parts to a six digit hexadecimal number. The first two digits stand for RED, the second two for GREEN, and the third two digits for BLUE.

    All you really need to know about hexadecimal for B&W design is that if you keep all three elements the same, you will always have a grey color. The most common gray colors you'll find online are 000000, 333333, 666666, 999999, CCCCCC and FFFFFF, but combinations like 0A0A0A, B5B5B5, and 323232 will also work.


  2. BODY tags: Links, Visited Links and Active Links

    You can specify the colors of most of the important parts of your web page with elements in your BODY tag. Links require the addition of something like this -- LINK="#000000" -- to your BODY tag. This will make the links black, but you can use any hexadecimal number between the quotes.

    A complete BODY tag looks like this:

    <BODY BGCOLOR="FFFFFF" LINK="#000000" TEXT="#000000" VLINK="#666666" ALINK="#CCCCCC">

    The BGCOLOR element changes the color of your background, and the TEXT element changes the color of your regular text.

    Note: If you use stylesheets on your webpage, the principals above still apply, but the implementation will be different..


  3. Make all your images Black and White:

    If you have a program like photoshop, this is easy. Change the image mode to grayscale (or use the desaturate feature). Some graphics programs use different terms for Black and White modes, look around until you find something that looks right.

    It is also usually pretty easy to scan your images directly in Black and White.

    Then save your file as normal.

    NOTE: The "websafe" pallet only actually contains 6 shades of black and white, (including black and white!) and if you don't stick to just those six shades, your images may dither in older browsers. I prefer to use photoshop's save for web option, and if you save as a gif, there is an option to choose what percentage of the image you want to be websafe (web "snap"). This is fun to play with. Try taking a B&W photo and converting it to 100% websafe gif to see what I mean.

  More information about RGB hexadecimal colors:
RGB and Hexadecimal
The What, Why and How of Hex -- more on hex numbering
Hexadecimal Explained

  More information about photoshop B&W images:
Greyscale image tips from Jeffrey Zeldman himself!


If you know of any black and white sites not listed here,
email B&W WWW today!