ห้องทดลองโค้ด ♥

ลำดับตอนที่ #2 : โค้ดธีม

Code +
มารับโค้ดธีมและรายละเอียดอื่นๆกันยาวๆเลยจ้า =w="


                                                                                                                              


ก่อนอื่นรับโค้ดไปเต็มๆก่อน [แยกแต่ละส่วนเอาไว้ให้แล้ว]
แนะนำให้เปิด บทความในหน้าแก้ไขตอนย่อย หรือ Word ในเครื่องไปด้วย 
แล้วให้ก็อปโค้ดนี้ ไปวางใส่ในนั้นก่อน จากนั้นก็ลองทำก่อนแล้วก็ลบคำกำกับใน /*....*/ ออกไปก็ได้

จากนั้นเราจะอธิบายแต่ละส่วนต่างๆ+Tipz เล็กๆน้อยๆ ของแต่ละส่วนด้วยด้านล่าง ^^






<style type="text/css">

/*ส่วนเฮด + ส่วนแถบของตอน + ส่วนอักษรคำอธิบาย*/
.head1 { background: #FFF; }
.head2 {   background:  #B4B4B4 ; }
span.desc_head {font-weight: bold;  color: #ffffff; }

/*ส่วนของสกอบาร์*/
BODY {
scrollbar-face-color: #FFF;
scrollbar-shadow-color:  #000;  
scrollbar-highlight-color: #000;
scrollbar-3dlight-color: #fff;
scrollbar-darkshadow-color: #fff;
scrollbar-track-color:  #CCCCCC  ;
scrollbar-arrow-color:  #000; 
}

/*ส่วนของตัวรองพื้นธีมและเส้นขอบ*/
table {background: #F7F7F7;border:none}
td {background: #F7F7F7;
border:0px dotted #FFC6C6;}

/*ส่วนของลิ้งค์*/
A:hover {
color: #fff;
background: #6D6D6D;
border-bottom: 2px solid  #FFF;
border-top: 0px dashed #FFC6C6;}

/*ส่วนของBG [พื้นหลัง]*/
body {background-image: url( Url );
background-repeat:repeat;
background-position: center;
background-attachment:fixed}

/*ส่วนของกรอบรอบบทความ*/
html { BORDER-RIGHT: #6D6D6D 14px Inset ;
BORDER-LEFT: #6D6D6D 14px Outset ;
BORDER-TOP: #6D6D6D  14px   Outset ;  
BORDER-BOTTOM: #6D6D6D 14px Inset   }

</style>


/*ส่วนของตัวอักษรปกติและอักษรลิ้ง*/
<style type="text/css">
td,th,div,body,li,ul,p {color: #000;
font-size:12px;
font-family: sans-serif;
   }
 a:link {text-decoration:none; color: #696969; }
           a:visited {text-decoration:none; color: #B4B4B4; } 
           a:active {text-decoration:none; color: #818181; }
           </style>


/*ส่วนของปุ่มกด*/
<style type="text/css">
INPUT, SELECT, TEXTAREA { background-color: #fff ; color: #000; font-family: tahoma; font-size: 12px; border: dashed 1px #000; padding: 0; }</style>






นับๆแล้วก็จะได้ส่วนต่างๆมา 8 ส่วน 
จะอธิบายให้ แบบว่า เอ่อ ... พยายามให้ละเอียดที่สุดเลยละกันเนอะ ^^" 
อ๊ะ เดี๋ยวจะให้เว็บโค้ดสีที่ใช้ประจำด้านล่างนะ =w=~//



Part [ 1 ] 

/*ส่วนเฮด + ส่วนแถบของตอน + ส่วนอักษรคำอธิบาย*/
.head1 { background: โค้ดสีแถบชื่อบทความ ; }           —[1]
.head2 {   background:  โค้ดสีแถบชื่อตอนบทความ ; }    —[3]
pan.desc_head {font-weight: bold;  color: โค้ดสี แนะนำเรื่องแบบย่อๆ+ข้อมูลเบื้องต้นของเรื่อง ; }   —[2]



.


TipZ :: Part [ 1 ] 

คือ ส่วนของแถบ(สี)รอบชื่อบทความกับแถบสีชื่อตอนเนี่ย สามารถทำให้มีภาพได้(ตัวอย่างในรูปแรก)
วิธีการทำให้แถบทั้งสองนี้มีภาพก็คือ...เพิ่มโค้ดไปตามนี้

.head1 { background-image: url( Urlภาพรองพื้นชื่อบทความ ) ; }
.head2 { background-image: url( Urlภาพรองแถบพื้นชื่อตอน ) ; }

ก็คือก๊อปส่วน .head1กับ .head2 ไปวางทับของเก่า
อ้อ แล้วไม่จำเป็นที่จะต้องใส่ภาพทั้ง2ที่ก็ได้ใส่ที่นึง อีกที่ไม่ใส่ภาพ แต่ใส่เป็นสีธรรมดาก็ได้
หรือจะต่างภาพกันก็ได้อะน่อ อยู่ที่ความสร้างสรรค์เลย ^^




Part [ 2 ] 

/*ส่วนของสกอบาร์*/
BODY {
scrollbar-face-color: โค้ดสี ;
scrollbar-shadow-color:  โค้ดสี ;  
scrollbar-highlight-color: โค้ดสี ;
scrollbar-3dlight-color: โค้ดสี ;
scrollbar-darkshadow-color: โค้ดสี ;
scrollbar-track-color:  โค้ดสี ;
scrollbar-arrow-color:  โค้ดสี ; 
}

ภาพอธิบายแต่ละส่วนของ สกอบาร์

	Scrollbar Arrow Color
	Scrollbar 3DLight Color
	Scrollbar Darkshadow Color
	Scrollbar Face Color
	Scrollbar Highlight Color
	Scrollbar Shadow Color
	Scrollbar Track Color

TipZ :: Part [ 2 ] 

จากโค้ด สังเกตโค้ดสีที่เราใส่นะ (จะเน้นสีให้จะได้เห็นความแตกต่าง)

scrollbar-face-color: #FFF ;
scrollbar-shadow-color:  #000 ;  
scrollbar-highlight-color: #000 ;
scrollbar-3dlight-color: #FFF ;
scrollbar-darkshadow-color: #FFF ;
scrollbar-track-color:  #CCC ;
scrollbar-arrow-color:  #000 ; 

บรรทักแรก #FFF เป็นสีพื้นด้านบนของสกอบาร์ เน้นให้เข้ากับโทนสีของธีม
บรรทัดที่ 2+3 คือ #000 สีส้ม คือส่วนกรอบด้านใน แนะนำให้ใช้สีเดียวกันสำหรับ 2 บรรทัดนี้
บรรทัดที่ 4+5 คือ #FFF สีเขียว คือส่วนกรอบด้านนอก แนะนำให้ใช้สีเดียวกันเช่นกัน สำหรับ 2 บรรทัดนี้
บรรทัดที่ 6 คือ #CCC สีม่วง คือส่วนรองพื้นสกอบาร์ด้านล่าง เน้นสีที่เข้ากับบีจีธีม
บรรทัดที่ 7 คือ #000 สีน้ำเงิน คือลูกศร ถ้าไม่ต้องการให้มีลูกศร ให้ใช้สีเดียวกับบรรทัดแรก ^^




Part [ 3 ] 

/*ส่วนของตัวรองพื้นธีมและเส้นขอบ*/
table {background: #F7F7F7 ;border:none}
td {background: #F7F7F7 ;
border: 0 px dotted #FFC6C6 ;}

อธิบาย +

บรรทัดแรก สีพื้นหลังของตัวรองพื้นบทความ
บรรทัดที่2  สีพื้นหลังเหมือนกันแต่เป็นขอบนอก
บรรทัดที่3 สีแดงเลข 0 คือ ขนาดของเส้นกรอบ ปกติ คือ 1 แต่ถ้า 0 คือไม่มีเส้น ^^
                  สีชมพู คือ รูปแบบเส้น Dotted = เส้นจุด Dashed = เส้นประ  Solid = เส้นตรง
                  สีส้ม คือ สีเส้นขอบนั้นๆ


TipZ :: Part [ 3 ] 

ส่วนนี้แหละคือส่วนที่จะเป็นตัวกำหนด ว่าจะให้ ทึบ ใส หรือ โปร่ง ดังนี้

ทึบ   Ex :: =[ ธีม ]=... โทนสีชมพู & ขาว กระต่ายน้อย ♥

           - ก็ใช้โค้ดปกติ ตามด้านบนเลย ก็จะได้แบบทึบ 
              หากอยากได้พื้นเป็นลายก็ให้ก็อปโค้ดนี้ลงไปทับ2บรรทัดแรกแทนนะ

table {background-image: url (Urlของภาพ) ;border:none}
td {background-image: url (Urlของภาพ)  ;

           - แนะนำ ภาพที่ใช้ควรเป็นสีเรียบๆ หรือมีลายน้อยๆ เพื่อจะได้เห็นตัวอักษรชัดเจน

ใส    Ex ::  =[ ธีม ]=... โทนสีแดงเหลืองเทา ดอกไม้ คลาสสิค ♥

          - ก็จะปรับเปลี่ยนโค้ดส่วนนี้เล็กน้อยโดยการเติมคำว่า none ลงไปแทนโค้ดสี คือ...

table {background: none ;border:none}
td {background: none  ;

          - แนะนำ ควรใช้กับ BG ที่ไม่มีลายมากนัก จะได้เห็นตัวอักษรชัดเจน ^^

โปร่ง   Ex ::  =[ ธีม ]=... โทนสีน้ำตาลดำ กลางเมือง แฟนตาซี ♥
 
           - อันนี้ก็ต้องก็อป4บรรทัดนี้ไปวางทับนะคะดังนี้

table { background-color: #F5F2EF ;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80; border:none   } 
td {background: none;
border: 0 px dotted #003333 ;} 


          - ตัวเลขสีน้ำเงิน สามารถปรับความโปร่งใส่ได้ ยิ่งน้อยยิ่งบาง ยิ่งมากยิ่งทึบ ^^ 
          -  สามารถเพิ่มเติมเส้นขอบหรือเปลี่ยนสีพื้นได้ตามสะดวกนะคะ
          - แนะนำ ควรใช้สีพื้น ที่ทำให้เห็นตัวอักษรชัดๆอ่านง่าย ไม่ควรบางเกินไป ปกติใช้ที่ 80 จะดีกว่านะ




Part [ 4 ] 


/*ส่วนของลิ้งค์*/
A:hover {
color: #FFF ;
background: #6D6D6D ;
border-top: 0 px dashed  #FFC6C6 ;
border-bottom: 2 px solid  #FFFFFF ; }

อธิบาย +

บรรทัดแรก สีตัวอักษรเวลาเอาเมาส์ชี้
บรรทัดที่2  สีพื้นหลังของลิ้ง
บรรทัดที่3  เป็นส่วนของเส้นขอบลิ้งด้านบน 
                   ตัวเลข คือขนาดเส้นกรอบ ถ้าไม่เอาคือใส่ 0 
                   dashed เป็นรูปแบบของเส้นขอบ  และตามด้วยโค้ดสี
                   Dotted = ลายจุด Dashed = เส้นประ  Solid = เส้นตรง
บรรทัดที่4  เป็นส่วนของเส้นขอบลิ้งด้านล่าง นอกนั้นก็ปรับเปลี่ยนตามบรรทัดที3 อะน่อ                   


TipZ :: Part [ 4 ] 

ถ้าอยากให้ชี้ลิ้งแล้วมีกริสเตอร์แว่บๆ อ๊ะ ทำได้นะจ้ะ (แต่นารุก็ยังไม่เคยลอง ...อ่าว)
ก็แค่เตรียม Url รูปที่มันวิบวับ หรือสีอื่นก็ได้ แต่เน้นให้เห็นอักษรเวลาชี้ลิ้งค์ชัดๆก็แล้วกันนะ

จากบรรทัดที่3  ก็อปนี้แล้วนำไปวางทับบรรทัดที่3น่อ

background-image:url (Urlของภาพ) ;

นอกนั้นก็ไม่มีอะไรมาก อยู่ที่ความสร้างสรรค์ของแต่ละคน ^^




Part [ 5 ] 


/*ส่วนของBG [พื้นหลัง]*/
body {background-image: url( Url ของภาพ );
background-repeat:repeat;
background-position: center;
background-attachment:fixed}

อธิบาย +

อันนี้ไม่มีอะไรมาก แค่เอา Url ของ BG ที่ต้องการมาใส่ได้เลย ใช้ได้ทั้ง บีจีใหญ่บีจีเล็ก ^^


TipZ :: Part [ 5 ] 

ไม่มีอะไรแล้วมี Tipz ทำไมอ่ะเนี่ย =_=" (ผลัวะ ...ตบตัวเอง)
จะมาแนะนำว่า เดี๋ยวจะสอนการทำ BG ด้วยโฟโต้ช็อป โดยให้พื้นมันโปร่งๆไง ^^




Part [ 6 ] 

/*ส่วนของกรอบรอบบทความ*/
html { BORDER-RIGHT : #6D6D6D 14 px Inset ;
BORDER-LEFT: #6D6D6D 14 px Outset ;
BORDER-TOP: #6D6D6D  14 px   Outset ;  
BORDER-BOTTOM : #6D6D6D 14 px Inset   }

อธิบาย +

สีน้ำตาล  แต่ละส่วนของกรอบธีมไล่จากบนลงล่าง ขวา-ซ้าย-บน-ล่าง ไม่ต้องแก้ไขอะไร (บอกเฉยๆ)
               (ใครๆก็รู้ตามภาษาอังกฤษอะน่อ)    
สีเขียว     โค้ดสี ส่วนใหญ่นิยมใช้สีเดียวกัน ก็แล้วแต่ใครจะสร้างสรรค์น่อ
สีส้ม         ขนาดของกรอบ ใหญ่ไปก็ไม่สวยอะน่อ
สีชมพู      ลักษณะของกรอบ ตามนี้เลยอะน่อ ส่วนใหญ่ที่ใช้คือ Solid inset outset
                Dashed , dotted , Solid , Groove , Inset , Outset  , Ridge , double
                


TipZ :: Part [ 6 ] 

สังเกตตรงลักษณะกรอบ(สีชมพู) ในโค้ดนารุน่อ จะเห็นว่า นารุใช้ทั้ง inset+outset
เป็นการ Mix กรอบที่นารุคิดค้นขึ้นมาเอง!! [ พูดเหมือนจะค้นพบอะไรที่ยิ่งใหญ่งั้นแหละ =_=" ]
คือมันจะได้กรอบที่ไม่มีเงาดำๆ (ลองดูในรูป inset-outset ดูจะมีเงาอยู่)
ลองนำไปใช้ดูน่อถ้าใครชอบ หรือใครจะลอง Mix ลักษณะกรอบแบบอื่นๆดูได้นะ อาจจะแหวกแนว หุหุ
Ex :: ธีมที่ใช้ Mix กรอบ ก็ My.iD ของนารุอะแหละ [ —Naru@A-KimlenG— ]




Part [ 7 ] 


/*ส่วนของตัวอักษรปกติ*/
<style type="text/css">
td,th,div,body,li,ul,p {color: #000 ;
font-size:12 px;
font-family: sans-serif ; }

/*ส่วนของอักษรที่เป็นลิ้ง*/
 a:link {text-decoration:none; color: #696969 ; }
           a:visited {text-decoration:none; color: #B4B4B4 ; } 
           a:active {text-decoration:none; color: #818181 ; }


อธิบาย +
ส่วนของตัวอักษรปกติในบทความ
สีแดง   โค้ดสีของตัวอักษรปกติทั้งบทความ
สีเขียว  ตัวเลข ของขนาดตัวอักษร ทั้งบทความ (ปกติ 12)
สีส้ม      ฟ้อนท์ของตัวอักษรในบทความ (ซึ่งไม่จำเป็นต้องเปลี่ยน)

ส่วนของตัวอักษรที่เป็นลิ้งค์ในบทความ
สีน้ำเงิน   โค้ดสี ของสีลิ้งค์ที่แสดงในหน้าบทความ
สีม่วง       โค้ดสี ของสีลิ้งค์ที่ถูกกดแล้ว
สีน้ำตาล   โค้ดสี ของสีลิ้งค์ ที่กำลังถูกกด มันขึ้นมาแว่บเดียว (พอปล่อยก็จะกลับเป็นสีของลิ้งค์ที่ถูกกดแล้ว)


TipZ :: Part [ 7 ] 

อันนี้ก็ไม่มีอะไรมาก ที่สำคัญคือ เน้น ให้เห็นตัวอักษร + ลิ้งค์ ชัดเจน อ่านง่าย สบายตา ^^





Part [ 8 ] 


/*ส่วนของปุ่มกด*/
<style type="text/css">
INPUT, SELECT, TEXTAREA
{ background-color: #FFF ; color: #000 ; font-family: tahoma ; font-size: 12 px;
border: dashed 1 px #000 ; padding: 0; }
</style>


อธิบาย +

สีแดง     โค้ดสีพื้นหลังของปุ่มกด
สีส้ม       โค้ดสีตัวอักษร ในปุ่มกด
สีเขียว    ฟ้อนท์อักษรในปุ่มกด (ไม่จำเป็นต้องเปลี่ยนอะไร)
สีม่วง      ตัวเลข ขนาดของอักษร (ปกติก็เท่ากับขนาดฟ้อนท์ปกติ)
สีน้ำเงิน   ลักษณะ กรอบของปุ่มกด (Dotted = เส้นจุด Dashed = เส้นประ  Solid = เส้นตรง**)
สีชมพู      ตัวเลข ขนาดของกรอบ ปกติคือ 1
สีน้ำตาล  โค้ดสี ของกรอบปุ่มกด


TipZ :: Part [ 8 ] 

อันนี้ก็ไม่มีอะไรมาก ที่สำคัญคือ เน้น ให้เห็นตัวอักษร ชัดเจน อ่านง่าย สบายตา ^^
(เฮ้ยก็อปอันบนมานี่หว่า 555+)






** คือส่วนภาษาอังกฤษที่จำเป็นต้องจำ พวกรูปแบบกรอบต่างๆ เพราะใช้บ่อยมาก  =w="
และโค้ดสีก็ควรจำ บางสีบางอย่างใช้บ่อย อย่าง สีขาว สีดำ สีแดง จะจำง่าย ^_^

โค้ดเฮดบทความ

<SCRIPT>
document.images[0].src =
" URL ของรูป ";
document.images[0].width =ความยาว; document.images[0].height =ความสูง 
</SCRIPT>


อธิบายโค้ด

ความยาว ::  ควรตั้งค่าประมาณ 500
ความสูง  ::  ควรตั้งค่าประมาณ  70


โค้ดสี

Shades of Black
ชื่อ	โค๊ด	สี
black	#000000

Shades of Blue
ชื่อ	โค๊ด	สี
AliceBlue	#F0F8FF
BlueViolet	#8A2BE2
CadetBlue	#5F9EA0
CadetBlue1	#98F5FF
CadetBlue2	#8EE5EE
CadetBlue3	#7AC5CD
CadetBlue4	#53868B
CornflowerBlue	#6495ED
DarkSlateBlue	#483D8B
DarkTurquoise	#00CED1
DeepSkyBlue	#00BFFF
DeepSkyBlue1	#00BFFF
DeepSkyBlue2	#00B2EE
DeepSkyBlue3	#009ACD
DeepSkyBlue4	#00688B
DodgerBlue	#1E90FF
DodgerBlue1	#1E90FF
DodgerBlue2	#1C86EE
DodgerBlue3	#1874CD
DodgerBlue4	#104E8B
LightBlue	#ADD8E6
LightBlue1	#BFEFFF
LightBlue2	#B2DFEE
LightBlue3	#9AC0CD
LightBlue4	#68838B
LightCyan	#E0FFFF
LightCyan1	#E0FFFF
LightCyan2	#D1EEEE
LightCyan3	#B4CDCD
LightCyan4	#7A8B8B
LightSkyBlue	#87CEFA
LightSkyBlue1	#B0E2FF
LightSkyBlue2	#A4D3EE
LightSkyBlue3	#8DB6CD
LightSkyBlue4	#607B8B
LightSlateBlue	#8470FF
LightSteelBlue	#B0C4DE
LightSteelBlue1	#CAE1FF
LightSteelBlue2	#BCD2EE
LightSteelBlue3	#A2B5CD
LightSteelBlue4	#6E7B8B
Medium Aquamarine	#66CDAA
MediumBlue	#0000CD
MediumSlateBlue	#7B68EE
MediumTurquoise	#48D1CC
MidnightBlue	#191970
NavyBlue	#000080
PaleTurquoise	#AFEEEE
PaleTurquoise1	#BBFFFF
PaleTurquoise2	#AEEEEE
PaleTurquoise3	#96CDCD
PaleTurquoise4	#668B8B
PowderBlue	#B0E0E6
RoyalBlue	#4169E1
RoyalBlue1	#4876FF
RoyalBlue2	#436EEE
RoyalBlue3	#3A5FCD
RoyalBlue4	#27408B
SkyBlue	#87CEEB
SkyBlue1	#87CEFF
SkyBlue2	#7EC0EE
SkyBlue3	#6CA6CD
SkyBlue4	#4A708B
SlateBlue	#6A5ACD
SlateBlue1	#836FFF
SlateBlue2	#7A67EE
SlateBlue3	#6959CD
SlateBlue4	#473C8B
SteelBlue	#4682B4
SteelBlue1	#63B8FF
SteelBlue2	#5CACEE
SteelBlue3	#4F94CD
SteelBlue4	#36648B
aquamarine	#7FFFD4
aquamarine1	#7FFFD4
aquamarine2	#76EEC6
aquamarine3	#66CDAA
aquamarine4	#458B74
azure	#F0FFFF
azure1	#F0FFFF
azure2	#E0EEEE
azure3	#C1CDCD
azure4	#838B8B
blue	#0000FF
blue1	#0000FF
blue2	#0000EE
blue3	#0000CD
blue4	#00008B
cyan	#00FFFF
cyan1	#00FFFF
cyan2	#00EEEE
cyan3	#00CDCD
cyan4	#008B8B
navy	#000080
turquoise	#40E0D0
turquoise1	#00F5FF
turquoise2	#00E5EE
turquoise3	#00C5CD
turquoise4	#00868B

Shades of Violet
ชื่อ	โค๊ด	สี
DarkOrchid	#9932CC
DarkOrchid1	#BF3EFF
DarkOrchid2	#B23AEE
DarkOrchid3	#9A32CD
DarkOrchid4	#68228B
DarkViolet	#9400D3
LavenderBlush	#FFF0F5
LavenderBlush1	#FFF0F5
LavenderBlush2	#EEE0E5
LavenderBlush3	#CDC1C5
LavenderBlush4	#8B8386
MediumOrchid	#BA55D3
MediumOrchid1	#E066FF
MediumOrchid2	#D15FEE
MediumOrchid3	#B452CD
MediumOrchid4	#7A378B
MediumPurple	#9370DB
MediumPurple1	#AB82FF
MediumPurple2	#9F79EE
MediumPurple3	#8968CD
MediumPurple4	#5D478B
lavender	#E6E6FA
magenta	#FF00FF
magenta1	#FF00FF
magenta2	#EE00EE
magenta3	#CD00CD
magenta4	#8B008B
maroon	#B03060
maroon1	#FF34B3
maroon2	#EE30A7
maroon3	#CD2990
maroon4	#8B1C62
orchid	#DA70D6
orchid1	#FF83FA
orchid2	#EE7AE9
orchid3	#CD69C9
orchid4	#8B4789
plum	#DDA0DD
plum1	#FFBBFF
plum2	#EEAEEE
plum3	#CD96CD
plum4	#8B668B
purple	#A020F0
purple1	#9B30FF
purple2	#912CEE
purple3	#7D26CD
purple4	#551A8B
thistle	#D8BFD8
thistle1	#FFE1FF
thistle2	#EED2EE
thistle3	#CDB5CD
thistle4	#8B7B8B
violet	#EE82EE

Shades of Yellow
ชื่อ	โค๊ด	สี
BlanchedAlmond	#FFEBCD
DarkGoldenrod	#B8860B
DarkGoldenrod1	#FFB90F
DarkGoldenrod2	#EEAD0E
DarkGoldenrod3	#CD950C
DarkGoldenrod4	#8B6508
LemonChiffon	#FFFACD
LemonChiffon1	#FFFACD
LemonChiffon2	#EEE9BF
LemonChiffon3	#CDC9A5
LemonChiffon4	#8B8970
LightGoldenrod	#EEDD82
LightGoldenrod1	#FFEC8B
LightGoldenrod2	#EEDC82
LightGoldenrod3	#CDBE70
LightGoldenrod4	#8B814C
LightGoldenrod Yellow	#FAFAD2
LightYellow	#FFFFE0
LightYellow1	#FFFFE0
LightYellow2	#EEEED1
LightYellow3	#CDCDB4
LightYellow4	#8B8B7A
PaleGoldenrod	#EEE8AA
PapayaWhip	#FFEFD5
cornsilk	#FFF8DC
cornsilk1	#FFF8DC
cornsilk2	#EEE8CD
cornsilk3	#CDC8B1
cornsilk4	#8B8878
gold	#FFD700
gold1	#FFD700
gold2	#EEC900
gold3	#CDAD00
gold4	#8B7500
goldenrod	#DAA520
goldenrod1	#FFC125
goldenrod2	#EEB422
goldenrod3	#CD9B1D
goldenrod4	#8B6914
moccasin	#FFE4B5
yellow	#FFFF00
yellow1	#FFFF00
yellow2	#EEEE00
yellow3	#CDCD00
yellow4	#8B8B00

Shades of Brown
ชื่อ	โค๊ด	สี
RosyBrown	#BC8F8F
RosyBrown1	#FFC1C1
RosyBrown2	#EEB4B4
RosyBrown3	#CD9B9B
RosyBrown4	#8B6969
SaddleBrown	#8B4513
SandyBrown	#F4A460
beige	#F5F5DC
brown	#A52A2A
brown1	#FF4040
brown2	#EE3B3B
brown3	#CD3333
brown4	#8B2323
burlywood	#DEB887
burlywood1	#FFD39B
burlywood2	#EEC591
burlywood3	#CDAA7D
burlywood4	#8B7355
chocolate	#D2691E
chocolate1	#FF7F24
chocolate2	#EE7621
chocolate3	#CD661D
chocolate4	#8B4513
peru	#CD853F
tan	#D2B48C
tan1	#FFA54F
tan2	#EE9A49
tan3	#CD853F
tan4	#8B5A2B

Shades of Gray
ชื่อ	โค๊ด	สี
DarkSlateGray	#2F4F4F
DarkSlateGray1	#97FFFF
DarkSlateGray2	#8DEEEE
DarkSlateGray3	#79CDCD
DarkSlateGray4	#528B8B
DarkSlateGrey	#2F4F4F
DimGray	#696969
LightGray	#D3D3D3
LightSlateGrey	#778899
SlateGray	#708090
SlateGray1	#C6E2FF
SlateGray2	#B9D3EE
SlateGray3	#9FB6CD
SlateGray4	#6C7B8B
SlateGrey	#708090
grey	#BEBEBE
grey0	#000000
grey1	#030303
grey2	#050505
grey3	#080808
grey4	#0A0A0A
grey5	#0D0D0D
grey6	#0F0F0F
grey7	#121212
grey8	#141414
grey9	#171717
grey10	#1A1A1A
grey11	#1C1C1C
grey12	#1F1F1F
grey13	#212121
grey14	#242424
grey15	#262626
grey16	#292929
grey17	#2B2B2B
grey18	#2E2E2E
grey19	#303030
grey20	#333333
grey21	#363636
grey22	#383838
grey23	#3B3B3B
grey24	#3D3D3D
grey25	#404040
grey26	#424242
grey27	#454545
grey28	#474747
grey29	#4A4A4A
grey30	#4D4D4D
grey31	#4F4F4F
grey32	#525252
grey33	#545454
grey34	#575757
grey35	#595959
grey36	#5C5C5C
grey37	#5E5E5E
grey38	#616161
grey39	#636363
grey40	#666666
grey41	#696969
grey42	#6B6B6B
grey43	#6E6E6E
grey44	#707070
grey45	#737373
grey46	#757575
grey47	#787878
grey48	#7A7A7A
grey49	#7D7D7D
grey50	#7F7F7F
grey51	#828282
grey52	#858585
grey53	#878787
grey54	#8A8A8A
grey55	#8C8C8C
grey56	#8F8F8F
grey57	#919191
grey58	#949494
grey59	#969696
grey60	#999999
grey61	#9C9C9C
grey62	#9E9E9E
grey63	#A1A1A1
grey64	#A3A3A3
grey65	#A6A6A6
grey66	#A8A8A8
grey67	#ABABAB
grey68	#ADADAD
grey69	#B0B0B0
grey70	#B3B3B3
grey71	#B5B5B5
grey72	#B8B8B8
grey73	#BABABA
grey74	#BDBDBD
grey75	#BFBFBF
grey76	#C2C2C2
grey77	#C4C4C4
grey78	#C7C7C7
grey79	#C9C9C9
grey80	#CCCCCC
grey81	#CFCFCF
grey82	#D1D1D1
grey83	#D4D4D4
grey84	#D6D6D6
grey85	#D9D9D9
grey86	#DBDBDB
grey87	#DEDEDE
grey88	#E0E0E0
grey89	#E3E3E3
grey90	#E5E5E5
grey91	#E8E8E8
grey92	#EBEBEB
grey93	#EDEDED
grey94	#F0F0F0
grey95	#F2F2F2
grey96	#F5F5F5
grey97	#F7F7F7
grey98	#FAFAFA
grey99	#FCFCFC
grey100	#FFFFFF

Shades of White
ชื่อ	โค๊ด	สี
AntiqueWhite	#FAEBD7
AntiqueWhite1	#FFEFDB
AntiqueWhite2	#EEDFCC
AntiqueWhite3	#CDC0B0
AntiqueWhite4	#8B8378
FloralWhite	#FFFAF0
GhostWhite	#F8F8FF
NavajoWhite	#FFDEAD
NavajoWhite1	#FFDEAD
NavajoWhite2	#EECFA1
NavajoWhite3	#CDB38B
NavajoWhite4	#8B795E
OldLace	#FDF5E6
WhiteSmoke	#F5F5F5
gainsboro	#DCDCDC
ivory	#FFFFF0
ivory1	#FFFFF0
ivory2	#EEEEE0
ivory3	#CDCDC1
ivory4	#8B8B83
linen	#FAF0E6
seashell	#FFF5EE
seashell1	#FFF5EE
seashell2	#EEE5DE
seashell3	#CDC5BF
seashell4	#8B8682
snow	#FFFAFA
snow1	#FFFAFA
snow2	#EEE9E9
snow3	#CDC9C9
snow4	#8B8989
wheat	#F5DEB3
wheat1	#FFE7BA
wheat2	#EED8AE
wheat3	#CDBA96
wheat4	#8B7E66
white	#FFFFFF

Shades of Green
ชื่อ	โค๊ด	สี
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkOlive Green	#556B2F
DarkOlive Green1	#CAFF70
DarkOlive Green2	#BCEE68
DarkOlive Green3	#A2CD5A
DarkOlive Green4	#6E8B3D
DarkSea Green	#8FBC8F
DarkSea Green1	#C1FFC1
DarkSea Green2	#B4EEB4
DarkSea Green3	#9BCD9B
DarkSea Green4	#698B69
ForestGreen	#228B22
GreenYellow	#ADFF2F
LawnGreen	#7CFC00
LightSeaGreen	#20B2AA
LimeGreen	#32CD32
Medium SeaGreen	#3CB371
Medium SpringGreen	#00FA9A
MintCream	#F5FFFA
OliveDrab	#6B8E23
OliveDrab1	#C0FF3E
OliveDrab2	#B3EE3A
OliveDrab3	#9ACD32
OliveDrab4	#698B22
PaleGreen	#98FB98
PaleGreen1	#9AFF9A
PaleGreen2	#90EE90
PaleGreen3	#7CCD7C
PaleGreen4	#548B54
SeaGreen	#2E8B57
SeaGreen1	#54FF9F
SeaGreen2	#4EEE94
SeaGreen3	#43CD80
SeaGreen4	#2E8B57
SpringGreen	#00FF7F
SpringGreen1	#00FF7F
SpringGreen2	#00EE76
SpringGreen3	#00CD66
SpringGreen4	#008B45
YellowGreen	#9ACD32
chartreuse	#7FFF00
chartreuse1	#7FFF00
chartreuse2	#76EE00
chartreuse3	#66CD00
chartreuse4	#458B00
green	#00FF00
green1	#00FF00
green2	#00EE00
green3	#00CD00
green4	#008B00
khaki	#F0E68C
khaki1	#FFF68F
khaki2	#EEE685
khaki3	#CDC673
khaki4	#8B864E

Shades of Orange
ชื่อ	โค๊ด	สี
DarkOrange	#FF8C00
DarkOrange1	#FF7F00
DarkOrange2	#EE7600
DarkOrange3	#CD6600
DarkOrange4	#8B4500
DarkSalmon	#E9967A
LightCoral	#F08080
LightSalmon	#FFA07A
LightSalmon1	#FFA07A
LightSalmon2	#EE9572
LightSalmon3	#CD8162
LightSalmon4	#8B5742
PeachPuff	#FFDAB9
PeachPuff1	#FFDAB9
PeachPuff2	#EECBAD
PeachPuff3	#CDAF95
PeachPuff4	#8B7765
bisque	#FFE4C4
bisque1	#FFE4C4
bisque2	#EED5B7
bisque3	#CDB79E
bisque4	#8B7D6B
coral	#FF7F50
coral1	#FF7256
coral2	#EE6A50
coral3	#CD5B45
coral4	#8B3E2F
honeydew	#F0FFF0
honeydew1	#F0FFF0
honeydew2	#E0EEE0
honeydew3	#C1CDC1
honeydew4	#838B83
orange	#FFA500
orange1	#FFA500
orange2	#EE9A00
orange3	#CD8500
orange4	#8B5A00
salmon	#FA8072
salmon1	#FF8C69
salmon2	#EE8262
salmon3	#CD7054
salmon4	#8B4C39
sienna	#A0522D
sienna1	#FF8247
sienna2	#EE7942
sienna3	#CD6839
sienna4	#8B4726

Shades of Red
ชื่อ	โค๊ด	สี
DeepPink	#FF1493
DeepPink1	#FF1493
DeepPink2	#EE1289
DeepPink3	#CD1076
DeepPink4	#8B0A50
HotPink	#FF69B4
HotPink1	#FF6EB4
HotPink2	#EE6AA7
HotPink3	#CD6090
HotPink4	#8B3A62
IndianRed	#CD5C5C
IndianRed1	#FF6A6A
IndianRed2	#EE6363
IndianRed3	#CD5555
IndianRed4	#8B3A3A
LightPink	#FFB6C1
LightPink1	#FFAEB9
LightPink2	#EEA2AD
LightPink3	#CD8C95
LightPink4	#8B5F65
Medium VioletRed	#C71585
MistyRose	#FFE4E1
MistyRose1	#FFE4E1
MistyRose2	#EED5D2
MistyRose3	#CDB7B5
MistyRose4	#8B7D7B
OrangeRed	#FF4500
OrangeRed1	#FF4500
OrangeRed2	#EE4000
OrangeRed3	#CD3700
OrangeRed4	#8B2500
PaleViolet Red	#DB7093
PaleViolet Red1	#FF82AB
PaleViolet Red2	#EE799F
PaleViolet Red3	#CD6889
PaleViolet Red4	#8B475D
VioletRed	#D02090
VioletRed1	#FF3E96
VioletRed2	#EE3A8C
VioletRed3	#CD3278
VioletRed4	#8B2252
firebrick	#B22222
firebrick1	#FF3030
firebrick2	#EE2C2C
firebrick3	#CD2626
firebrick4	#8B1A1A
pink	#FFC0CB
pink1	#FFB5C5
pink2	#EEA9B8
pink3	#CD919E
pink4	#8B636C
red	#FF0000
red1	#FF0000
red2	#EE0000
red3	#CD0000
red4	#8B0000
tomato	#FF6347
tomato1	#FF6347
tomato2	#EE5C42
tomato3	#CD4F39
tomato4	#8B3626