Style Guide
Alpine Design Review
This page contains instructions on how to handle page content according to designed standards.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headings with Text
Heading 1
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Heading 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Heading 3
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Heading 4
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Heading 5
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Heading 6
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Note: By using the appropriate descending headline settings, the author indicates not only content
sections, but the relative importance of sections to users, search engines and
accessibility tools for the disabled.
Example Normal Text:
Although the basic rules of typography are much the same for both Web pages and conventional
print documents, type on-screen and type printed on paper are different in crucial ways.
The computer screen renders typefaces at a much lower resolution than is found in books,
magazines, and even pages output from inexpensive printers. Most magazine and book typography
is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show
more than about 85 dpi. Also, the useable area of typical computer screens is smaller
than most magazine and book pages, limiting the information you can deliver on a Web page
without scrolling.
But perhaps the most distinctive characteristic of Web typography is its variability.
Web pages are built on the fly each time they are loaded into a Web browser. Each line of
text, each headline, each unique font and type style is re-created by a complex interaction
of the Web browser, the Web server, and the operating system of the reader's computer. The
process is fraught with possibilities for the unexpected: a missing font, an out-of-date
browser, or a peculiar set of font preferences designated by the reader. You should regard
your Web page layouts and typography as suggestions of how your pages should be
rendered you'll never know exactly how they will look on the reader's screen.
Example Unspecified Text:
This is text that has not been wrapped by any tags. Most browsers will treat this
text as it has been explicitly wrapped by a p tag, however, this may not always be
the case and is included here as an example to display how unwrapped text might display
within this design. Quite often the effect may be subtle. For example, line height
below the paragraph might be different than a standard paragraph.
Another Paragraph with normal paragraph tags. The previous paragraph is
surrounded by standard paragraphs, but is not wrapped by anything itself.
Example Text Contained by a Table:
Notes: Text may often be contained inside a table to accomplish certain
layout effects. This section previews the look of text rendered inside
table cells. Cell padding, spacing and border are all set to zero. Row has valign set to top.
Although the basic rules of typography are much the same for both Web pages and conventional
print documents, type on-screen and type printed on paper are different in crucial ways.
The computer screen renders typefaces at a much lower resolution than is found in books,
magazines, and even pages output from inexpensive printers.
Most magazine and book typography
is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show
more than about 85 dpi. Also, the useable area of typical computer screens is smaller
than most magazine and book pages, limiting the information you can deliver on a Web page
without scrolling. The
process is fraught with possibilities for the unexpected: a missing font, an out-of-date
browser, or a peculiar set of font preferences designated by the reader. You should regard
your Web page layouts and typography as suggestions of how your pages should be
rendered you'll never know exactly how they will look on the reader's screen.
Text and Image Wrapping Tests:
Notes: Image alignment and text wrapping are simple concepts, but mastery
is elusive to users of typical word processors and spreadsheets. Typical newbies
are used to seeing documents rendered in only one or two contexts (their screen
and their printer).
Because web pages can be displayed on anything from a high-res monitor, a
printer, or even a mobile phone or PDA, the display strategy can be a bit more complicated.
New web authors usually remember what is was like to see a letter printed on an
old dot-matrix printer vs. a laser. The concept is similar. The letter came out
of the old printer as a partial page with fuzzy text.
The problem with such display requirements on the web is that the author can
never predict how capable the visitor's screen will be. The screen might be 1200
pixels on a standard monitor, but 120 pixels wide on a mobile phone.
To allow a related image to remain close to the text with which is is
associated, a very simple idea is used to help the browser decide where to put
your image. When inserted, an image is anchored at the start
(to the left) of the text next to which it should float.
Like text, images are normally lined up with the left margin unless a design
specification explicitly indicates that they should be centered or right-justified.
When a paragraph is set to wrap to the left of an image, the browser actually
floats the image as far to the right as allowed by the containing design.
Of course, A similar process is followed when wrapping to the right.
This section is broken up into three sections: large, medium, and small.
Each section will give you an indication of how each size of photo will
be treated by the design as specified.
Text Wrap Right / Large Image Float Left:
This paragraph is placed above an image which is to be aligned to the left.
Text will wrap around the image to the right of the image.
The image will appear along the left hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to
the specified paragraph. If we were talking about beautiful tropical sunsets,
a nice photo of a sunset would be perfect rather than this image. Note how the top,
left, right, and bottom edges of this image align with the wrapping text.
This is the third paragraph that generally appears below the paragraph with the image. However,
if the fonts are small enough, or the page design is wide enough, this paragraph may
also be wrapping around this photo anchored to the top of the previous paragraph.
Text Wrap Left / Large Image Float Right:
This paragraph is placed above an image which is to be aligned to the right.
Text will wrap around the image to the right of the image.
The image will appear along the right hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to the
specified paragraph. If we were talking about beautiful tropical sunsets, a nice
photo of a sunset would be perfect rather than this image. Note how the top,
left, right, and bottom edges of this image align with the wrapping text.
This is the third paragraph that appears below the paragraph with the image. However,
if the fonts are small enough, the photo is large enough, or the page design is
wide enough, this paragraph may also be wrapping around this photo anchored to
the top of the previous paragraph.
Large Image No Wrap:
This paragraph is placed above an image which is not to be aligned to the right or left.
Text will not wrap around this image. The image will be left aligned, centered,
or right aligned ONLY if all text for this page is instructed to do so.
The image will appear above this paragraph. The image
itself is not anchored within this paragraph, but is between paragraphs.
As you can see this is very nice for focusing the reader on the image itself.
Unordered List / Large Image Float Left:
This paragraph is above an image that will be aligned to the left, with text in an unordered
list wrapping to the right around the image. This will test the behavior of bullet points
with images.
- The image will appear to the left of this list.
- There should be a small amount of space between the
- bullets and the image. This test is to ensure no
- there is no bleed of the bullets onto the images.
Text Wrap Left / Medium Image Float Right:
This paragraph is placed above an image which is to be aligned to the left.
Text will wrap around the image to the right of the image.
The image will appear along the left hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to
the specified paragraph. If we were talking about beautiful tropical sunsets,
a nice photo of a sunset would be perfect rather than this image. Note how the top,
left, right, and bottom edges of this image align with the wrapping text.
This is the third paragraph that generally appears below the paragraph with the image. However,
if the fonts are small enough, or the page design is wide enough, this paragraph may
also be wrapping around this photo anchored to the top of the previous paragraph.
Text Wrap Right / Medium Image Float Left:
This paragraph is placed above an image which is to be aligned to the right.
Text will wrap around the image to the right of the image.
The image will appear along the right hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to the
specified paragraph. If we were talking about beautiful tropical sunsets, a nice
photo of a sunset would be perfect rather than this image. Note how the top,
left, right, and bottom edges of this image align with the wrapping text.
This is the third paragraph that appears below the paragraph with the image. However,
if the fonts are small enough, the photo is large enough, or the page design is
wide enough, this paragraph may also be wrapping around this photo anchored to
the top of the previous paragraph.
Medium Image No Wrap:
This paragraph is placed above an image which is not to be aligned to the right or left.
Text will not wrap around this image. The image will be left aligned, centered,
or right aligned ONLY if all text for this page is instructed to do so.
The image will appear above this paragraph. The image
itself is not anchored within this paragraph, but is between paragraphs.
As you can see this is very nice for focusing the reader on the image itself.
Text Wrap Left / Small Image Float Right:
This paragraph is placed above an image which is to be aligned to the left.
Text will wrap around the image to the right of the image.
The image will appear along the left hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to
the specified paragraph. Note how the top, left, right, and bottom edges of this
image align with the wrapping text.
This is the third paragraph that generally appears below the paragraph with the image. However,
if the fonts are small enough, or the page design is wide enough, this paragraph may
also be wrapping around this photo anchored to the top of the previous paragraph.
Text Wrap Right / Small Image Float Left:
This paragraph is placed above an image which is to be aligned to the right.
Text will wrap around the image to the right of the image.
The image will appear along the right hand side of this paragraph. The image
itself is anchored to the left of the starting words "The image...". As
you can see this is very nice for adding a little eye candy that relates to the
specified paragraph. Note how the top, left, right, and bottom edges of this image
align with the wrapping text.
This is the third paragraph that appears below the paragraph with the image. However,
if the fonts are small enough, the photo is large enough, or the page design is
wide enough, this paragraph may also be wrapping around this photo anchored to
the top of the previous paragraph.
Small Image No Wrap:
This paragraph is placed above an image which is not to be aligned to the right or left.
Text will not wrap around this image. The image will be left aligned, centered,
or right aligned ONLY if all text for this page is instructed to do so.
The image will appear above this paragraph. The image
itself is not anchored within this paragraph, but is between paragraphs.
As you can see this is very nice for focusing the reader on the image itself.
Example Address Text:
address line one
address line two
Note: Address is intended for information such as addresses, telephone numbers, etc., appearing within a document.
Example Preformatted Text:
Text will be rendered using a monopitch typeface. The style implies a manual
paragraph break, i.e. end the current line and generate a blank line. Within the
tag all spaces are rendered literally and line breaks are rendered literally,
however other HTML markup is still recognized.
A Preformatted line of text goes here . A
second preformatted line of text goes here.
Note: Preformatted text is often used to align tables of text.
Example Indented Paragraph
The distinction is usually achieved by indentation at both ends of a text line, i.e. a temporary increase in margin width for the duration of the element. It causes a paragraph break.
Example of Hyperlinks:
This paragraph has a hyperlink in it.
Note: TODO Fix this
This paragraph has a visited hyperlink in it.
Example of Linebreaks:
This is paragraph text
(this is a line break)
(this is another line break)
Example Numeric List:
- Item one
- Item two
- sub Item one
- Item three
- sub Item one
- sub Item two
- Item four
- sub Item one
- sub sub Item one
- sub Item two
- sub Item three
- Item five
- sub Item one
- sub sub Item one
- sub sub Item two
- sub Item two
- sub Item three
- sub Item four
- Item six
- sub Item one
- sub sub Item one
- sub sub Item two
- sub sub Item three
- sub Item two
- sub Item three
- Deep List Display (1)
- sub sub Item (2)
- sub sub sub Item (3)
- sub sub sub sub Item (4)
- sub sub sub sub sub Item (5)
- sub sub sub sub sub sub Item (6)
- sub Item five
Note:A numbered list is a list of items. The list items are marked with numbers.
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
The list items in each list will be indented in a way appropriate for this design.
Example Bulleted List:
- Bullet one
- Bullet two
- sub Bullet one
- Bullet three
- sub Bullet one
- sub Bullet two
- Bullet four
- sub Bullet one
- sub sub Bullet one
- sub Bullet two
- sub Bullet three
- Bullet five
- sub Bullet one
- sub sub Bullet one
- sub sub Bullet two
- sub Bullet two
- sub Bullet three
- sub Bullet four
- Bullet six
- sub Bullet one
- sub sub Bullet one
- sub sub Bullet two
- sub sub Bullet three
- sub Bullet two
- sub Bullet three
- Deep Bullet Display (1)
- sub sub Bullet (2)
- sub sub sub Bullet (3)
- sub sub sub sub Bullet (4)
- sub sub sub sub sub Bullet (5)
- sub sub sub sub sub sub Bullet (6)
- sub Bullet five
Note:Bulleted (or Unordered) lists are rendered in an identical manner
as Numbered Lists except that Visitor Browsers will number ordered list items.
Browsers may present those numbers in a variety of ways. Again, unordered list
items should be indented in a way that is consistent with the page design.
Text Elements
The a element example
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element
example
The em element example
The del element example
The dfn element and dfn element with title examples
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element inside
a q element
example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Example Font Families:
This text shows how the "Arial" font is displayed.
This text shows how the "Times New Roman" font is displayed.
This text shows how the "Courier" font is displayed.
This text shows how the "Georgia" font is displayed.
This text shows how the "Verdana" font is displayed.
This text shows how the "Geneva" font is displayed.
Note: The Site designer or Alpine staff may has overridden these font definitions to fully comply with your design goals.
Example Font Sizes:
This text shows how font size=1 is displayed.
This text shows how font size=2 is displayed.
This text shows how font size=3 is displayed.
This text shows how font size=4 is displayed.
This text shows how font size=5 is displayed.
This text shows how font size=6 is displayed.
This text shows how font size=7 is displayed.
Notes: The Site designer or Alpine staff may has overridden these font definitions to fully comply with your design goals.
Be sure to use section headers (above) instead of selecting a font size. This will help search engines categorize your content.
Also, the Macintosh and Windows operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on the Macintosh. Thus a line of 12-point Times type on a Macintosh looks more like 14 points in Times New Roman on a Windows machine. This difference in font rendering can have a big impact on your page layouts. The following table shows the major Microsoft TrueType typefaces in their 12-point sizes, as displayed in both Windows and on a Macintosh.
List Types
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Definition List
- Definition List Term 1
- This is a definition list description.
- Definition List Term 2
- This is a definition list description.
- Definition List Term 3
- This is a definition list description.
Tables
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Fieldsets, Legends, and Form Elements
This last section contains elements that don't render well in markdown. Please consult the final section in styleguide.html, to see the rest of the styleguide.
Example Text Colors:
Text color: black, background-color: white
Text color: white, background-color: black
Text color: red, background-color: white
Text color: blue, background-color: white
Text color: green, background-color: yellow
Text color: white, background-color: red
Note:Be sure to have a strong contrast between text and background. This implies light-on-dark
or dark-on-light: color contrasts are insufficient to cater for monochrome displays or color-blind
readers. Also note that this implies that authors setting a text color should also set the
corresponding background, and vice versa.
Example Paragraph Alignment
This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left.
This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center.
This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right.
The SAS Version 7.0 List of 138 Color Names
Colors can be specified in HTML pages in two ways by using a color name, or by using numbers to denote an RGB color value. An RGB color value consists of three two-digit hexadecimal numbers specifying the intensity of the corresponding color.
For example, the color value #FF0000 is rendered red because the red number is set to its highest value, FF (or 255 in decimal form).
Sorted by Color Code
Sorted by Color Name
Specified by Name
000000
Black
F0F8FF
AliceBlue
F0F8FF
AliceBlue
000080
Navy
FAEBD7
AntiqueWhite
FAEBD7
AntiqueWhite
00008B
DarkBlue
00FFFF
Aqua (Cyan)
00FFFF
Aqua (Cyan)
0000CD
MediumBlue
7FFDD4
Aquamarine
7FFDD4
Aquamarine
0000FF
Blue
F0FFFF
Azure
F0FFFF
Azure
006400
DarkGreen
F5F5DC
Beige
F5F5DC
Beige
008000
Green
FFE4C4
Bisque
FFE4C4
Bisque
008080
Teal
000000
Black
000000
Black
008B8B
DarkCyan
FFEBCD
BlanchedAlmond
FFEBCD
BlanchedAlmond
00BFFF
DeepSkyBlue
0000FF
Blue
0000FF
Blue
00CED1
DarkTurquoise
8A2BE2
BlueViolet
8A2BE2
BlueViolet
00FA9A
MediumSpringGreen
A52A2A
Brown
A52A2A
Brown
00FF00
Lime
DEB887
Burlywood
DEB887
Burlywood
00FF7F
SpringGreen
5F9EA0
CadetBlue
5F9EA0
CadetBlue
00FFFF
Aqua (Cyan)
7FFF00
Chartreuse
7FFF00
Chartreuse
191970
MidnightBlue
D2691E
Chocolate
D2691E
Chocolate
1E90FF
DodgerBlue
FF7F50
Coral
FF7F50
Coral
20B2AA
LightSeaGreen
6495ED
CornFlowerBlue
6495ED
CornFlowerBlue
228B22
ForestGreen
FFF8DC
Cornsilk
FFF8DC
Cornsilk
2E8B57
SeaGreen
DC143C
Crimson
DC143C
Crimson
2F4F4F
DarkSlateGray
00008B
DarkBlue
00008B
DarkBlue
32CD32
LimeGreen
008B8B
DarkCyan
008B8B
DarkCyan
3CB371
MediumSeaGreen
B8860B
DarkGoldenrod
B8860B
DarkGoldenrod
40E0D0
Turquoise
A9A9A9
DarkGray
A9A9A9
DarkGray
4169E1
RoyalBlue
006400
DarkGreen
006400
DarkGreen
4682B4
SteelBlue
BDB76B
DarkKhaki
BDB76B
DarkKhaki
483D8B
DarkSlateBlue
8B008B
DarkMagenta
8B008B
DarkMagenta
48D1CC
MediumTurquoise
556B2F
DarkOliveGreen
556B2F
DarkOliveGreen
4B0082
Indigo
FF8C00
DarkOrange
FF8C00
DarkOrange
556B2F
DarkOliveGreen
9932CC
DarkOrchid
9932CC
DarkOrchid
5F9EA0
CadetBlue
8B0000
DarkRed
8B0000
DarkRed
6495ED
CornFlowerBlue
E9967A
DarkSalmon
E9967A
DarkSalmon
66CDAA
MediumAquamarine
8FBC8F
DarkSeaGreen
8FBC8F
DarkSeaGreen
696969
DimGray
483D8B
DarkSlateBlue
483D8B
DarkSlateBlue
6A5ACD
SlateBlue
2F4F4F
DarkSlateGray
2F4F4F
DarkSlateGray
6B8E23
OliveDrab
00CED1
DarkTurquoise
00CED1
DarkTurquoise
708090
SlateGray
9400D3
DarkViolet
9400D3
DarkViolet
778899
LightSlateGray
FF1493
DeepPink
FF1493
DeepPink
7B68EE
MediumSlateBlue
00BFFF
DeepSkyBlue
00BFFF
DeepSkyBlue
7CFC00
LawnGreen
696969
DimGray
696969
DimGray
7FFDD4
Aquamarine
1E90FF
DodgerBlue
1E90FF
DodgerBlue
7FFF00
Chartreuse
B22222
FireBrick
B22222
FireBrick
800000
Maroon
FFFAF0
FloralWhite
FFFAF0
FloralWhite
800080
Purple
228B22
ForestGreen
228B22
ForestGreen
808000
Olive
DCDCDC
Gainsboro
DCDCDC
Gainsboro
808080
Gray
F8F8FF
GhostWhite
F8F8FF
GhostWhite
87CEEB
SkyBlue
FFD700
Gold
FFD700
Gold
87CEFA
LightSkyBlue
DAA520
Goldenrod
DAA520
Goldenrod
8A2BE2
BlueViolet
808080
Gray
808080
Gray
8B0000
DarkRed
008000
Green
008000
Green
8B008B
DarkMagenta
ADFF2F
GreenYellow
ADFF2F
GreenYellow
8B4513
SaddleBrown
F0FFF0
Honeydew
F0FFF0
Honeydew
8FBC8F
DarkSeaGreen
FF69B4
HotPink
FF69B4
HotPink
90EE90
LightGreen
CD5C5C
IndianRed
CD5C5C
IndianRed
9370DB
MediumPurple
4B0082
Indigo
4B0082
Indigo
9400D3
DarkViolet
FFFFF0
Ivory
FFFFF0
Ivory
98FB98
PaleGreen
F0E68C
Khaki
F0E68C
Khaki
9932CC
DarkOrchid
E6E6FA
Lavender
E6E6FA
Lavender
9ACD32
YellowGreen
FFF0F5
LavenderBlush
FFF0F5
LavenderBlush
A0522D
Sienna
7CFC00
LawnGreen
7CFC00
LawnGreen
A52A2A
Brown
FFFACD
LemonChiffon
FFFACD
LemonChiffon
A9A9A9
DarkGray
ADD8E6
LightBlue
ADD8E6
LightBlue
ADD8E6
LightBlue
F08080
LightCoral
F08080
LightCoral
ADFF2F
GreenYellow
E0FFFF
LightCyan
E0FFFF
LightCyan
AFEEEE
PaleTurquoise
FAFAD2
LightGoldenrodYellow
FAFAD2
LightGoldenrodYellow
B0C4DE
LightSteelBlue
90EE90
LightGreen
90EE90
LightGreen
B0E0E6
PowderBlue
D3D3D3
LightGrey
D3D3D3
LightGrey
B22222
FireBrick
FFB6C1
LightPink
FFB6C1
LightPink
B8860B
DarkGoldenrod
FFA07A
LightSalmon
FFA07A
LightSalmon
BA55D3
MediumOrchid
20B2AA
LightSeaGreen
20B2AA
LightSeaGreen
BC8F8F
RosyBrown
87CEFA
LightSkyBlue
87CEFA
LightSkyBlue
BDB76B
DarkKhaki
778899
LightSlateGray
778899
LightSlateGray
C0C0C0
Silver
B0C4DE
LightSteelBlue
B0C4DE
LightSteelBlue
C71585
MediumVioletRed
FFFFE0
LightYellow
FFFFE0
LightYellow
CD5C5C
IndianRed
00FF00
Lime
00FF00
Lime
CD853F
Peru
32CD32
LimeGreen
32CD32
LimeGreen
D2691E
Chocolate
FAF0E6
Linen
FAF0E6
Linen
D2B48C
Tan
FF00FF
Magenta (Fuchsia)
FF00FF
Magenta (Fuchsia)
D3D3D3
LightGrey
800000
Maroon
800000
Maroon
D8BFD8
Thistle
66CDAA
MediumAquamarine
66CDAA
MediumAquamarine
DA70D6
Orchid
0000CD
MediumBlue
0000CD
MediumBlue
DAA520
Goldenrod
BA55D3
MediumOrchid
BA55D3
MediumOrchid
DB7093
PaleVioletRed
9370DB
MediumPurple
9370DB
MediumPurple
DC143C
Crimson
3CB371
MediumSeaGreen
3CB371
MediumSeaGreen
DCDCDC
Gainsboro
7B68EE
MediumSlateBlue
7B68EE
MediumSlateBlue
DDA0DD
Plum
00FA9A
MediumSpringGreen
00FA9A
MediumSpringGreen
DEB887
Burlywood
48D1CC
MediumTurquoise
48D1CC
MediumTurquoise
E0FFFF
LightCyan
C71585
MediumVioletRed
C71585
MediumVioletRed
E6E6FA
Lavender
191970
MidnightBlue
191970
MidnightBlue
E9967A
DarkSalmon
F5FFFA
MintCream
F5FFFA
MintCream
EE82EE
Violet
FFE4E1
MistyRose
FFE4E1
MistyRose
EEE8AA
PaleGoldenrod
FFE4B5
Moccasin
FFE4B5
Moccasin
F08080
LightCoral
FFDEAD
NavajoWhite
FFDEAD
NavajoWhite
F0E68C
Khaki
000080
Navy
000080
Navy
F0F8FF
AliceBlue
FDF5E6
Oldlace
FDF5E6
Oldlace
F0FFF0
Honeydew
808000
Olive
808000
Olive
F0FFFF
Azure
6B8E23
OliveDrab
6B8E23
OliveDrab
F4A460
SandyBrown
FFA500
Orange
FFA500
Orange
F5DEB3
Wheat
FF4500
OrangeRed
FF4500
OrangeRed
F5F5DC
Beige
DA70D6
Orchid
DA70D6
Orchid
F5F5F5
WhiteSmoke
EEE8AA
PaleGoldenrod
EEE8AA
PaleGoldenrod
F5FFFA
MintCream
98FB98
PaleGreen
98FB98
PaleGreen
F8F8FF
GhostWhite
AFEEEE
PaleTurquoise
AFEEEE
PaleTurquoise
FA8072
Salmon
DB7093
PaleVioletRed
DB7093
PaleVioletRed
FAEBD7
AntiqueWhite
FFEFD5
PapayaWhip
FFEFD5
PapayaWhip
FAF0E6
Linen
FFDAB9
Peachpuff
FFDAB9
Peachpuff
FAFAD2
LightGoldenrodYellow
CD853F
Peru
CD853F
Peru
FDF5E6
Oldlace
FFC0CB
Pink
FFC0CB
Pink
FF0000
Red
DDA0DD
Plum
DDA0DD
Plum
FF00FF
Magenta (Fuchsia)
B0E0E6
PowderBlue
B0E0E6
PowderBlue
FF1493
DeepPink
800080
Purple
800080
Purple
FF4500
OrangeRed
FF0000
Red
FF0000
Red
FF6347
Tomato
BC8F8F
RosyBrown
BC8F8F
RosyBrown
FF69B4
HotPink
4169E1
RoyalBlue
4169E1
RoyalBlue
FF7F50
Coral
8B4513
SaddleBrown
8B4513
SaddleBrown
FF8C00
DarkOrange
FA8072
Salmon
FA8072
Salmon
FFA07A
LightSalmon
F4A460
SandyBrown
F4A460
SandyBrown
FFA500
Orange
2E8B57
SeaGreen
2E8B57
SeaGreen
FFB6C1
LightPink
FFF5EE
Seashell
FFF5EE
Seashell
FFC0CB
Pink
A0522D
Sienna
A0522D
Sienna
FFD700
Gold
C0C0C0
Silver
C0C0C0
Silver
FFDAB9
Peachpuff
87CEEB
SkyBlue
87CEEB
SkyBlue
FFDEAD
NavajoWhite
6A5ACD
SlateBlue
6A5ACD
SlateBlue
FFE4B5
Moccasin
708090
SlateGray
708090
SlateGray
FFE4C4
Bisque
FFFAFA
Snow
FFFAFA
Snow
FFE4E1
MistyRose
00FF7F
SpringGreen
00FF7F
SpringGreen
FFEBCD
BlanchedAlmond
4682B4
SteelBlue
4682B4
SteelBlue
FFEFD5
PapayaWhip
D2B48C
Tan
D2B48C
Tan
FFF0F5
LavenderBlush
008080
Teal
008080
Teal
FFF5EE
Seashell
D8BFD8
Thistle
D8BFD8
Thistle
FFF8DC
Cornsilk
FF6347
Tomato
FF6347
Tomato
FFFACD
LemonChiffon
40E0D0
Turquoise
40E0D0
Turquoise
FFFAF0
FloralWhite
EE82EE
Violet
EE82EE
Violet
FFFAFA
Snow
F5DEB3
Wheat
F5DEB3
Wheat
FFFF00
Yellow
FFFFFF
White
FFFFFF
White
FFFFE0
LightYellow
F5F5F5
WhiteSmoke
F5F5F5
WhiteSmoke
FFFFF0
Ivory
FFFF00
Yellow
FFFF00
Yellow
FFFFFF
White
9ACD32
YellowGreen
9ACD32
YellowGreen
** End of Style Guide **