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 **
