WELCOME TO MY TUTORIAL

UPDATES

RULES:

++  If you want help go ask other layout makers. don't do stuff you don't know how to do.
++ Don't accept style sheets (layout codes) from people.. I honestly don't care if they're your friends... get the layout codes from tutorials. 
++  Be creative with your stuff. If you want to make nice layouts... change everything on the code and rearrange stuff to find your own style and be original. Don't use the style provided for you over and over.
++ Do not... take the codes from my examples provided. they are called examples for a reason. they belong to me. only take the codes that you see in the scroll boxes... understand?

note: try not to overlook this part.

wondering how to make a layout? well you've come to the right place. many people would like to learn how to make layouts... and it's not that hard to learn only if you put dedication to it. READ ALL OF THIS... if you want to understand the art of layout making. .

note: instead of ASKING me questions... read this tutorial. i swear... ppl don't read anymore... it would save you the trouble of asking me and saving me time.i mention alot of things on here but if i didnt mention some things you wanted to know... then ask someone else dont just ignore this post and ask me things that are probably on here. READ! it wont kill you ;]

1st entry-->> simple basics
2nd entry-->> screenshots
3rd entry-->> style sheets
4th entry-->> hex color codes

Basics

^^ that will tell you where to get ur materials you need to being your layout making. ^_^ the three MOST important things needed to make a layout are the following::: style sheet, background and/or banner image, and color hex  codes.
oh sure... the style sheet looks like gibberish... but use your brain.. hello! there are words in the code that hints what it edits... like blogbody is the entries...  table left means left modules.... etc. or just experiment with it and you'll get the hang of it.
just use the color hex codes to change colors and to match your background image. you NEED to MATCH the wallpaper you're using [if not using one... just worry about the hex codes and style sheet and ur fine] or else your layout wil turn out... bad... sorry to say... @_@;; make sure its a nice big wallpaper... if its too small.. put it as a banner by using this code-->   <img src="IMAGE URL HERE">

note:: put that banner code at the top of ur layout code.... x]

keywords you need to remember when making a layout is balance and focus. no need to rush. just focus on making it look cool... lol. and balance out the design... you dont want half of the layout all bulky and red and the other half all dotted and swirly or whatever... the style has to stay the same unless you know what youre doing and its YOUR design then fine. and the colors have to be  at least 4 or 6 maximum depending how  colorful ur background image is.

XxoO-------------------- TIPS---------------------OoxX

--->> to enhance your layouts... use glitter [ex. click], add playlists[just add a playlist code at the end of ur layout code], or falling objects [ex. click].

--->> NEVER DIRECT LINK YOUR IMAGES!!! it works for just a while and then the image wont show anymore sometimes... so image host it. but be careful about bandwidth... if the bandwidth exceeds... wait a while and host the image again.

       imageshack [i like to use this one.. but its limit is 1024 KB for any kind of file]

      tinypic [only hosts small file pictures.]

      imagecave [great for hosting jpg./bmp. wallpapers over than 1024 KB]

      photobucket  (need to have a account/nearly smilar to tinypic)

-- HOW TO:: imagehost.

- save the picture you want in ur picture documents.
- go to an imagehosting site. click browse... and then a window pops up showing one of ur file folders... go to ur picture documents and double click the picture you want. then click "host" or "submit"
- wait a few seconds/minutes... the picture will host longer if its a really big file so you have to have patience. and then it brings you to a page full of URLs. for photobucket. tinypic and imagecave... it just gives you the obvious URL so dont worry about it. in imageshack... use the "direct link to image" URL.  thats it... easy right?
- dont steal other ppl's image hosted images... save it and host it on ur own. not only are you wasting THEIR bandwidth.. its also jocking [stealing].

--->> what makes a good layout is good wallpapers. go to anime wallpapers or anime cubed to get nice ones. or just search on google or yahoo. if you're looking for regular abstract images go to nuthinbutnet.

note:: colored layouts work the same way except at some points.. without the background part. plus you dont need Paint Shop Pro or any fancy programs to make layouts.... all you need are the three things i mentioned earlier. i dont have PSP and yet... my layouts look fine. PSP or Photoshop enhance your layouts and can use them to make SKINS or DIV layer layouts. I don't make those so don't ask me.

Xxo0----------------------- GLITTER TUTORIAL -------------------------0oxX

XxoO------------------------- STARTING THE SITE-------------------------OoxX

--->> register and start ur layout site like any other xanga.
--->> then set it up... install a layout in it... few codes... etc.
--->> ok plan out ur entries.. [max entries is 5] like updates, rules, layouts, etc.
--->> when making a layout and you want to put it up... register for a new xanga for ur layout. when you do... post up the layout you made in your Look and Feel and paste the code in an entry.
--->> to link ur layout in ur entry... type a phrase or make up a symbol [i.e. "@#$" or "click"] and highlight it. click the link button in ur weblog xTools and type the web address of ur layout... click ok... and ur set.
  ex: >>click<< that's what i'm talking about.
--->> everything is self-explanatory from there. if you need help with anything... ask other skilled layout makers like myself... .

and also.. this is a tutorial for layouts.... not anything else. nope.. this aint a tutorial for link buttons, banners, skins, blahblahblah no... LAYOUTS and thats it.

XxoO-------------------------OTHER SITES-----------------------OoxX

anime_layouts_4_u_tutorial [very nice tutorial]

floraz_tutorial

guide to become a layout maker [pretty detailed i must say...]

anime_tutorial_4_you

note: if i don't have something on here... look at those sites. i'm not the only tutorial provider so check those out to see if they have something i don't.

SCREENSHOTS

follow these screenshots... it makes layout making a little easier to understand.

to know how you put layouts on your xanga site... click here.

o0ox---- STYLE SHEETS ----xo0o

note: do NOT ask for any more style sheets. these are all I'm going to provide. although I have 5 different styles of layouts I have on my layout site... the 5th one is a special one that I decided for only me to use. sorry.

REGULAR LAYOUT STYLE SHEET [great for beginners]

here's an example of how the layout style looks like. >>click<<

<font face="YOUR FONT HERE" color="000000" size="7">YOUR TEXT HERE</font> <style type="text/css"> /*PUT THE NAME OF YOUR SITE HERE SO IT SHOWS YOU MADE IT*/ body { background-color: white; background-image: url("YOUR IMAGE URL HERE"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; scrollbar-arrow-color: YOUR COLOR HERE; scrollbar-track-color: YOUR COLOR HERE; scrollbar-shadow-color: YOUR COLOR HERE; scrollbar-face-color: YOUR COLOR HERE; scrollbar-highlight-color: YOUR COLOR HERE; scrollbar-darkshadow-color: YOUR COLOR HERE; scrollbar-3dlight-color: YOUR COLOR HERE; } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* THIS EDITS THE MAIN TEXT OF YOUR XANGA */ font:normal 12px tahoma; line-height:18px; color:000000; letter-spacing:0px; text-align:justify; } table.footer TD { /* THIS MAKES THE FOOTER AT THE BOTTOM CENTERED */ /* LEAVE IT ALONE UNLESS YOU KNOW WHAT TO DO*/ text-align: center; } div.blogheader, .caption { /* THIS EDITS THE FONT AND COLOR OF THE DATES*/ font-family:tahoma; text-transform:lowercase; font-size:12px; line-height:20px; filter: alpha (opacity=100, finishopacity=0, style=2); height: 1px; background-color: YOUR COLOR HERE; color:000000; letter-spacing:0px; text-align: center; } a:link, .footernav.link, a.footernav:link, a.footernav:active { /* THIS EDITS ALL LINKS */ color:000000; text-decoration: none; font: normal 12px tahoma } a:visited, a.footernav:visited, { /* THIS EDITS LINKS THAT THE USER HAS VISITED */ color: YOUR COLOR HERE; text-decoration: none; font: normal 12px tahoma } a:hover { /* THIS EDITS LINKS WHEN YOU PUT YOU MOUSE OVER THEM */ /* ALSO KNOWN AS A HOVER */ color: YOUR COLOR HERE; text-decoration: none; font:normal 12px tahoma; } input, select, textarea, .textfield, .button { /* THIS EDITS THE BUTTONS DROPDOWNS, ETC. */ font:normal 12px tahoma; background-color: white; letter-spacing:0px; color: black; } table.left { /* THIS EDITS THE MENU MODULE */ width:160px; border: 1px solid black; } table.blogbody { /* THIS EDITS THE PLACE WHERE THE BLOG IS*/ background-color: white; filter:alpha (opacity=70, finishopacity=70, style=1); width:400px; font:normal 12px tahoma; line-height:18px; color: black; border: 1px solid black; } table.left th { /* ON YOUR MENU MODULE THIS EDITS THE TITLE PART OF IT*/ /* LIKE BLOGRINGS, SUBSCRIPTIONS, ETC. */ background-image: none; background-color: YOUR COLOR HERE; filter:alpha (opacity=70, finishopacity=70, style=1); font: normal 12px tahoma; text-transform: lowercase; color: 000000; } table.left TD { /* ON YOUR MENU MODULE, THIS EDITS THE BODY OF IT */ background-image: none; background-color: white; filter:alpha (opacity=70, finishopacity=70, style=1); border: none; font:normal 12px tahoma; line-height:18px; color: black; } table.search TD, table.search, table.announcements { /* THIS CHANGES THE BORDER OF THE SEARCH BAR*/ background-color: white; filter:alpha (opacity=70, finishopacity=70, style=1); border: 1px solid black; } table.search TD, table.announcements TH { /* THIS SHOULD BE LEFT ALONE */ /* UNLESS YOU KNOW WHAT TO DO */ border: 1px solid black; } table.navigation, table.main, table.footer { /* THIS EDITS THE WIDTH OF YOUR BLOG MODULES*/ width: 750px; } hr { /* THIS IS THE COLOR OF A HORIZONTAL DIVIDER */ border: 1px solid black; } </style> <BODY style="border-bottom: YOUR COLOR HERE 20t solid; border-top: YOUR COLOR HERE 20t solid; border-left: YOUR COLOR HERE 20t solid; border-right: YOUR COLOR HERE 20t solid"></TBODY> <!-- Blink Boxes : Provided by Blogring.net --> <script language=JavaScript> <!-- //blink boxes - xanga.com/add_ons //by sean f http://www.xanga.com/seanmeister //fixed to work with new security measures by //hotaru_01 http://www.xanga.com/hotaru_01 // YOU CAN CHANGE THE COLORS OF YOUR BLINK BOXES BELOW WHERE THE ( ) ARE // SEPERATE THE COLORS WITH COMMAS, IN QUOTES var blinkColors = new Array("YOUR COLOR HERE","YOUR COLOR HERE","YOUR COLOR HERE", "YOUR COLOR HERE"); // the border color var blinkBorderColor = "black" // the border width, in pixels var blinkBorderWidth = 1; // the # of rows var blinkRows = 1; // the # of columns var blinkCols = 40; // the width of the entire box, in pixels or % var blinkWidth = 625; // the height of each row, in pixels var blinkRowHeight = 10; // speed of blinking, in milliseconds var blinkRate = 8; // DO NOT EDIT BELOW THIS LINE st=setTimeout; document.write("<table id='blinkbox' width='" + blinkWidth +"' border = 0 cellspacing='" + blinkBorderWidth + "' cellpadding=0 bgcolor='" + blinkBorderColor +"'>"); for (r = 0; r < blinkRows; r++){ document.write("<TR>"); for (c = 0; c < blinkCols; c++){ document.write("<TD height='" + blinkRowHeight + "'></TD>"); } document.write("</TR>"); } document.write("</table>"); // ... and this makes it blink function blinkIt() { changecell = Math.floor(Math.random() * (blinkCols * blinkRows)); changecolor = Math.floor(Math.random() * blinkColors.length); bb = document.getElementById("blinkbox"); bbtd = bb.getElementsByTagName("td"); bbtd[changecell].style.backgroundColor = blinkColors[changecolor]; st('blinkIt()', blinkRate); } blinkIt(); //--> </SCRIPT> <a href="http://xanga.com/" target="_blank">YOUR SITE HERE</a> <!-- End Script by Blogring.net -->

BOX AROUND STYLE SHEET [similar to regular]

here's an example of how the layout style looks like. >>click<<

<div style="border: 1px solid #YOUR COLOR HERE; width:500px; background-color:#YOUR COLOR HERE; filter: alpha(style=0,opacity=70);"> <style type="text/css"> /*LAYOUT CREDIT HERE*/ body { background-image: ("IMAGE URL HERE"); background-repeat:no-repeat; background-position: center; background-attachment: fixed; background-color: #YOUR COLOR HERE; scrollbar-arrow-color: #YOUR COLOR HERE; scrollbar-shadow-color: #YOUR COLOR HERE; scrollbar-face-color: #YOUR COLOR HERE; scrollbar-highlight-color: #YOUR COLOR HERE; scrollbar-darkshadow-color: #YOUR COLOR HERE; scrollbar-3dlight-color: #YOUR COLOR HERE; } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* edits main text */ font:normal 12px tahoma; line-height:13px; color:#YOUR COLOR HERE; letter-spacing:0px; text-align:justify; } table.footer TD { /* this makes the footer at the bottom centered */ /* leave it alone unless you know what to do*/ text-align: center; } div.blogheader, .caption { /* edits the dates*/ font-family: tahoma; text-transform:lowercase; font-size:12px; line-height:25px; filter: alpha (opacity=100, finishopacity=0, style=2); height: 1px; background-color: #YOUR COLOR HERE; color: YOUR COLOR HERE; letter-spacing:0px; text-align: center; } .blogbody b, .standard b, p b, strong { /* edits bolded text in your entry */ font-weight: bold; color: #YOUR COLOR HERE; } a:link, .footernav.link, a.footernav:link, a.footernav:active, a:visited, a.footernav:visited, { /* edits all links */ color:#YOUR COLOR HERE; font:bold 12px tahoma; line-height:13px; text-decoration: none; } a:hover { /* edits when user mouseovers the links */ color:#YOUR COLOR HERE; font:bold 12px tahoma; line-height:13px; text-decoration: none; } input, select, textarea, iframe.htmleditor, .textfield, .button { /* this edits the buttons, dropdowns, etc. */ border: 1px solid #YOUR COLOR HERE; font:normal 12px tahoma; background-color: #YOUR COLOR HERE; color:#YOUR COLOR HERE; } table.left { /* this edits the menu module */ border: 1px solid #YOUR COLOR HERE; width:160px; background-color: transparent; } table.blogbody { /* this edits the other the place where the blog is */ border: 1px solid #YOUR COLOR HERE; background-color: transparent; width: 100%; } table.left th { /* edits titles of left modules */ background-image: (IMAGE URL HERE); background-color:YOUR COLOR HERE; filter:alpha (opacity=100, finishopacity=0, style=1); font: normal 12px tahoma; text-transform: lowercase; color: YOUR COLOR HERE; text-align: left; } table.left TD { /* on your menu module, this edits the body part of it */ background-color: transparent; border: none; font:normal 12px tahoma; color:#YOUR COLOR HERE; } table.search TD, table.search, table.announcements { /* border of search bar (if you have it) */ background-color: transparent; border: 1px solid #YOUR COLOR HERE; } table.search TD, table.announcements TH { /* this should be left alone */ /* unless you know what to do */ border: 0px solid #ffffff; } table.navigation, table.main, table.footer { /* the width of your blog with modules */ width: 100%; } hr { /* horizontal divider */ border: 1px solid #YOUR COLOR HERE; width:100%; } table.blogbody div.smalltext{ /* this edits the blog entry footer */ text-align:right; padding-bottom:2px; } td.maincenter, {width: 100%; } </style> <a href="http://www.xanga.com/SITE NAME HERE">SITE NAME HERE</a> <!-- End Script by Blogring.net -->

CUSTOM MODULE LAYOUT STYLE SHEET [more complicated than regular]

here's an example of how the layout style looks like. >>click<<

<a href="http://www.xanga.com/SITENAME">PUT YOUR SITE NAME HERE</a> <div style="border: 0px solid #transparent; width:500px; background-color:#transparent; filter: alpha(style=0,opacity=60);"> <!-- Blink Boxes : Provided by Blogring.net --> <script language=JavaScript> <!-- //blink boxes - xanga.com/add_ons //by sean f http://www.xanga.com/seanmeister //fixed to work with new security measures by //hotaru_01 http://www.xanga.com/hotaru_01 // YOU CAN CHANGE THE COLORS OF YOUR BLINK BOXES BELOW WHERE THE ( ) ARE // SEPERATE THE COLORS WITH COMMAS, IN QUOTES var blinkColors = new Array("COLOR HERE","COLOR HERE","COLOR HERE", "COLOR HERE","COLOR HERE"); // the border color var blinkBorderColor = "COLOR HERE" // the border width, in pixels var blinkBorderWidth = 1; // the # of rows var blinkRows = 2; // the # of columns var blinkCols = 2; // the width of the entire box, in pixels or % var blinkWidth = 400; // the height of each row, in pixels var blinkRowHeight = 4; // speed of blinking, in milliseconds var blinkRate = 8; // DO NOT EDIT BELOW THIS LINE st=setTimeout; document.write("<table id='blinkbox' width='" + blinkWidth +"' border = 0 cellspacing='" + blinkBorderWidth + "' cellpadding=0 bgcolor='" + blinkBorderColor +"'>"); for (r = 0; r < blinkRows; r++){ document.write("<TR>"); for (c = 0; c < blinkCols; c++){ document.write("<TD height='" + blinkRowHeight + "'></TD>"); } document.write("</TR>"); } document.write("</table>"); // ... and this makes it blink function blinkIt() { changecell = Math.floor(Math.random() * (blinkCols * blinkRows)); changecolor = Math.floor(Math.random() * blinkColors.length); bb = document.getElementById("blinkbox"); bbtd = bb.getElementsByTagName("td"); bbtd[changecell].style.backgroundColor = blinkColors[changecolor]; st('blinkIt()', blinkRate); } blinkIt(); //--> </SCRIPT> </style></head><body><center><span><table border="0" cellspacing="0" cellpadding="4" width="500" class="blogbody"><tr><td width="5%"></td><td valign="top"><p><div style="height: 150px; width: 358px; overflow: auto;"><img src="YOUR IMAGE URL HERE" align=left>WRITE ANYTHING IN THIS LITTLE SPACE RIGHT HERE AND HAVE FUN WITH IT!<P> <BR><BR> <CENTER><a href=http://xanga.com/signin.aspx>Sign In</a> <font color=black><b> <b>-</b> </b></font> <a href=http://www.xanga.com/private>Your Place</a> <font color=black><b> <b>-</b> </b></font> <a href=http://www.xanga.com/CLAF>LooknFeel</a> <font color=black><b> <b>-</b> </b></font> <a href=http://www.xanga.com/private/Subs.aspx>Buddies</a> <font color=black><b> <b>-</b> </b></font> <a href=http://www.xanga.com/Private/SubscribeTo.aspx?user=YOUR USERNAME HERE>Subscribe</a> <font color=black><b> <b>-</b> </b></font color=black> <a href=http://www.xanga.com/logout.aspx>Log Out</a></center><br><br><br> Layout was made by YOUR SITE NAME HERE</div> </CENTER> <STYLE TYPE="text/css"> table.footer { display:none } </style> <style type="text/css"> /*SITE NAME HERE*/ body { background-image: ( ACKGROUND URL HERE); background-repeat:no-repeat; background-position: top center; background-attachment: fixed; background-color: #COLOR HERE; scrollbar-arrow-color: #COLOR HERE; scrollbar-shadow-color: #COLOR HERE; scrollbar-face-color: #COLOR HERE; scrollbar-highlight-color: #COLOR HERE; scrollbar-darkshadow-color: #COLOR HERE; scrollbar-3dlight-color: #COLOR HERE; } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* edits main text */ font:normal 12px arial; color:#COLOR HERE; line-height:11px; text-align:justify; letter-spacing:0px; ;} /* edits the dates */ div.blogheader, .caption { font-family: Arial; text-transform: none; font-size: 12px; line-height:20px; font-weight: normal; color:#COLOR HERE; letter-spacing:0px; background-color:#COLOR HERE; filter:alpha (opacity=100, finishopacity=0, style=2); text-align:center; padding-top:5px; padding-bottom:8px; border-top: 3px double #000000; border-left: 3px double #000000; border-right: 3px double #000000; border-bottom: 3px double #000000; width: 360px; } .blogbody{ background-color: #COLOR HERE; text-align:justify; border-top: 4px double #COLOR HERE; border-left: 4px double #COLOR HERE; border-right: 4px double #COLOR HERE; border-bottom: 4px double #COLOR HERE; width:360px;} B,strong{ font-family:11px arial; font-size:justify; color:COLOR HERE; ;} text-transform:none; font-weight: strong} STRONG {font-family: arial; color: #COLOR HERE; letter-spacing: 0pt; text-transform: normal; font-weight: bold; letter-spacing: normal; font-size: 11px;} I,EM{ font-family:arial; font-size:justify; color:COLOR HERE; ;} font-weight:normal; text-transform: lowercase} U{ font-family:arial; font-size:justify; color: b7bb9e; border-bottom: 1px solid #COLOR HERE; ;} font-weight: normal; text-transform: lowercase; border; border-bottom: 2px solid #COLOR HERE;} input, select, textarea, iframe.htmleditor, .textfield, .button { /* this edits the buttons, dropdowns, etc. */ font:normal 11px arial; background-color: black; letter-spacing:0px; color: COLOR HERE; border: 1px solid #COLOR HERE; } table.footer TD { /* this makes the footer at the bottom centered */ /* leave it alone unless you know what to do*/ text-align: right; } table.left th { /* on your menu module, this edits the title part of it */ /* like BLOGRINGS, POSTING CALENDAR, etc */ background-image: url(); background-color: #COLOR HERE; color: #COLOR HERE; font: NORMAL 12px arial; text-transform: LOWERCASE; text-align:center; border-top: 1px solid #COLOR HERE; border-left: 1px solid #COLOR HERE; border-right: 1px solid #COLOR HERE; border-bottom: 1px solid #COLOR HERE; width: 180px; ;} table.main {width: 358px} .smalltext {font-size: 10px;} .mainleft {display:none;width:180px;} .leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer, .search, .searchbarborder, .footer, hr, banner, hr, #rblEprops {display: none;} HR {color: #006633;} table.left { /* this edits the menu module */ width:180px; color: COLOR HERE; background-color:#COLOR HERE; border-top: 1px solid #COLOR HERE; border-left: 1px solid #4COLOR HERE; border-right: 1px solid #COLOR HERE; border-bottom: 1px solid #COLOR HERE; } font,td,p,xmp{color:#COLOR HERE; font-face: arial; font-weight:normal; font-size:11px; line-height:15px; text-align:center;} table.blogbody tr td { /* this edits the left margin of blog */ width:0px; padding-left: 0px; } a:link{ line-height: 11px; font-family:arial; font-weight:normal; color:#COLOR HERE; text-decoration: none; font-size:11px; ;} a:active{ font-family: arial; color:#COLOR HERE; text-decoration:underline; font-size:11px; ;} a:visited{ font-family: arial; color:#COLOR HERE; text-decoration:underline; font-size:11px; ;} A:hover { font-family: arial; color:#COLOR HERE; letter-spacing: 0px; text-decoration: none; ;}font-weight:normal; background-color:#transparent; }</style> <STYLE TYPE="text/css"></style> <!-- begin code provided by createblog.com --> <style type=text/css> /* remove regular modules */ texttable.left, td.mainleft, table.left, table.navigation, table.search{display:none} table.blogbody tr td {width:0px; padding: 0px;} /* edit to your liking */ table.module { border: 2px solid #COLOR HERE; width:160px; background-color:COLOR HERE; } table.module th { background-color: #COLOR HERE;font: bold 11px arial; text-transform: lowercase;color: #COLOR HERE; border: none; } table.module td {color: #COLOR HERE; text-align: left; border: none; background-image: none; } <style> <BODY style="border-bottom: #COLOR HERE 15t solid; border-top: #COLOR HERE 15t solid; border-left: #COLOR HERE 15t solid; border-right: #COLOR HERE 15t solid"></TBODY>

note:: take the style sheet codes provided in the code scroll boxes... do NOT take the code from the examples.

xo0o---- COLOR HEX CODES ----xo0o

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