Cascading Style Sheets

The name 'Cascading Style Sheets' is well chosen. These remarkable beasts allow you to change web-page style in a powerful fashion. And they do cascade --- style sheets can be applied generally over a whole web site and yet be refined for a particular web page. Within a page, style cascades from tag to included tag.

In this document we provide an overview of CSS with practical examples (used in this web-page; here's the actual style sheet)! We look at how to create style elements, including how to change colours and fonts, and provide a fairly comprehensive list of CSS 2.1 properties. We assume you are fluent at HTML.

Especially at first reading, you may wish to skip over comments like this one, which we term `fine print'!

1. Specifying style

It is possible to use style elements inside a web page itself, but this approach defeats the idea that the page content should be separate from the style. Plonk the style element in the head of the HTML (NOT the body):

<head>
 <style type="text/css">
  body { color: black; background: white; }
 </style>
</head>

The format of this <style> tag is worth noting --- it contains a single rule. A rule is made up of something like a tag name (the technical term is a selector) followed by a list of declarations within {curly braces}. Each declaration in the list has the following peculiar format:

property-name : value-for-this-property ;

Individual declarations are separated by semicolons. In this document we'll eventually go through a long list of possible properties.

The main use of style elements within web-pages (rather than specifying the style in an associated style sheet) is where you want to achieve a particular effect local to this page. Put the style element in the head after you've linked to the associated style sheet as specified in the next section.

By the way, selectors can contain only the characters A-Z, 0-9, and Unicode characters 161-255, plus dash (-); they cannot start with a dash or a digit. They can also contain escaped characters (prefix the character with a \backslash) and Unicode characters (a backslash followed by at most four hexadecimal digits). Practically, avoid all this and only use alphanumerics.

How do I include a CSS in a web-page?

You can refer several pages to the same sheet, and then alter the style of all of those pages in one stroke! Link a web page to its style sheet (again, from the HTML head) thus:

<link type="text/css" rel="stylesheet" href="mystyle.css">

You can name the sheet anything you want, but keep the ".css" suffix. Don't fiddle with the rel and type statements, just leave them as in the above example. Another way of importing a style sheet is within a <style> tag as follows:

<style type="text/css"><!--
   @import url("mystyle.css");
--></style>

It may be smarter to stick to the former approach. By the way, see how in the above example we used the `more appropriate but somehow less correct' approach of commenting out the contents of the style tag! When you use @import within a CSS itself, all such statements must precede the first declaration. This is a good thing! The format of the URL is important. As the good (CSS1) book has it "Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'."

Now let's look at the sheet itself. A sheet is simply a collection of rules.

/* mystyle.css - a minuscule style sheet */
body {
  margin-left: 5%; margin-right: 5%;
  color: #00008B; background: #FFE4C4;
}

Okay, pretty basic, but you get the general idea (including seeing how comments are /* made in this way */ just like in the programming language C)! We've coloured the text dark blue (hexadecimal code 00008B) and the background 'bisque1' (hex FFE4C4). And we've created margins for our page, something which is a real pain to do using just HTML, if you've ever tried this! This tiny example is the basis for the slightly more complex CSS used in this web-page!

2. Selector basics --- tags

In something like:

<style type="text/css">
  h1 { color: black; background: white; }
</style>

... it's possible to group several selectors, separated by commas

  h1, h2, h3 { color: black; background: white; }

Any HTML tag can be used as a selector. Here are some important ones:

Practically the only element which can't be modified by CSS specifications is br.

Contextual selectors

Don't leave out the commas! Consider the following:

  h1 em { color: red; }

This will only turn on em elements within an h1 tag! Such a contextual selector can be very convenient. To make matters even more confusing, you can group selectors thus:

H2 B, H3 B, H3 EM { color: blue }

Regard the absence of a comma indicating 'AND' and the presence of a comma as meaning 'OR', with the normal infix rules for logical precedence. Similar to the contextual selector is the child selector, which is made up of the parent (on the left) followed by > and then the child element. The selector works on the child if it's found (with its parent, of course). There's even an 'adjacent sibling selector' which identifies the second sibling of two siblings of the same parent, joined in the selector by a +. Here's an example which decreases the vertical spacing between an H1 and an H2 which follows immediately:

h1 + h2 { margin-top: -5mm }

Nesting

If a tag is nested within another tag and its closure, then the inner tag inherits properties from the outer one!

Of particular importance is the following question.

How do I apply properties to the whole webpage?

We've already seen how to do this! For if you apply properties to the body tag, then everything will inherit those properties!

3. Layout

There are two types of element and three ways of positioning things in CSS. The two types of element are:

  1. Inline elements: simply elements which can occur in a line of text, things things like SPAN, I and BOLD.
  2. Block elements: really everything else, including paragraphs, components of tables, list components, and all floating elements. Padding, borders and margins as they apply to block elements are discussed later.
Positioning schemes

The three 'positioning schemes' are:

  1. Normal flow: how inline elements are normally laid out, and how boxes are placed next to one another.
  2. Floats: a sneaky mechanism by which normal flow is initially followed, and then the floated item is taken out of the flow and shifted right or left until it will go no further (it bumps into something). Text and other content flows along one side of the floated item.
  3. Absolute positioning (according to the containing block): the object is taken out of normal flow from the start. Use absolute positioning with caution.

Floats and the various positioning schemes are further discussed below.

4. Conflict of interest

Your own browser with its settings can be seen as having its own internal style. This style may conflict with the style in a particular page. In addition, a page on a site might call upon the default sheets but wish to modify things. Conflict may occur, so we need rules for resolution.

Things won't necessarily resolve in a way which pleases everyone. Generally speaking the reader's rules have a lesser weight than those of the author, but there are ways around this (and, as you might expect, there are ways around the ways around)!

The following statement gives increased weight to the rules:

  H1 { color: black ! important; background: white ! important }

If the 'user agent' sets up their sheet using '! important' then this takes precedence; the writer of the document can in turn override this with their own '! important' specification. There are complex meta-rules for calculating the weight (specificity) of rules with apparently similar importance.

5. A touch of class

You can create style rules within a particular tag. Let's say, for example that we wish to have a particular class of h2 header called, oh what the heck, 'fred'. In our style sheet we say:

h2.fred {margin-top : 3em}

Later, when we wish to use this class we simply say:

<h2 class="fred"> header goes here </h2>

The CLASS element was actually added to HTML specifically to help CSS in its tasks! It's wise to keep your class names cAse SENsiTivE, even though CSS is generally case-insensitve. There's an extremely useful refinement of the class specification thus:

.jane {color : red}

Any HTML element with class="jane" will now acquire a red font colour, not just a particular class of element such as <h2> in the previous example. Class specifications can be combined thus:

<h2 class="fred jane"> header here </h2>

It's even possible to match a rule to an HTML element with a particular id. Take this example, which will only apply to the element with the unique id 'firstpara':

#firstpara { margin : 0; }

Except in very special circumstances, you should avoid such usage.

6. Standard colours

There's a paucity of standard colours in HTML --- just seventeen: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. (Orange was added after CSS1)!

Here's the 216-colour 'cube' of colour-fast colours, guaranteed to be pretty much the same on any browser:

#000000
#000033
#000066
#000099
#0000CC
#0000FF
#003300
#003333
#003366
#003399
#0033CC
#0033FF
#006600
#006633
#006666
#006699
#0066CC
#0066FF
#009900
#009933
#009966
#009999
#0099CC
#0099FF
#00CC00
#00CC33
#00CC66
#00CC99
#00CCCC
#00CCFF
#00FF00
#00FF33
#00FF66
#00FF99
#00FFCC
#00FFFF
#330000
#330033
#330066
#330099
#3300CC
#3300FF
#333300
#333333
#333366
#333399
#3333CC
#3333FF
#336600
#336633
#336666
#336699
#3366CC
#3366FF
#339900
#339933
#339966
#339999
#3399CC
#3399FF
#33CC00
#33CC33
#33CC66
#33CC99
#33CCCC
#33CCFF
#33FF00
#33FF33
#33FF66
#33FF99
#33FFCC
#33FFFF
#660000
#660033
#660066
#660099
#6600CC
#6600FF
#663300
#663333
#663366
#663399
#6633CC
#6633FF
#666600
#666633
#666666
#666699
#6666CC
#6666FF
#669900
#669933
#669966
#669999
#6699CC
#6699FF
#66CC00
#66CC33
#66CC66
#66CC99
#66CCCC
#66CCFF
#66FF00
#66FF33
#66FF66
#66FF99
#66FFCC
#66FFFF
#990000
#990033
#990066
#990099
#9900CC
#9900FF
#993300
#993333
#993366
#993399
#9933CC
#9933FF
#996600
#996633
#996666
#996699
#9966CC
#9966FF
#999900
#999933
#999966
#999999
#9999CC
#9999FF
#99CC00
#99CC33
#99CC66
#99CC99
#99CCCC
#99CCFF
#99FF00
#99FF33
#99FF66
#99FF99
#99FFCC
#99FFFF
#CC0000
#CC0033
#CC0066
#CC0099
#CC00CC
#CC00FF
#CC3300
#CC3333
#CC3366
#CC3399
#CC33CC
#CC33FF
#CC6600
#CC6633
#CC6666
#CC6699
#CC66CC
#CC66FF
#CC9900
#CC9933
#CC9966
#CC9999
#CC99CC
#CC99FF
#CCCC00
#CCCC33
#CCCC66
#CCCC99
#CCCCCC
#CCCCFF
#CCFF00
#CCFF33
#CCFF66
#CCFF99
#CCFFCC
#CCFFFF
#FF0000
#FF0033
#FF0066
#FF0099
#FF00CC
#FF00FF
#FF3300
#FF3333
#FF3366
#FF3399
#FF33CC
#FF33FF
#FF6600
#FF6633
#FF6666
#FF6699
#FF66CC
#FF66FF
#FF9900
#FF9933
#FF9966
#FF9999
#FF99CC
#FF99FF
#FFCC00
#FFCC33
#FFCC66
#FFCC99
#FFCCCC
#FFCCFF
#FFFF00
#FFFF33
#FFFF66
#FFFF99
#FFFFCC
#FFFFFF

At the end of this web page we've attached an enormous list of colours, as an appendix.

7. All of the properties

What are CSS1, CSS2, and CSS 2.1? Well CSS1 was the original specification, which provided the basics of CSS. The makers looked at it, saw it was good, and then moved on to CSS2, which (among other things) specifies how to make CSS work on particular graphic devices. Almost all of the HTML browser makers screwed things up at this point, so the experts got together and wrote CSS 2.1, which tries to fix up the worst problems engendered by bad interpretation of 2.0.

There are ninety-five properties in CSS 2.1! They can take on several possible values. Here's our attempt to enumerate properties and list values. There are fewer than 95 in our list as we've combined some elements under one heading. MSIE has a whole lot of things like filter and scrollbar formatting which other browsers don't support.

We've already talked about colours, but what about units of size? It's possible to specify many, but it's wise to stick to either percentages (where relevant), or the em. One em is the height of the font! Avoid use of pixels and points. For the record, options are mm, cm, in, pt [points], pc [Pica], em, ex and px [pixels]. An ex is the height of the letter 'x' in the current font. Always give the units for example, if you're mad enough to specify 100 pixels, say 100px and not simply 100. When a child inherits a value from its parent, if the parent value was specified as a percentage, the actual value is calculated and then passed on to the child, not the 'percentage'.

Note that with references to borders, the normal sequence of referring to them is clockwise --- top, right, bottom, and left. Mezzoblue has the lovely mnemonic `TRouBLed borders'!

Most of the following properties apply to all elements. Note the Americanized spelling of `color' and so forth! We have highlighted certain elements we consider important thus! We've grouped the properties logically under the sub-headings text, text spacing, 'box' layout, positioning, background, lists, tables, and a variety of other things. There's even some fancy printing stuff.

Text itself, and fonts

Font-matching is performed very carefully in CSS. The rules are complex, involving sequential matching of style, variant, weight and size. Avoid specifying the absolute size of a font, except perhaps as the base font size for the whole document.

  1. color : #FF8000 or one of the seventeen names, or, say rgb(255,128,0) or rgb(100%,50%,0%)
  2. font-style : italic | oblique | normal
  3. font-variant: normal | small-caps
  4. font-weight : bold | normal | lighter | bolder or one of the nine numeric weights 100 .. 900.
  5. font-size : 200% (or a length, or larger | smaller, or one of: xx-large | x-large | large | medium | small | x-small | xx-small)
  6. font-family : serif | sans-serif | cursive | fantasy | monospace | Garamond or whatever. Include something like "Times New Roman" in double quotes.
  7. font : caption | icon | menu | message-box | small-caption | status bar avoid these system font specifications like the plague, or a combination of style variant weight size family!

    In other words, we can condense:

      H1 { font-weight: bold; 
           font-size: 10pt;
           line-height: 12pt; 
           font-family: serif; 
           font-variant: normal;
           font-style: normal;
         }
    into:
      H1 { font: bold 10pt/12pt serif }

    Font sizes when expressed as a percentage are related to the normal font size of unadorned text. Font families can specify particular fonts, for example Garamond or "Times New Roman", but the last option (options are separated by commas) should always be one of the five generic options.

  8. text-decoration : none | a combination of underline, overline, line-through, blink
  9. text-transform : capitalize | uppercase | lowercase | none

    Text spacing

    Alignment of text and indentation are important, but so is the height of a line, which doesn't have to be the same as the height of the text (size of the font). The difference between the height of the line and the size of the font is called the leading. The leading can even be negative. The leading is distributed as a `half-leading' above and a half-leading below the text.

  10. white-space : normal | pre | nowrap most browsers don't support the other options pre-wrap | pre-line. pre preserves white space, and nowrap only breaks at <br> elements.
  11. text-align : left | right | center | justify
  12. text-indent : 2em a length or a percentage
  13. line-height : 2em minimum inter-baseline distance, a length or percentage or factor, e.g. 1.5 times the current value
  14. word-spacing : normal | a length additional spacing, which may be -ve
  15. letter-spacing : normal | as for word-spacing.
  16. vertical-align : 0.5em raise or lower image or text relative to baseline; can also specify a percentage, or baseline | sub | super | top | text-top | middle | bottom | text-bottom. Negative numeric values lower the element, positive raise it.
  17. direction : ltr | rtl can write backwards using rtl; there is no up/down buut..
  18. unicode-bidi : normal | embed | bidi-override Unicode standard stuff, rather complex.

    Layout 'in a box'

    The 'core content' of a box is surrounded (as we move outwards) by, in order, padding, the border, and a transparent margin. Each of these can be altered independently. Where two vertical margins are adjacent, the combined margin is collapsed to be equal to the larger of the two! (A source of much confusion). Margin values can be specified as negative numbers, but padding values can't.

  19. margin-top : auto | a length or a percentage;
  20. margin-right : similar to -top
  21. margin-bottom : and so on ...
  22. margin-left :
  23. margin : can specify up to 4 margin properties in one go
  24. padding-top etc. are similar to margin; there is a global padding which specifies several properties too.
  25. border-width : thin | medium | thick | 0.1em or whatever; up to 4 instances may be used to specify top, right, bottom, left properties!
  26. border-style : none | solid | dotted | dashed | double | groove | ridge | inset | outset --- up to 4 instances. Another variant is border-top-style, and so on.
  27. border-color : a colour, up to four instances; or use border-top-color and so on.
  28. border : specify -width, -colour and -style in one go
  29. width : 100% the width of the content area of an element; min-width and max-width can be used to provide protection against excesses in either direction. But min-width doesn't work in IE.
  30. height : similar to width and with similar protection: min-height and max-height.
  31. overflow : auto | visible | hidden | scroll handles display of children who don't fit!
  32. clip : auto | rect(0px, 100px, 10px, 20px); clips visible part of this element to the specified shape. The element referred to must be absolutely positioned!

    Positioning

    The position property determines the algorithm used to work out the positioning of a box. A static box is laid out according to normal flow, a relatively positioned box is offset from its normal position (calculated using normal flow, but the following element is placed as if the box is still in its original position!), absolute positioning is according to the containing block of the box in question, and fixed positioning is in a fixed position with respect to the 'viewport' --- in the case of HTML code, usually the browser window.

    Any element which isn't static is said to be positioned. Four properties specify this position: top, right, bottom and left.

  33. position : static | relative | absolute | fixed.
  34. float : none | left | right. If floated, handled as a `block element', and floated next to other block elements. The margins of floating boxes don't collapse.
  35. clear: none | left | right | both. Floating elements are not allowed on the specified sides of this element! Clear can be used to prevent content from flowing along the edge of a box.
  36. display : none | inline | block | list-item | run-in | inline-block | inline-table | [part of a table] Table parts are table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption.
  37. z-index : auto | [an integer] Negative values place an element behind its containing block; the z-index allows us to stack overlapping elements. Full consideration of the z-index is beyond the scope of this document.
  38. visibility : visible | hidden | collapse. Can hide an element but keep it in the document flow.

    Background

  39. background-attachment : scroll | fixed Does image move when element is scrolled?
  40. background-color : transparent | a colour
  41. background-image : none | a URL
  42. background-position : 10% 20% horizontal first, then vertical. A percentage, length or one of left | right | center | top | bottom
  43. background-repeat : no-repeat | repeat | repeat-x | repeat-y
  44. background : All five of the above at once (in order).

    Lists

  45. list-style-type : none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin;
  46. list-style-position: outside | inside is label outside or inside the box?!
  47. list-style-image: none | a URL
  48. list-style : shorthand for type, position and image all at once.

    Tables

  49. border-collapse : separate | collapse are borders shared with adjacent components? Here's an interesting article on how collapsing margins can cause headaches.
  50. border-spacing : 0.5em 0.2em one or two lengths, if 2 then first is horizontal
  51. empty-cells : hide | show borders of empty cells
  52. table-layout : fixed | auto fixed is faster as it works on row 1 'alone'
  53. caption-side : top | bottom
  54. width : auto | a length or percentage. The minimum width of a table or cell.
  55. vertical-align : baseline | top | bottom | middle baseline alignment of table cells.

    Generated stuff and more

    A lot of the following are proprietary. Avoid them for now!

  56. content specify content of pseudo-elements. May be a text string, counter(s), or normal | open-quote | close-quote | no-open-quote | no-close-quote, as well as quotes, counter-increment and counter-reset. The last two would be a wonderful asset).
  57. cursor : auto | a URL | one of default, pointer, text, help, wait, progress, crosshair, move, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize; Mainly a microsoft `innovation'
  58. outline-width : thin | medium | thick Not in IE
  59. outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden again not in IE.
  60. outline-color invert | a colour value. Not in IE.
  61. outline (combines the above)

    Printing

  62. page-break-before : auto | always | avoid | left | right
  63. page-break-after : as for page-break-before
  64. page-break-inside : auto | avoid Opera only.
  65. widows : integer Opera only.
  66. orphans : integer Opera only.

8. Pseudo-classes

The following code can be used to turn off default behaviour when the mouse is moved over an anchor:

  a:hover { text-decoration : none; }

This is an example of what is called a pseudo-class. Some pseudo-classes are:

These elements don't actually exist in the HTML code --- they are dependent on the state of the browser, but are conveniently represented as 'classes', hence the term 'pseudo-class'. When setting up pseudo-classes, order is important, so it's wise to use the order 'link, visited, hover, active', conveniently remembered using the mnemonic 'LoVe/HAte'.

Because a pseudo-class such as :link cannot be relevant to anything other than a, it's acceptable to leave out the a and render this as simply ":link".

Pseudo-classes can be used as contextual selectors thus:

A:link IMG {border : solid red}

They can also be used in combination with normal classes. Here's a lovely example from the w3.org documentation for CSS1:

A.external:visited { color: blue }

<A CLASS=external HREF="http://out.side/">external link</A>

9. Pseudo-elements

Another oddity. Rather than being associated with one type of tag, pseudo-elements are associated with the placement of an individual structural element on the 'canvas' of the web-page.

Examples of pseudo-elements available in CSS include:
  P:first-line   { font-variant: small-caps }
  P:first-letter { font-size: 200%; float: left }

The first rule above puts the first line in small caps, the second fiddles with the first letter. There are some limitations on the use of pseudo-elements, but they're pretty powerful. Other examples of pseudo-elements are:

The :before and :after pseudo-elements can be used to insert generated content before or after an element's content!

10. Rules and more rules

So far we've encountered just one rule: @import, but CSS2.1 defines others. For example.

For more details, see the CSS 2.1 reference!

11. Peculiarities

CSS works best with the following strange rules:

  1. Use an advanced browser, and then check and fix things in more primitive browsers. Test in Firefox with various font sizes (View|Text size|..), to see how things look!
  2. Validate your code (even write XHTML :-)!
  3. Never link to an empty style sheet.
  4. Don't use proprietary tags and properties (a la Microsoft/Internet Explorer);
  5. Encase all ordinary text in <p> paragraph delimiters </p> --- this isn't required by HTML but makes things work far better! If you indent your <p> tag in your style sheet, then paragraphs where you've left out this tag are easily identified and fixed.
  6. Set the font-family as monospace for pre tags;
  7. Set the font family for headers. Despite what you read, serif fonts are easier on the eye (especially when printed in black and white), so reserve sans-serif fonts such as Helvetica for headings, and use serif fonts in the body of your text! Typesetters have known this for centuries; as screen resolutions improve, the worth of this strategy will become more and more evident.
  8. If you're colouring a div background, specify a border (even if it's only none) as otherwise there may be patchy colouring!
  9. Don't use floats unless you have to. They're tricky.
  10. Don't apply padding directly to a fixed-width element.
  11. Don't put quote marks around the URL of a background image!

12. Links

There are many tutorials. A very basic introduction is at http://www.w3.org/MarkUp/Guide/Style but other reasonable sites are:

Smarter is to Google either [CSS introduction] or [CSS tutorial].


Appendix : many colours

Here are two long lists of colours, on the left sorted by name, and on the right, by 'grey-scale' intensity. If you choose colours with similar grey-scale intensity for 'ink' colour and background, sooner or later you'll disadvantage some poor colour-blind male.

Colour Hex Code
alice bluef0f8ff
antique whitefaebd7
antique white1ffefdb
antique white2eedfcc
antique white3cdc0b0
antique white48b8378
aquamarine17fffd4
aquamarine276eec6
aquamarine366cdaa
aquamarine4458b74
azure1f0ffff
azure2e0eeee
azure3c1cdcd
azure4838b8b
beigef5f5dc
bisque1ffe4c4
bisque2eed5b7
bisque3cdb79e
bisque48b7d6b
black000000
blanched almondffebcd
blue violet8a2be2
blue10000ff
blue20000ee
blue50000cd
browna52a2a
brown1ff4040
brown2ee3b3b
brown3cd3333
brown48b2323
burlywooddeb887
burlywood1ffd39b
burlywood2eec591
burlywood3cdaa7d
burlywood48b7355
cadet blue5f9ea0
cadet blue198f5ff
cadet blue28ee5ee
cadet blue37ac5cd
cadet blue453868b
chartreuse17fff00
chartreuse276ee00
chartreuse366cd00
chartreuse4458b00
chocolated2691e
chocolate1ff7f24
chocolate2ee7621
chocolate3cd661d
chocolate48b4513
coralff7f50
coral1ff7256
coral2ee6a50
coral3cd5b45
coral48b3e2f
cornflower blue6495ed
cornsilk1fff8dc
cornsilk2eee8cd
cornsilk3cdc8b1
cornsilk48b8878
crimsondc143c
cyan100ffff
cyan200eeee
cyan300cdcd
cyan4008b8b
dark blue00008b
dark goldenrodb8860b
dark goldenrod1ffb90f
dark goldenrod2eead0e
dark goldenrod3cd950c
dark graya9a9a9
dark green006400
dark khakibdb76b
dark magenta8b008b
dark olive green556b2f
dark olive green1caff70
dark olive green2bcee68
dark olive green3a2cd5a
dark olive green46e8b3d
dark orangeff8c00
dark orange1ff7f00
dark orange2ee7600
dark orange3cd6600
dark orange48b4500
dark orchid9932cc
dark orchid1bf3eff
dark orchid2b23aee
dark orchid39a32cd
dark orchid468228b
dark salmone9967a
dark sea green8fbc8f
dark sea green1c1ffc1
dark sea green2b4eeb4
dark sea green39bcd9b
dark sea green4698b69
dark slate blue483d8b
dark slate gray2f4f4f
dark slate gray197ffff
dark slate gray28deeee
dark slate gray379cdcd
dark slate gray4528b8b
dark turquoise00ced1
dark violet9400d3
deep pink1ff1493
deep pink2ee1289
deep pink3cd1076
deep pink48b0a50
deep sky blue100bfff
deep sky blue200b2ee
deep sky blue3009acd
deep sky blue400688b
dodger blue11e90ff
dodger blue21c86ee
dodger blue31874cd
dodger blue4104e8b
firebrickb22222
firebrick1ff3030
firebrick2ee2c2c
firebrick3cd2626
firebrick48b1a1a
floral whitefffaf0
forest green228b22
gainsborodcdcdc
ghost whitef8f8ff
gold1ffd700
gold2eec900
gold3cdad00
gold48b7500
goldenroddaa520
goldenrod1ffc125
goldenrod2eeb422
goldenrod3cd9b1d
goldenrod48b6914
gray808080
gray111c1c1c
gray21363636
gray314f4f4f
gray41696969
gray51828282
gray619c9c9c
gray71b5b5b5
gray81cfcfcf
gray91e8e8e8
green008000
green yellowadff2f
green100ff00
green200ee00
green300cd00
green4008b00
greybebebe
honeydew1f0fff0
honeydew2e0eee0
honeydew3c1cdc1
honeydew4838b83
hot pinkff69b4
hot pink1ff6eb4
hot pink2ee6aa7
hot pink3cd6090
hot pink48b3a62
indian redcd5c5c
indian red1ff6a6a
indian red2ee6363
indian red3cd5555
indian red48b3a3a
indigo4b0082
ivory1fffff0
ivory2eeeee0
ivory3cdcdc1
ivory48b8b83
khakif0e68c
khaki1fff68f
khaki2eee685
khaki3cdc673
khaki48b864e
lavendere6e6fa
lavender blush1fff0f5
lavender blush2eee0e5
lavender blush3cdc1c5
lavender blush48b8386
lawn green7cfc00
lemon chiffon1fffacd
lemon chiffon2eee9bf
lemon chiffon3cdc9a5
lemon chiffon48b8970
light blueadd8e6
light blue1bfefff
light blue2b2dfee
light blue39ac0cd
light blue468838b
light coralf08080
light cyan1e0ffff
light cyan2d1eeee
light cyan3b4cdcd
light cyan47a8b8b
light goldenrodeedd82
light goldenrod yellowfafad2
light goldenrod1ffec8b
light goldenrod2eedc82
light goldenrod3cdbe70
light goldenrod48b814c
light green90ee90
light greyd3d3d3
light pink1ffaeb9
light pink2eea2ad
light pink3cd8c95
light pink48b5f65
light salmon1ffa07a
light salmon2ee9572
light salmon3cd8162
light salmon48b5742
light sea green20b2aa
light sky blue87cefa
light sky blue1b0e2ff
light sky blue2a4d3ee
light sky blue38db6cd
light sky blue4607b8b
light slate blue8470ff
light slate grey778899
light steel blueb0c4de
light steel blue1cae1ff
light steel blue2bcd2ee
light steel blue3a2b5cd
light steel blue46e7b8b
light yellow1ffffe0
light yellow2eeeed1
light yellow3cdcdb4
light yellow48b8b7a
lime green32cd32
linenfaf0e6
magenta1ff00ff
magenta2ee00ee
magenta3cd00cd
maroon800000
maroonb03060
maroon1ff34b3
maroon2ee30a7
maroon3cd2990
maroon48b1c62
mauveffb6c1
medium orchidba55d3
medium orchid1e066ff
medium orchid2d15fee
medium orchid3b452cd
medium orchid47a378b
medium purple9370db
medium purple1ab82ff
medium purple29f79ee
medium purple38968cd
medium purple45d478b
medium sea green3cb371
medium slate blue7b68ee
medium spring green00fa9a
medium turquoise48d1cc
medium violet redc71585
midnight blue191970
mint creamf5fffa
misty rose1ffe4e1
misty rose2eed5d2
misty rose3cdb7b5
misty rose48b7d7b
moccasinffe4b5
navajo white1ffdead
navajo white2eecfa1
navajo white3cdb38b
navajo white48b795e
navy blue000080
old lacefdf5e6
olive808000
olive drab6b8e23
olive drab1c0ff3e
olive drab2b3ee3a
olive drab39acd32
olive drab4698b22
orange red1ff4500
orange red2ee4000
orange red3cd3700
orange red48b2500
orange1ffa500
orange2ee9a00
orange3cd8500
orange48b5a00
orchidda70d6
orchid1ff83fa
orchid2ee7ae9
orchid3cd69c9
orchid48b4789
pale goldenrodeee8aa
pale green98fb98
pale green19aff9a
pale green37ccd7c
pale green4548b54
pale turquoiseafeeee
pale turquoise1bbffff
pale turquoise2aeeeee
pale turquoise396cdcd
pale turquoise4668b8b
pale violet reddb7093
pale violet red1ff82ab
pale violet red2ee799f
pale violet red3cd6889
pale violet red48b475d
papaya whipffefd5
peach puff1ffdab9
peach puff2eecbad
peach puff3cdaf95
peach puff48b7756
pinkffc0cb
pink1ffb5c5
pink2eea9b8
pink3cd919e
pink48b636c
plumdda0dd
plum1ffbbff
plum2eeaeee
plum3cd96cd
plum48b668b
powder blueb0e0e6
purplea020f0
purple800080
purple19b30ff
purple2912cee
purple37d26cd
purple4551a8b
red1ff0000
red2ee0000
red3ef0000
red3cd0000
red48b0000
rosey brownbc8f8f
rosey brown1ffc1c1
rosey brown2eeb4b4
rosey brown3cd9b9b
rosey brown48b6969
royal blue4169e1
royal blue14876ff
royal blue2436eee
royal blue33a5fcd
royal blue427408b
salmonfa8072
salmon1ff8c69
salmon2ee8262
salmon3cd7054
salmon48b4c39
sandy brownf4a460
sea green154ff9f
sea green24eee94
sea green343cd80
sea green42e8b57
seashell1fff5ee
seashell2eee5de
seashell3cdc5bf
seashell48b8682
siennaa0522d
sienna1ff8247
sienna2ee7942
sienna3cd6839
sienna48b4726
silverc0c0c0
sky blue87ceeb
sky blue187ceff
sky blue27ec0ee
sky blue36ca6cd
sky blue44a708b
slate blue6a5acd
slate blue1836fff
slate blue27a67ee
slate blue36959cd
slate blue4473c8b
slate gray1c6e2ff
slate gray2b9d3ee
slate gray39fb6cd
slate gray46c7b8b
slate grey708090
snow1fffafa
snow2eee9e9
snow3cdc9c9
snow48b8989
spring green100ff7f
spring green200ee76
spring green300cd66
spring green4008b45
steel blue4682b4
steel blue163b8ff
steel blue25cacee
steel blue34f94cd
steel blue436648b
tand2b48c
tan1ffa54f
tan2ee9a49
tan3cd853f
tan48b5a2b
teal008080
thistled8bfd8
thistle1ffe1ff
thistle2eed2ee
thistle3cdb5cd
thistle48b7b8b
tomato1ff6347
tomato2ee5c42
tomato3cd4f39
tomato48b3626
turquoise40e0d0
turquoise100f5ff
turquoise200e5ee
turquoise300c5cd
turquoise400868b
violetee82ee
violet redd02090
violet red1ff3e96
violet red2ee3a8c
violet red3cd3278
violet red48b2252
wheatf5deb3
wheat1ffe7ba
wheat2eed8ae
wheat3cdba96
wheat48b7e66
whiteffffff
white smokef5f5f5
yellow1ffff00
yellow2eeee00
yellow3cdcd00
yellow48b8b00
ColourHex CodeIntensity
black0000000
navy blue00008014.08
dark blue00008b15.29
blue50000cd22.55
blue20000ee26.18
gray111c1c1c28
blue10000ff28.05
midnight blue19197034.57
indigo4b008236.8
maroon80000038.4
red48b000041.7
purple80008052.48
gray2136363654
purple4551a8b56.13
deep pink48b0a5056.4
dark magenta8b008b56.99
dark green00640059
firebrick48b1a1a59.9
red3cd000061.5
orange red48b250063.53
royal blue427408b64.75
dodger blue4104e8b66.11
brown48b232366.2
dark orchid468228b66.55
dark violet9400d367.61
maroon48b1c6269
dark slate gray2f4f4f69.4
violet red48b225270.78
red2ee000071.4
red3ef000071.7
slate blue4473c8b71.99
dark slate blue483d8b72.88
green00800075.52
red1ff000076.5
deep sky blue400688b76.65
firebrickb2222277.2
tomato48b362677.74
browna52a2a78.9
gray314f4f4f79
green4008b0082.01
indian red48b3a3a82.3
dark orange48b450082.41
purple37d26cd82.47
coral48b3e2f83.45
deep pink3cd107683.92
magenta3cd00cd84.05
medium orchid47a378b84.34
crimsondc143c84.4
chocolate48b451384.5
medium purple45d478b85.08
hot pink48b3a6286.7
medium violet redc7158586.72
sienna48b472687.77
firebrick3cd262688.1
spring green4008b4589.6
teal00808089.6
steel blue436648b90.49
blue violet8a2be291.63
maroonb0306091.68
salmon48b4c3992.81
purplea020f093.28
dark olive green556b2f93.8
pale violet red48b475d93.82
orange red3cd370093.95
turquoise400868b94.35
orange48b5a0094.8
purple2912cee95.64
forest green228b2295.95
royal blue33a5fcd96
deep pink2ee128997.09
violet redd0209097.12
brown3cd333397.2
cyan4008b8b97.3
magenta2ee00ee97.58
dark orchid9932cc97.84
dodger blue31874cd98.19
dark orchid39a32cd98.25
orchid48b478998.66
tan48b5a2b99.53
light salmon48b5742100.29
siennaa0522d101.33
maroon3cd2990101.53
firebrick2ee2c2c102.2
chartreuse4458b00102.71
purple19b30ff102.87
sky blue44a708b103.57
violet red3cd3278104.2
deep pink1ff1493104.47
magenta1ff00ff104.55
gray41696969105
sea green42e8b57105.38
goldenrod48b6914105.85
royal blue4169e1106.2
slate blue36959cd106.56
slate blue6a5acd107.45
light pink48b5f65108.86
orange red2ee4000109.16
firebrick1ff3030110.1
gold48b7500110.73
royal blue2436eee111.18
pink48b636c111.99
brown2ee3b3b112.7
deep sky blue3009acd113.41
dodger blue21c86ee113.64
dark orchid2b23aee113.8
olive808000113.92
tomato3cd4f39114.38
rosey brown48b6969115.2
aquamarine4458b74115.47
pale green4548b54116.45
light sky blue4607b8b116.66
plum48b668b117.17
orange red1ff4500117.21
olive drab4698b22117.25
steel blue4682b4117.5
maroon2ee30a7118.09
burlywood48b7355118.9
cadet blue453868b119.25
royal blue14876ff119.27
olive drab6b8e23119.73
slate gray46c7b8b120.26
light steel blue46e7b8b120.86
green300cd00120.95
indian red3cd5555121
violet red2ee3a8c121.02
brown1ff4040121.3
peach puff48b7756121.37
dark orange3cd6600121.68
dark olive green46e8b3d121.72
dark slate gray4528b8b121.9
dark orchid1bf3eff121.93
dodger blue11e90ff122.01
coral3cd5b45122.78
navajo white48b795e123.43
slate blue27a67ee123.55
yellow48b8b00123.71
light blue468838b123.78
medium slate blue7b68ee124.44
chocolate3cd661d124.87
medium orchid3b452cd124.93
slate grey708090124.96
medium purple38968cd125.01
dark sea green4698b69125.06
indian redcd5c5c125.9
light goldenrod48b814c126.17
maroon1ff34b3126.87
bisque48b7d6b127.22
wheat48b7e66127.26
pale turquoise4668b8b127.9
gray808080128
chocolated2691e128.25
misty rose48b7d7b128.98
sienna3cd6839129.13
medium orchidba55d3129.16
khaki48b864e129.34
thistle48b7b8b129.56
violet red1ff3e96129.58
gray51828282130
deep sky blue200b2ee131.2
spring green300cd66132.17
antique white48b8378132.19
light slate grey778899132.77
slate blue1836fff132.84
tomato2ee5c42132.94
light sea green20b2aa133.32
steel blue34f94cd133.57
lavender blush48b8386133.73
light slate blue8470ff133.73
light cyan47a8b8b133.9
hot pink3cd6090133.98
medium purple9370db134.27
lemon chiffon48b8970134.85
seashell48b8682135.06
cornsilk48b8878135.14
dark goldenrodb8860b135.47
honeydew4838b83135.72
medium sea green3cb371136.04
azure4838b8b136.6
salmon3cd7054136.82
light yellow48b8b7a137.13
snow48b8989137.6
pale violet red3cd6889137.93
ivory48b8b83138.12
turquoise300c5cd138.78
cadet blue5f9ea0139.32
orange3cd8500139.97
green200ee00140.42
indian red2ee6363140.7
deep sky blue100bfff140.74
dark orange2ee7600141.02
lime green32cd32141.45
tomato1ff6347142.72
coral2ee6a50142.74
cyan300cdcd143.5
cornflower blue6495ed143.98
dark turquoise00ced1144.53
chocolate2ee7621144.65
medium orchid2d15fee144.93
medium purple29f79ee145.27
orchid3cd69c9145.56
tan3cd853f146.9
pale violet reddb7093147.95
light salmon3cd8162148.39
sienna2ee7942150.05
green100ff00150.45
indian red1ff6a6a150.7
dark goldenrod3cd950c150.73
dark orange1ff7f00151.43
chartreuse366cd00151.55
hot pink2ee6aa7152.31
sky blue36ca6cd152.89
coral1ff7256153.22
spring green200ee76153.4
orchidda70d6155.02
sea green343cd80155.13
steel blue25cacee155.26
chocolate1ff7f24155.39
medium orchid1e066ff155.43
gray619c9c9c156
medium purple1ab82ff156.05
goldenrod3cd9b1d156.14
rosey brownbc8f8f156.5
hot pinkff69b4158.25
salmon2ee8262158.88
dark orangeff8c00159.1
coralff7f50160.23
pale violet red2ee799f160.28
light pink3cd8c95160.49
sienna1ff8247161.01
hot pink1ff6eb4161.2
turquoise200e5ee161.29
light coralf08080161.6
orange2ee9a00162.26
salmonfa8072163.06
gold3cdad00163.57
spring green100ff7f164.42
pink3cd919e164.43
medium spring green00fa9a164.44
goldenroddaa520166.27
steel blue163b8ff166.31
cyan200eeee166.6
medium turquoise48d1cc167.35
dark graya9a9a9169
orchid2ee7ae9169.01
dark sea green8fbc8f169.55
rosey brown3cd9b9b170
aquamarine366cdaa170.25
tan2ee9a49170.29
salmon1ff8c69170.65
pale green37ccd7c171.79
dark salmone9967a171.82
light salmon2ee9572171.85
pale violet red1ff82ab172.01
light sky blue38db6cd172.23
plum3cd96cd172.55
turquoise100f5ff172.6
olive drab39acd32172.65
orange1ffa500173.85
turquoise40e0d0174.24
violetee82ee174.28
dark goldenrod2eead0e175.01
cadet blue37ac5cd175.38
burlywood3cdaa7d175.55
chartreuse276ee00175.82
dark khakibdb76b176.44
sky blue27ec0ee177.26
slate gray39fb6cd177.63
light steel blue3a2b5cd177.94
cyan100ffff178.5
dark olive green3a2cd5a179.45
dark slate gray379cdcd179.8
sea green24eee94180.1
sandy brownf4a460180.52
gray71b5b5b5181
peach puff3cdaf95181.14
orchid1ff83fa181.29
goldenrod2eeb422181.34
light blue39ac0cd182.03
navajo white3cdb38b182.4
yellow3cdcd00182.45
tan1ffa54f182.54
light salmon1ffa07a184.32
dark sea green39bcd9b184.5
tand2b48c184.6
plumdda0dd185.01
lawn green7cfc00185.88
light goldenrod3cdbe70185.92
light pink2eea2ad186.01
bisque3cdb79e186.85
dark goldenrod1ffb90f187.3
wheat3cdba96187.74
sky blue87ceeb187.89
pale turquoise396cdcd188.5
chartreuse17fff00188.55
misty rose3cdb7b5189.38
light sky blue87cefa189.54
gold2eec900189.99
greybebebe190
burlywooddeb887190.01
sky blue187ceff190.09
thistle3cdb5cd190.84
khaki3cdc673190.97
pink2eea9b8191.35
silverc0c0c0192
light steel blueb0c4de192.86
sea green154ff9f193.14
antique white3cdc0b0194.14
goldenrod1ffc125194.44
lavender blush3cdc1c5197.04
rosey brown2eeb4b4197.4
light cyan3b4cdcd197.5
aquamarine276eec6197.6
lemon chiffon3cdc9a5198.24
seashell3cdc5bf198.74
cornsilk3cdc8b1198.97
light green90ee90199.46
light pink1ffaeb9199.51
light sky blue2a4d3ee199.87
honeydew3c1cdc1200.08
plum2eeaeee200.24
olive drab2b3ee3a200.5
thistled8bfd8201.25
azure3c1cdcd201.4
snow3cdc9c9202.2
light yellow3cdcdb4202.25
gold1ffd700203.35
burlywood2eec591203.58
ivory3cdcdc1203.68
cadet blue28ee5ee203.89
light blueadd8e6204.64
pink1ffb5c5204.96
mauveffb6c1205.11
slate gray2b9d3ee206.17
light steel blue2bcd2ee206.48
gray81cfcfcf207
green yellowadff2f207.52
dark olive green2bcee68208.26
dark slate gray28deeee208.9
peach puff2eecbad210.2
powder blueb0e0e6210.26
pale green98fb98210.41
light greyd3d3d3211
light blue2b2dfee211.15
navajo white2eecfa1211.24
rosey brown1ffc1c1211.6
yellow2eeee00211.82
aquamarine17fffd4211.87
pinkffc0cb212.11
pale green19aff9a213.59
light sky blue1b0e2ff214.19
dark sea green2b4eeb4214.22
olive drab1c0ff3e214.87
plum1ffbbff214.88
light goldenrod2eedc82215.5
light goldenrodeedd82216.09
bisque2eed5b7217.2
wheat2eed8ae217.98
burlywood1ffd39b218.04
cadet blue198f5ff218.2
pale turquoise2aeeeee218.8
pale turquoiseafeeee219.1
gainsborodcdcdc220
misty rose2eed5d2220.17
slate gray1c6e2ff220.79
light steel blue1cae1ff221.4
thistle2eed2ee221.48
khaki2eee685221.73
khakif0e68c223.1
dark olive green1caff70223.37
dark slate gray197ffff223.8
wheatf5deb3224.17
antique white2eedfcc225.41
peach puff1ffdab9225.47
light blue1bfefff226.36
navajo white1ffdead226.51
yellow1ffff00226.95
pale goldenrodeee8aa226.98
lavender blush2eee0e5228.75
light cyan2d1eeee229.3
dark sea green1c1ffc1229.58
lemon chiffon2eee9bf229.88
cornsilk2eee8cd230.83
moccasinffe4b5230.93
seashell2eee5de230.93
light goldenrod1ffec8b231.03
gray91e8e8e8232
lavendere6e6fa232.2
honeydew2e0eee0232.26
bisque1ffe4c4232.58
wheat1ffe7ba233.25
azure2e0eeee233.8
snow2eee9e9234.5
pale turquoise1bbffff234.6
light yellow2eeeed1234.81
misty rose1ffe4e1235.77
ivory2eeeee0236.46
antique whitefaebd7237.3
thistle1ffe1ff237.3
khaki1fff68f237.37
blanched almondffebcd237.7
papaya whipffefd5240.94
antique white1ffefdb241.6
linenfaf0e6241.9
beigef5f5dc242.25
white smokef5f5f5245
lavender blush1fff0f5245.05
light goldenrod yellowfafad2245.6
light cyan1e0ffff245.7
old lacefdf5e6245.75
alice bluef0f8ff246.37
lemon chiffon1fffacd246.55
cornsilk1fff8dc247.02
seashell1fff5ee247.23
ghost whitef8f8ff248.77
honeydew1f0fff0248.85
floral whitefffaf0250.4
azure1f0ffff250.5
mint creamf5fffa251.45
snow1fffafa251.5
light yellow1ffffe0251.59
ivory1fffff0253.35
whiteffffff255