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:
- body allows you to attach a property to every item
in the document, seen in the very first example on this page;
- span is particularly useful, as it allows you to attach arbitrary elements
to a sequence of words or characters without messing up the general meaning of tags --- it's
really rather silly to attach a bold property to an <i>talic tag, for example!
- Modifying h1 and its friends h2..h6
is clearly very useful;
- If you're going to fiddle with the pre tag, then
it's generally wise to ensure that you keep to a monospaced font family.
- Lists made using ol and ul
are easily altered;
- div is powerful when used correctly;
- Don't forget about b, i,
emph, and strong;
- You can do many things with anchors (a).
In particular, look at pseudo-elements
and pseudo-classes.
- You can do wonderful things with TABLE and sub-components
like tr, and td.
- Other useful things to tweak are P, code,
and even img.
- And what about dir,
menu,
dt,
dd,
address,
blockquote,
hr,
form,
dl; and
cite,
var,
tt,
samp,
code,
kb?
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:
- Inline elements: simply elements which can occur in a line
of text, things things like SPAN, I and BOLD.
- 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:
- Normal flow: how inline elements are normally laid out, and how boxes are placed
next to one another.
- 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.
- 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.
- color : #FF8000 or one of the seventeen names, or, say rgb(255,128,0) or rgb(100%,50%,0%)
- font-style : italic | oblique | normal
- font-variant: normal | small-caps
- font-weight : bold | normal | lighter | bolder or one of the nine numeric weights
100 .. 900.
- font-size : 200% (or a length, or larger | smaller, or one of:
xx-large | x-large | large | medium | small | x-small | xx-small)
- font-family : serif | sans-serif | cursive | fantasy |
monospace | Garamond or whatever.
Include something like "Times New Roman" in double quotes.
- 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.
- text-decoration : none | a combination of underline, overline, line-through, blink
- 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.
- 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.
- text-align : left | right | center | justify
- text-indent : 2em a length or a percentage
- line-height : 2em minimum inter-baseline distance, a length or percentage or factor,
e.g. 1.5 times the current value
- word-spacing : normal | a length additional spacing, which may be -ve
- letter-spacing : normal | as for word-spacing.
- 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.
- direction : ltr | rtl can write backwards using rtl; there is no up/down buut..
- 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.
- margin-top : auto | a length or a percentage;
- margin-right : similar to -top
- margin-bottom : and so on ...
- margin-left :
- margin : can specify up to 4 margin properties in one go
- padding-top etc. are similar to margin; there is a global padding which
specifies several properties too.
- border-width : thin | medium | thick | 0.1em or whatever; up to 4 instances
may be used to specify top, right, bottom, left properties!
- border-style : none | solid | dotted | dashed | double | groove | ridge | inset | outset
--- up to 4 instances. Another variant is border-top-style, and so on.
- border-color : a colour, up to four instances; or use border-top-color and so on.
- border : specify -width, -colour and -style in one go
- 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.
- height : similar to width and with similar protection: min-height and
max-height.
- overflow : auto | visible | hidden | scroll handles display of children who don't fit!
- 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.
- position : static | relative | absolute | fixed.
- 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.
- 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.
- 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.
- 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.
- visibility : visible | hidden | collapse. Can hide an element but keep it in the
document flow.
Background
- background-attachment : scroll | fixed Does image move when element is scrolled?
- background-color : transparent | a colour
- background-image : none | a URL
- background-position : 10% 20% horizontal first, then vertical. A percentage, length
or one of left | right | center | top | bottom
- background-repeat : no-repeat | repeat | repeat-x | repeat-y
- background : All five of the above at once (in order).
Lists
- list-style-type : none, disc, circle, square, decimal,
decimal-leading-zero, lower-roman, upper-roman, lower-alpha,
upper-alpha, lower-latin, upper-latin;
- list-style-position: outside | inside is label outside or inside the box?!
- list-style-image: none | a URL
- list-style : shorthand for type, position and image all at once.
Tables
- border-collapse : separate | collapse are borders shared with adjacent components?
Here's an interesting
article on how collapsing margins can cause headaches.
- border-spacing : 0.5em 0.2em one or two lengths, if 2 then first is horizontal
- empty-cells : hide | show borders of empty cells
- table-layout : fixed | auto fixed is faster as it works on row 1 'alone'
- caption-side : top | bottom
- width : auto | a length or percentage. The minimum width of a table or cell.
- 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!
- 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).
- 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'
- outline-width : thin | medium | thick Not in IE
- outline-style : none | dotted | dashed | solid | double | groove | ridge |
inset | outset | hidden again not in IE.
- outline-color invert | a colour value. Not in IE.
- outline (combines the above)
Printing
- page-break-before : auto | always | avoid | left | right
- page-break-after : as for page-break-before
- page-break-inside : auto | avoid Opera only.
- widows : integer Opera only.
- 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:
- :link
- :visited
- :hover
- :active
- :focus
- :before
- :first-child
- :lang()
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:
- 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!
- Validate your code (even write XHTML :-)!
- Never link to an empty style sheet.
- Don't use proprietary tags and properties (a la Microsoft/Internet Explorer);
- 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.
- Set the font-family as monospace for pre tags;
- 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.
- If you're colouring a div background, specify a border (even if it's only
none) as otherwise there may be patchy colouring!
- Don't use floats unless you have to. They're tricky.
- Don't apply padding directly to a fixed-width element.
- 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 blue | f0f8ff |
antique white | faebd7 |
antique white1 | ffefdb |
antique white2 | eedfcc |
antique white3 | cdc0b0 |
antique white4 | 8b8378 |
aquamarine1 | 7fffd4 |
aquamarine2 | 76eec6 |
aquamarine3 | 66cdaa |
aquamarine4 | 458b74 |
azure1 | f0ffff |
azure2 | e0eeee |
azure3 | c1cdcd |
azure4 | 838b8b |
beige | f5f5dc |
bisque1 | ffe4c4 |
bisque2 | eed5b7 |
bisque3 | cdb79e |
bisque4 | 8b7d6b |
black | 000000 |
blanched almond | ffebcd |
blue violet | 8a2be2 |
blue1 | 0000ff |
blue2 | 0000ee |
blue5 | 0000cd |
brown | a52a2a |
brown1 | ff4040 |
brown2 | ee3b3b |
brown3 | cd3333 |
brown4 | 8b2323 |
burlywood | deb887 |
burlywood1 | ffd39b |
burlywood2 | eec591 |
burlywood3 | cdaa7d |
burlywood4 | 8b7355 |
cadet blue | 5f9ea0 |
cadet blue1 | 98f5ff |
cadet blue2 | 8ee5ee |
cadet blue3 | 7ac5cd |
cadet blue4 | 53868b |
chartreuse1 | 7fff00 |
chartreuse2 | 76ee00 |
chartreuse3 | 66cd00 |
chartreuse4 | 458b00 |
chocolate | d2691e |
chocolate1 | ff7f24 |
chocolate2 | ee7621 |
chocolate3 | cd661d |
chocolate4 | 8b4513 |
coral | ff7f50 |
coral1 | ff7256 |
coral2 | ee6a50 |
coral3 | cd5b45 |
coral4 | 8b3e2f |
cornflower blue | 6495ed |
cornsilk1 | fff8dc |
cornsilk2 | eee8cd |
cornsilk3 | cdc8b1 |
cornsilk4 | 8b8878 |
crimson | dc143c |
cyan1 | 00ffff |
cyan2 | 00eeee |
cyan3 | 00cdcd |
cyan4 | 008b8b |
dark blue | 00008b |
dark goldenrod | b8860b |
dark goldenrod1 | ffb90f |
dark goldenrod2 | eead0e |
dark goldenrod3 | cd950c |
dark gray | a9a9a9 |
dark green | 006400 |
dark khaki | bdb76b |
dark magenta | 8b008b |
dark olive green | 556b2f |
dark olive green1 | caff70 |
dark olive green2 | bcee68 |
dark olive green3 | a2cd5a |
dark olive green4 | 6e8b3d |
dark orange | ff8c00 |
dark orange1 | ff7f00 |
dark orange2 | ee7600 |
dark orange3 | cd6600 |
dark orange4 | 8b4500 |
dark orchid | 9932cc |
dark orchid1 | bf3eff |
dark orchid2 | b23aee |
dark orchid3 | 9a32cd |
dark orchid4 | 68228b |
dark salmon | e9967a |
dark sea green | 8fbc8f |
dark sea green1 | c1ffc1 |
dark sea green2 | b4eeb4 |
dark sea green3 | 9bcd9b |
dark sea green4 | 698b69 |
dark slate blue | 483d8b |
dark slate gray | 2f4f4f |
dark slate gray1 | 97ffff |
dark slate gray2 | 8deeee |
dark slate gray3 | 79cdcd |
dark slate gray4 | 528b8b |
dark turquoise | 00ced1 |
dark violet | 9400d3 |
deep pink1 | ff1493 |
deep pink2 | ee1289 |
deep pink3 | cd1076 |
deep pink4 | 8b0a50 |
deep sky blue1 | 00bfff |
deep sky blue2 | 00b2ee |
deep sky blue3 | 009acd |
deep sky blue4 | 00688b |
dodger blue1 | 1e90ff |
dodger blue2 | 1c86ee |
dodger blue3 | 1874cd |
dodger blue4 | 104e8b |
firebrick | b22222 |
firebrick1 | ff3030 |
firebrick2 | ee2c2c |
firebrick3 | cd2626 |
firebrick4 | 8b1a1a |
floral white | fffaf0 |
forest green | 228b22 |
gainsboro | dcdcdc |
ghost white | f8f8ff |
gold1 | ffd700 |
gold2 | eec900 |
gold3 | cdad00 |
gold4 | 8b7500 |
goldenrod | daa520 |
goldenrod1 | ffc125 |
goldenrod2 | eeb422 |
goldenrod3 | cd9b1d |
goldenrod4 | 8b6914 |
gray | 808080 |
gray11 | 1c1c1c |
gray21 | 363636 |
gray31 | 4f4f4f |
gray41 | 696969 |
gray51 | 828282 |
gray61 | 9c9c9c |
gray71 | b5b5b5 |
gray81 | cfcfcf |
gray91 | e8e8e8 |
green | 008000 |
green yellow | adff2f |
green1 | 00ff00 |
green2 | 00ee00 |
green3 | 00cd00 |
green4 | 008b00 |
grey | bebebe |
honeydew1 | f0fff0 |
honeydew2 | e0eee0 |
honeydew3 | c1cdc1 |
honeydew4 | 838b83 |
hot pink | ff69b4 |
hot pink1 | ff6eb4 |
hot pink2 | ee6aa7 |
hot pink3 | cd6090 |
hot pink4 | 8b3a62 |
indian red | cd5c5c |
indian red1 | ff6a6a |
indian red2 | ee6363 |
indian red3 | cd5555 |
indian red4 | 8b3a3a |
indigo | 4b0082 |
ivory1 | fffff0 |
ivory2 | eeeee0 |
ivory3 | cdcdc1 |
ivory4 | 8b8b83 |
khaki | f0e68c |
khaki1 | fff68f |
khaki2 | eee685 |
khaki3 | cdc673 |
khaki4 | 8b864e |
lavender | e6e6fa |
lavender blush1 | fff0f5 |
lavender blush2 | eee0e5 |
lavender blush3 | cdc1c5 |
lavender blush4 | 8b8386 |
lawn green | 7cfc00 |
lemon chiffon1 | fffacd |
lemon chiffon2 | eee9bf |
lemon chiffon3 | cdc9a5 |
lemon chiffon4 | 8b8970 |
light blue | add8e6 |
light blue1 | bfefff |
light blue2 | b2dfee |
light blue3 | 9ac0cd |
light blue4 | 68838b |
light coral | f08080 |
light cyan1 | e0ffff |
light cyan2 | d1eeee |
light cyan3 | b4cdcd |
light cyan4 | 7a8b8b |
light goldenrod | eedd82 |
light goldenrod yellow | fafad2 |
light goldenrod1 | ffec8b |
light goldenrod2 | eedc82 |
light goldenrod3 | cdbe70 |
light goldenrod4 | 8b814c |
light green | 90ee90 |
light grey | d3d3d3 |
light pink1 | ffaeb9 |
light pink2 | eea2ad |
light pink3 | cd8c95 |
light pink4 | 8b5f65 |
light salmon1 | ffa07a |
light salmon2 | ee9572 |
light salmon3 | cd8162 |
light salmon4 | 8b5742 |
light sea green | 20b2aa |
light sky blue | 87cefa |
light sky blue1 | b0e2ff |
light sky blue2 | a4d3ee |
light sky blue3 | 8db6cd |
light sky blue4 | 607b8b |
light slate blue | 8470ff |
light slate grey | 778899 |
light steel blue | b0c4de |
light steel blue1 | cae1ff |
light steel blue2 | bcd2ee |
light steel blue3 | a2b5cd |
light steel blue4 | 6e7b8b |
light yellow1 | ffffe0 |
light yellow2 | eeeed1 |
light yellow3 | cdcdb4 |
light yellow4 | 8b8b7a |
lime green | 32cd32 |
linen | faf0e6 |
magenta1 | ff00ff |
magenta2 | ee00ee |
magenta3 | cd00cd |
maroon | 800000 |
maroon | b03060 |
maroon1 | ff34b3 |
maroon2 | ee30a7 |
maroon3 | cd2990 |
maroon4 | 8b1c62 |
mauve | ffb6c1 |
medium orchid | ba55d3 |
medium orchid1 | e066ff |
medium orchid2 | d15fee |
medium orchid3 | b452cd |
medium orchid4 | 7a378b |
medium purple | 9370db |
medium purple1 | ab82ff |
medium purple2 | 9f79ee |
medium purple3 | 8968cd |
medium purple4 | 5d478b |
medium sea green | 3cb371 |
medium slate blue | 7b68ee |
medium spring green | 00fa9a |
medium turquoise | 48d1cc |
medium violet red | c71585 |
midnight blue | 191970 |
mint cream | f5fffa |
misty rose1 | ffe4e1 |
misty rose2 | eed5d2 |
misty rose3 | cdb7b5 |
misty rose4 | 8b7d7b |
moccasin | ffe4b5 |
navajo white1 | ffdead |
navajo white2 | eecfa1 |
navajo white3 | cdb38b |
navajo white4 | 8b795e |
navy blue | 000080 |
old lace | fdf5e6 |
olive | 808000 |
olive drab | 6b8e23 |
olive drab1 | c0ff3e |
olive drab2 | b3ee3a |
olive drab3 | 9acd32 |
olive drab4 | 698b22 |
orange red1 | ff4500 |
orange red2 | ee4000 |
orange red3 | cd3700 |
orange red4 | 8b2500 |
orange1 | ffa500 |
orange2 | ee9a00 |
orange3 | cd8500 |
orange4 | 8b5a00 |
orchid | da70d6 |
orchid1 | ff83fa |
orchid2 | ee7ae9 |
orchid3 | cd69c9 |
orchid4 | 8b4789 |
pale goldenrod | eee8aa |
pale green | 98fb98 |
pale green1 | 9aff9a |
pale green3 | 7ccd7c |
pale green4 | 548b54 |
pale turquoise | afeeee |
pale turquoise1 | bbffff |
pale turquoise2 | aeeeee |
pale turquoise3 | 96cdcd |
pale turquoise4 | 668b8b |
pale violet red | db7093 |
pale violet red1 | ff82ab |
pale violet red2 | ee799f |
pale violet red3 | cd6889 |
pale violet red4 | 8b475d |
papaya whip | ffefd5 |
peach puff1 | ffdab9 |
peach puff2 | eecbad |
peach puff3 | cdaf95 |
peach puff4 | 8b7756 |
pink | ffc0cb |
pink1 | ffb5c5 |
pink2 | eea9b8 |
pink3 | cd919e |
pink4 | 8b636c |
plum | dda0dd |
plum1 | ffbbff |
plum2 | eeaeee |
plum3 | cd96cd |
plum4 | 8b668b |
powder blue | b0e0e6 |
purple | a020f0 |
purple | 800080 |
purple1 | 9b30ff |
purple2 | 912cee |
purple3 | 7d26cd |
purple4 | 551a8b |
red1 | ff0000 |
red2 | ee0000 |
red3 | ef0000 |
red3 | cd0000 |
red4 | 8b0000 |
rosey brown | bc8f8f |
rosey brown1 | ffc1c1 |
rosey brown2 | eeb4b4 |
rosey brown3 | cd9b9b |
rosey brown4 | 8b6969 |
royal blue | 4169e1 |
royal blue1 | 4876ff |
royal blue2 | 436eee |
royal blue3 | 3a5fcd |
royal blue4 | 27408b |
salmon | fa8072 |
salmon1 | ff8c69 |
salmon2 | ee8262 |
salmon3 | cd7054 |
salmon4 | 8b4c39 |
sandy brown | f4a460 |
sea green1 | 54ff9f |
sea green2 | 4eee94 |
sea green3 | 43cd80 |
sea green4 | 2e8b57 |
seashell1 | fff5ee |
seashell2 | eee5de |
seashell3 | cdc5bf |
seashell4 | 8b8682 |
sienna | a0522d |
sienna1 | ff8247 |
sienna2 | ee7942 |
sienna3 | cd6839 |
sienna4 | 8b4726 |
silver | c0c0c0 |
sky blue | 87ceeb |
sky blue1 | 87ceff |
sky blue2 | 7ec0ee |
sky blue3 | 6ca6cd |
sky blue4 | 4a708b |
slate blue | 6a5acd |
slate blue1 | 836fff |
slate blue2 | 7a67ee |
slate blue3 | 6959cd |
slate blue4 | 473c8b |
slate gray1 | c6e2ff |
slate gray2 | b9d3ee |
slate gray3 | 9fb6cd |
slate gray4 | 6c7b8b |
slate grey | 708090 |
snow1 | fffafa |
snow2 | eee9e9 |
snow3 | cdc9c9 |
snow4 | 8b8989 |
spring green1 | 00ff7f |
spring green2 | 00ee76 |
spring green3 | 00cd66 |
spring green4 | 008b45 |
steel blue | 4682b4 |
steel blue1 | 63b8ff |
steel blue2 | 5cacee |
steel blue3 | 4f94cd |
steel blue4 | 36648b |
tan | d2b48c |
tan1 | ffa54f |
tan2 | ee9a49 |
tan3 | cd853f |
tan4 | 8b5a2b |
teal | 008080 |
thistle | d8bfd8 |
thistle1 | ffe1ff |
thistle2 | eed2ee |
thistle3 | cdb5cd |
thistle4 | 8b7b8b |
tomato1 | ff6347 |
tomato2 | ee5c42 |
tomato3 | cd4f39 |
tomato4 | 8b3626 |
turquoise | 40e0d0 |
turquoise1 | 00f5ff |
turquoise2 | 00e5ee |
turquoise3 | 00c5cd |
turquoise4 | 00868b |
violet | ee82ee |
violet red | d02090 |
violet red1 | ff3e96 |
violet red2 | ee3a8c |
violet red3 | cd3278 |
violet red4 | 8b2252 |
wheat | f5deb3 |
wheat1 | ffe7ba |
wheat2 | eed8ae |
wheat3 | cdba96 |
wheat4 | 8b7e66 |
white | ffffff |
white smoke | f5f5f5 |
yellow1 | ffff00 |
yellow2 | eeee00 |
yellow3 | cdcd00 |
yellow4 | 8b8b00 |
|
Colour | Hex Code | Intensity |
black | 000000 | 0 |
navy blue | 000080 | 14.08 |
dark blue | 00008b | 15.29 |
blue5 | 0000cd | 22.55 |
blue2 | 0000ee | 26.18 |
gray11 | 1c1c1c | 28 |
blue1 | 0000ff | 28.05 |
midnight blue | 191970 | 34.57 |
indigo | 4b0082 | 36.8 |
maroon | 800000 | 38.4 |
red4 | 8b0000 | 41.7 |
purple | 800080 | 52.48 |
gray21 | 363636 | 54 |
purple4 | 551a8b | 56.13 |
deep pink4 | 8b0a50 | 56.4 |
dark magenta | 8b008b | 56.99 |
dark green | 006400 | 59 |
firebrick4 | 8b1a1a | 59.9 |
red3 | cd0000 | 61.5 |
orange red4 | 8b2500 | 63.53 |
royal blue4 | 27408b | 64.75 |
dodger blue4 | 104e8b | 66.11 |
brown4 | 8b2323 | 66.2 |
dark orchid4 | 68228b | 66.55 |
dark violet | 9400d3 | 67.61 |
maroon4 | 8b1c62 | 69 |
dark slate gray | 2f4f4f | 69.4 |
violet red4 | 8b2252 | 70.78 |
red2 | ee0000 | 71.4 |
red3 | ef0000 | 71.7 |
slate blue4 | 473c8b | 71.99 |
dark slate blue | 483d8b | 72.88 |
green | 008000 | 75.52 |
red1 | ff0000 | 76.5 |
deep sky blue4 | 00688b | 76.65 |
firebrick | b22222 | 77.2 |
tomato4 | 8b3626 | 77.74 |
brown | a52a2a | 78.9 |
gray31 | 4f4f4f | 79 |
green4 | 008b00 | 82.01 |
indian red4 | 8b3a3a | 82.3 |
dark orange4 | 8b4500 | 82.41 |
purple3 | 7d26cd | 82.47 |
coral4 | 8b3e2f | 83.45 |
deep pink3 | cd1076 | 83.92 |
magenta3 | cd00cd | 84.05 |
medium orchid4 | 7a378b | 84.34 |
crimson | dc143c | 84.4 |
chocolate4 | 8b4513 | 84.5 |
medium purple4 | 5d478b | 85.08 |
hot pink4 | 8b3a62 | 86.7 |
medium violet red | c71585 | 86.72 |
sienna4 | 8b4726 | 87.77 |
firebrick3 | cd2626 | 88.1 |
spring green4 | 008b45 | 89.6 |
teal | 008080 | 89.6 |
steel blue4 | 36648b | 90.49 |
blue violet | 8a2be2 | 91.63 |
maroon | b03060 | 91.68 |
salmon4 | 8b4c39 | 92.81 |
purple | a020f0 | 93.28 |
dark olive green | 556b2f | 93.8 |
pale violet red4 | 8b475d | 93.82 |
orange red3 | cd3700 | 93.95 |
turquoise4 | 00868b | 94.35 |
orange4 | 8b5a00 | 94.8 |
purple2 | 912cee | 95.64 |
forest green | 228b22 | 95.95 |
royal blue3 | 3a5fcd | 96 |
deep pink2 | ee1289 | 97.09 |
violet red | d02090 | 97.12 |
brown3 | cd3333 | 97.2 |
cyan4 | 008b8b | 97.3 |
magenta2 | ee00ee | 97.58 |
dark orchid | 9932cc | 97.84 |
dodger blue3 | 1874cd | 98.19 |
dark orchid3 | 9a32cd | 98.25 |
orchid4 | 8b4789 | 98.66 |
tan4 | 8b5a2b | 99.53 |
light salmon4 | 8b5742 | 100.29 |
sienna | a0522d | 101.33 |
maroon3 | cd2990 | 101.53 |
firebrick2 | ee2c2c | 102.2 |
chartreuse4 | 458b00 | 102.71 |
purple1 | 9b30ff | 102.87 |
sky blue4 | 4a708b | 103.57 |
violet red3 | cd3278 | 104.2 |
deep pink1 | ff1493 | 104.47 |
magenta1 | ff00ff | 104.55 |
gray41 | 696969 | 105 |
sea green4 | 2e8b57 | 105.38 |
goldenrod4 | 8b6914 | 105.85 |
royal blue | 4169e1 | 106.2 |
slate blue3 | 6959cd | 106.56 |
slate blue | 6a5acd | 107.45 |
light pink4 | 8b5f65 | 108.86 |
orange red2 | ee4000 | 109.16 |
firebrick1 | ff3030 | 110.1 |
gold4 | 8b7500 | 110.73 |
royal blue2 | 436eee | 111.18 |
pink4 | 8b636c | 111.99 |
brown2 | ee3b3b | 112.7 |
deep sky blue3 | 009acd | 113.41 |
dodger blue2 | 1c86ee | 113.64 |
dark orchid2 | b23aee | 113.8 |
olive | 808000 | 113.92 |
tomato3 | cd4f39 | 114.38 |
rosey brown4 | 8b6969 | 115.2 |
aquamarine4 | 458b74 | 115.47 |
pale green4 | 548b54 | 116.45 |
light sky blue4 | 607b8b | 116.66 |
plum4 | 8b668b | 117.17 |
orange red1 | ff4500 | 117.21 |
olive drab4 | 698b22 | 117.25 |
steel blue | 4682b4 | 117.5 |
maroon2 | ee30a7 | 118.09 |
burlywood4 | 8b7355 | 118.9 |
cadet blue4 | 53868b | 119.25 |
royal blue1 | 4876ff | 119.27 |
olive drab | 6b8e23 | 119.73 |
slate gray4 | 6c7b8b | 120.26 |
light steel blue4 | 6e7b8b | 120.86 |
green3 | 00cd00 | 120.95 |
indian red3 | cd5555 | 121 |
violet red2 | ee3a8c | 121.02 |
brown1 | ff4040 | 121.3 |
peach puff4 | 8b7756 | 121.37 |
dark orange3 | cd6600 | 121.68 |
dark olive green4 | 6e8b3d | 121.72 |
dark slate gray4 | 528b8b | 121.9 |
dark orchid1 | bf3eff | 121.93 |
dodger blue1 | 1e90ff | 122.01 |
coral3 | cd5b45 | 122.78 |
navajo white4 | 8b795e | 123.43 |
slate blue2 | 7a67ee | 123.55 |
yellow4 | 8b8b00 | 123.71 |
light blue4 | 68838b | 123.78 |
medium slate blue | 7b68ee | 124.44 |
chocolate3 | cd661d | 124.87 |
medium orchid3 | b452cd | 124.93 |
slate grey | 708090 | 124.96 |
medium purple3 | 8968cd | 125.01 |
dark sea green4 | 698b69 | 125.06 |
indian red | cd5c5c | 125.9 |
light goldenrod4 | 8b814c | 126.17 |
maroon1 | ff34b3 | 126.87 |
bisque4 | 8b7d6b | 127.22 |
wheat4 | 8b7e66 | 127.26 |
pale turquoise4 | 668b8b | 127.9 |
gray | 808080 | 128 |
chocolate | d2691e | 128.25 |
misty rose4 | 8b7d7b | 128.98 |
sienna3 | cd6839 | 129.13 |
medium orchid | ba55d3 | 129.16 |
khaki4 | 8b864e | 129.34 |
thistle4 | 8b7b8b | 129.56 |
violet red1 | ff3e96 | 129.58 |
gray51 | 828282 | 130 |
deep sky blue2 | 00b2ee | 131.2 |
spring green3 | 00cd66 | 132.17 |
antique white4 | 8b8378 | 132.19 |
light slate grey | 778899 | 132.77 |
slate blue1 | 836fff | 132.84 |
tomato2 | ee5c42 | 132.94 |
light sea green | 20b2aa | 133.32 |
steel blue3 | 4f94cd | 133.57 |
lavender blush4 | 8b8386 | 133.73 |
light slate blue | 8470ff | 133.73 |
light cyan4 | 7a8b8b | 133.9 |
hot pink3 | cd6090 | 133.98 |
medium purple | 9370db | 134.27 |
lemon chiffon4 | 8b8970 | 134.85 |
seashell4 | 8b8682 | 135.06 |
cornsilk4 | 8b8878 | 135.14 |
dark goldenrod | b8860b | 135.47 |
honeydew4 | 838b83 | 135.72 |
medium sea green | 3cb371 | 136.04 |
azure4 | 838b8b | 136.6 |
salmon3 | cd7054 | 136.82 |
light yellow4 | 8b8b7a | 137.13 |
snow4 | 8b8989 | 137.6 |
pale violet red3 | cd6889 | 137.93 |
ivory4 | 8b8b83 | 138.12 |
turquoise3 | 00c5cd | 138.78 |
cadet blue | 5f9ea0 | 139.32 |
orange3 | cd8500 | 139.97 |
green2 | 00ee00 | 140.42 |
indian red2 | ee6363 | 140.7 |
deep sky blue1 | 00bfff | 140.74 |
dark orange2 | ee7600 | 141.02 |
lime green | 32cd32 | 141.45 |
tomato1 | ff6347 | 142.72 |
coral2 | ee6a50 | 142.74 |
cyan3 | 00cdcd | 143.5 |
cornflower blue | 6495ed | 143.98 |
dark turquoise | 00ced1 | 144.53 |
chocolate2 | ee7621 | 144.65 |
medium orchid2 | d15fee | 144.93 |
medium purple2 | 9f79ee | 145.27 |
orchid3 | cd69c9 | 145.56 |
tan3 | cd853f | 146.9 |
pale violet red | db7093 | 147.95 |
light salmon3 | cd8162 | 148.39 |
sienna2 | ee7942 | 150.05 |
green1 | 00ff00 | 150.45 |
indian red1 | ff6a6a | 150.7 |
dark goldenrod3 | cd950c | 150.73 |
dark orange1 | ff7f00 | 151.43 |
chartreuse3 | 66cd00 | 151.55 |
hot pink2 | ee6aa7 | 152.31 |
sky blue3 | 6ca6cd | 152.89 |
coral1 | ff7256 | 153.22 |
spring green2 | 00ee76 | 153.4 |
orchid | da70d6 | 155.02 |
sea green3 | 43cd80 | 155.13 |
steel blue2 | 5cacee | 155.26 |
chocolate1 | ff7f24 | 155.39 |
medium orchid1 | e066ff | 155.43 |
gray61 | 9c9c9c | 156 |
medium purple1 | ab82ff | 156.05 |
goldenrod3 | cd9b1d | 156.14 |
rosey brown | bc8f8f | 156.5 |
hot pink | ff69b4 | 158.25 |
salmon2 | ee8262 | 158.88 |
dark orange | ff8c00 | 159.1 |
coral | ff7f50 | 160.23 |
pale violet red2 | ee799f | 160.28 |
light pink3 | cd8c95 | 160.49 |
sienna1 | ff8247 | 161.01 |
hot pink1 | ff6eb4 | 161.2 |
turquoise2 | 00e5ee | 161.29 |
light coral | f08080 | 161.6 |
orange2 | ee9a00 | 162.26 |
salmon | fa8072 | 163.06 |
gold3 | cdad00 | 163.57 |
spring green1 | 00ff7f | 164.42 |
pink3 | cd919e | 164.43 |
medium spring green | 00fa9a | 164.44 |
goldenrod | daa520 | 166.27 |
steel blue1 | 63b8ff | 166.31 |
cyan2 | 00eeee | 166.6 |
medium turquoise | 48d1cc | 167.35 |
dark gray | a9a9a9 | 169 |
orchid2 | ee7ae9 | 169.01 |
dark sea green | 8fbc8f | 169.55 |
rosey brown3 | cd9b9b | 170 |
aquamarine3 | 66cdaa | 170.25 |
tan2 | ee9a49 | 170.29 |
salmon1 | ff8c69 | 170.65 |
pale green3 | 7ccd7c | 171.79 |
dark salmon | e9967a | 171.82 |
light salmon2 | ee9572 | 171.85 |
pale violet red1 | ff82ab | 172.01 |
light sky blue3 | 8db6cd | 172.23 |
plum3 | cd96cd | 172.55 |
turquoise1 | 00f5ff | 172.6 |
olive drab3 | 9acd32 | 172.65 |
orange1 | ffa500 | 173.85 |
turquoise | 40e0d0 | 174.24 |
violet | ee82ee | 174.28 |
dark goldenrod2 | eead0e | 175.01 |
cadet blue3 | 7ac5cd | 175.38 |
burlywood3 | cdaa7d | 175.55 |
chartreuse2 | 76ee00 | 175.82 |
dark khaki | bdb76b | 176.44 |
sky blue2 | 7ec0ee | 177.26 |
slate gray3 | 9fb6cd | 177.63 |
light steel blue3 | a2b5cd | 177.94 |
cyan1 | 00ffff | 178.5 |
dark olive green3 | a2cd5a | 179.45 |
dark slate gray3 | 79cdcd | 179.8 |
sea green2 | 4eee94 | 180.1 |
sandy brown | f4a460 | 180.52 |
gray71 | b5b5b5 | 181 |
peach puff3 | cdaf95 | 181.14 |
orchid1 | ff83fa | 181.29 |
goldenrod2 | eeb422 | 181.34 |
light blue3 | 9ac0cd | 182.03 |
navajo white3 | cdb38b | 182.4 |
yellow3 | cdcd00 | 182.45 |
tan1 | ffa54f | 182.54 |
light salmon1 | ffa07a | 184.32 |
dark sea green3 | 9bcd9b | 184.5 |
tan | d2b48c | 184.6 |
plum | dda0dd | 185.01 |
lawn green | 7cfc00 | 185.88 |
light goldenrod3 | cdbe70 | 185.92 |
light pink2 | eea2ad | 186.01 |
bisque3 | cdb79e | 186.85 |
dark goldenrod1 | ffb90f | 187.3 |
wheat3 | cdba96 | 187.74 |
sky blue | 87ceeb | 187.89 |
pale turquoise3 | 96cdcd | 188.5 |
chartreuse1 | 7fff00 | 188.55 |
misty rose3 | cdb7b5 | 189.38 |
light sky blue | 87cefa | 189.54 |
gold2 | eec900 | 189.99 |
grey | bebebe | 190 |
burlywood | deb887 | 190.01 |
sky blue1 | 87ceff | 190.09 |
thistle3 | cdb5cd | 190.84 |
khaki3 | cdc673 | 190.97 |
pink2 | eea9b8 | 191.35 |
silver | c0c0c0 | 192 |
light steel blue | b0c4de | 192.86 |
sea green1 | 54ff9f | 193.14 |
antique white3 | cdc0b0 | 194.14 |
goldenrod1 | ffc125 | 194.44 |
lavender blush3 | cdc1c5 | 197.04 |
rosey brown2 | eeb4b4 | 197.4 |
light cyan3 | b4cdcd | 197.5 |
aquamarine2 | 76eec6 | 197.6 |
lemon chiffon3 | cdc9a5 | 198.24 |
seashell3 | cdc5bf | 198.74 |
cornsilk3 | cdc8b1 | 198.97 |
light green | 90ee90 | 199.46 |
light pink1 | ffaeb9 | 199.51 |
light sky blue2 | a4d3ee | 199.87 |
honeydew3 | c1cdc1 | 200.08 |
plum2 | eeaeee | 200.24 |
olive drab2 | b3ee3a | 200.5 |
thistle | d8bfd8 | 201.25 |
azure3 | c1cdcd | 201.4 |
snow3 | cdc9c9 | 202.2 |
light yellow3 | cdcdb4 | 202.25 |
gold1 | ffd700 | 203.35 |
burlywood2 | eec591 | 203.58 |
ivory3 | cdcdc1 | 203.68 |
cadet blue2 | 8ee5ee | 203.89 |
light blue | add8e6 | 204.64 |
pink1 | ffb5c5 | 204.96 |
mauve | ffb6c1 | 205.11 |
slate gray2 | b9d3ee | 206.17 |
light steel blue2 | bcd2ee | 206.48 |
gray81 | cfcfcf | 207 |
green yellow | adff2f | 207.52 |
dark olive green2 | bcee68 | 208.26 |
dark slate gray2 | 8deeee | 208.9 |
peach puff2 | eecbad | 210.2 |
powder blue | b0e0e6 | 210.26 |
pale green | 98fb98 | 210.41 |
light grey | d3d3d3 | 211 |
light blue2 | b2dfee | 211.15 |
navajo white2 | eecfa1 | 211.24 |
rosey brown1 | ffc1c1 | 211.6 |
yellow2 | eeee00 | 211.82 |
aquamarine1 | 7fffd4 | 211.87 |
pink | ffc0cb | 212.11 |
pale green1 | 9aff9a | 213.59 |
light sky blue1 | b0e2ff | 214.19 |
dark sea green2 | b4eeb4 | 214.22 |
olive drab1 | c0ff3e | 214.87 |
plum1 | ffbbff | 214.88 |
light goldenrod2 | eedc82 | 215.5 |
light goldenrod | eedd82 | 216.09 |
bisque2 | eed5b7 | 217.2 |
wheat2 | eed8ae | 217.98 |
burlywood1 | ffd39b | 218.04 |
cadet blue1 | 98f5ff | 218.2 |
pale turquoise2 | aeeeee | 218.8 |
pale turquoise | afeeee | 219.1 |
gainsboro | dcdcdc | 220 |
misty rose2 | eed5d2 | 220.17 |
slate gray1 | c6e2ff | 220.79 |
light steel blue1 | cae1ff | 221.4 |
thistle2 | eed2ee | 221.48 |
khaki2 | eee685 | 221.73 |
khaki | f0e68c | 223.1 |
dark olive green1 | caff70 | 223.37 |
dark slate gray1 | 97ffff | 223.8 |
wheat | f5deb3 | 224.17 |
antique white2 | eedfcc | 225.41 |
peach puff1 | ffdab9 | 225.47 |
light blue1 | bfefff | 226.36 |
navajo white1 | ffdead | 226.51 |
yellow1 | ffff00 | 226.95 |
pale goldenrod | eee8aa | 226.98 |
lavender blush2 | eee0e5 | 228.75 |
light cyan2 | d1eeee | 229.3 |
dark sea green1 | c1ffc1 | 229.58 |
lemon chiffon2 | eee9bf | 229.88 |
cornsilk2 | eee8cd | 230.83 |
moccasin | ffe4b5 | 230.93 |
seashell2 | eee5de | 230.93 |
light goldenrod1 | ffec8b | 231.03 |
gray91 | e8e8e8 | 232 |
lavender | e6e6fa | 232.2 |
honeydew2 | e0eee0 | 232.26 |
bisque1 | ffe4c4 | 232.58 |
wheat1 | ffe7ba | 233.25 |
azure2 | e0eeee | 233.8 |
snow2 | eee9e9 | 234.5 |
pale turquoise1 | bbffff | 234.6 |
light yellow2 | eeeed1 | 234.81 |
misty rose1 | ffe4e1 | 235.77 |
ivory2 | eeeee0 | 236.46 |
antique white | faebd7 | 237.3 |
thistle1 | ffe1ff | 237.3 |
khaki1 | fff68f | 237.37 |
blanched almond | ffebcd | 237.7 |
papaya whip | ffefd5 | 240.94 |
antique white1 | ffefdb | 241.6 |
linen | faf0e6 | 241.9 |
beige | f5f5dc | 242.25 |
white smoke | f5f5f5 | 245 |
lavender blush1 | fff0f5 | 245.05 |
light goldenrod yellow | fafad2 | 245.6 |
light cyan1 | e0ffff | 245.7 |
old lace | fdf5e6 | 245.75 |
alice blue | f0f8ff | 246.37 |
lemon chiffon1 | fffacd | 246.55 |
cornsilk1 | fff8dc | 247.02 |
seashell1 | fff5ee | 247.23 |
ghost white | f8f8ff | 248.77 |
honeydew1 | f0fff0 | 248.85 |
floral white | fffaf0 | 250.4 |
azure1 | f0ffff | 250.5 |
mint cream | f5fffa | 251.45 |
snow1 | fffafa | 251.5 |
light yellow1 | ffffe0 | 251.59 |
ivory1 | fffff0 | 253.35 |
white | ffffff | 255 |
|