Basic colors

See more about:

Content styling patterns

To the pattern list

Here are some colors that work well together.

Dark red and green on yellow

Heading color: #660000

Heading color: #006600

Normal text color is black. Background is #FFFFCC.

Blues on yellow

Heading color: #000066

Heading color: #0066FF

Normal text color is black. Background is #FFFFCC.

Change the last two hexadecimal digits of the background color to make different yellows. The higher the number, the lighter the yellow. So #FFFF88 is a more saturated yellow, #FFFFAA is lighter, and #FFFFDD is lighter still.

Grays

Heading color: white. Background is #444444. Needs padding to look right.

Heading color: #444444

Normal text color is black. Background is white.

Any color where all of the hexadecimal digits are the same will be gray. The lower the digits, the darker the gray. So #333333 is darker than #888888 is darker than #CCCCCC.

Exercises

Exercise: Get a page's color scheme

To the pattern list