CSS Color รหัสสี โค้ดสี RGB ต่าง ๆ ที่ใช้
ในการจะสร้างเว็บขึ้นมา สิ่งที่ขาดไม่ได้นั่นคือ สีสันของเว็บ เพื่อให้เว็บมีความน่าสนใจ ในบทความนี้ผมจะมาแชร์ความรู้ เกี่ยวกับ การกำหนดสีสันต่าง ๆ ให้เว็บ โดยใช้ CSS ซึ่งมีหลาย ๆ แท็กที่จะต้องใช้โค้ดสี
ในการกำหนดค่าสีนั้น สามารถกำหนดได้หลายวิธี ดังตัวอย่างด้านล่าง
Format | Syntax | Example |
---|---|---|
Hex Code | #RRGGBB | p{color:#FF0000;} |
Short Hex Code | #RGB | p{color:#6A7;} |
RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
keyword | aqua, black, etc. | p{color:teal;} |
Hex Code
hex code เป็นการกำหนดโค้ดสี ที่เป็นเลขฐานสิบหก นั่นคือ มีตัวเลขตั้งแต่ 0-F มีจำนวน 6 ตัวเรียงกัน ประกอบด้วยสี RGB, R=Red, G=Green, B=Blue ซึ่งแต่ละสีจะมีสองตัว เช่น มีเลข 003366 จะประกอบไปด้วย สีแดงเป็นตัวเลข 00 สีเขียนเป็นตัวเลข 33 สีน้ำเงินเป็นตัวเลข 66 ก่อนการใส่ตัวเลขให้ใส่เครื่องหมาย # ไว้ข้างหน้าด้วย ดังตัวอย่างด้านล่าง
#333333
#FF0000
#00FF00
#0000FF
#FF00FF
#FFFF00
#00FFFF
Short Hex Code
Short Hex Code เป็นวิธีการเขียนรหัสสีที่เป็นแบบย่อ จากหกหลักเป็นสามหลัก ซึ่งจะกลายเป็นแบบ RGB ที่มีเลขอย่างละตัว เช่น รหัสสีเป็น 036 ก็ คือ สีแดง 0 สีเขียว 3 สีน้ำเงิน 6 ซึ่งในที่นี้ ก็เหมือนกับการเขียนรหัสสีเป็น 003366 ดังตัวอย่างด้านล่าง
#333
#F00
#0F0
#00F
#F0F
#FF0
#0FF
RGB %
RGB % เป็นการกำหนดรหัสสี เป็นแบบ เปอร์เซ็น ซึ่งเราต้องใส่ สีแต่ละสีเป็นแบบเปอร์เซ็น ซึ่งแต่ละสี ก็สามารถใส่ได้ถึงร้อยเปอร์เซ็น ถ้าจะให้เปรียบเทียบละก็ ร้อยเปอร์เซ็นก็คือ F แล้วก็ 0 เปอร์เซ็น ก็คือ 0 ในฐานสิบหก นั่นเอง ดังตัวอย่างด้านล่าง
rgb(30%,30%,30%)
rgb(100%,0%,0%)
rgb(0%,100%,0%)
rgb(0%,0%,100%)
rgb(100%,0%,100%)
rgb(100%,100%,0%)
rgb(0%,100%,100%)
RGB Absolute
RGB Absolute เป็นการกำหนดสี ที่มีลักษณะคล้าย ๆ กับ การกำหนดแบบ RGB % ซึ่งการกำหนดแบบ RGB Absolute จะมีตัวเลขตั้งแต่ 0-255 ซึ่งเป็นตัวเลข ฐานสิบ (FF ในฐานสิบหก เท่ากับ 255 ในฐานสิบ) ดังตัวอย่างด้านล่าง
rgb(50,50,50)
rgb(255,0, 0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,0,255)
rgb(255,255,0)
rgb(0,255,255)
keyword
keyword เป็นการกำหนดรหัสสีที่มีลักษณะเป็นคำ เป็นการกำหนดที่เรามีความคุ้นเคย จำง่าย นั่นคือ การกำหนดเป็นคำในภาษาอังกฤษ ดังตัวอย่างด้านล่าง
gray
red
green
blue
pink
yellow
skyblue
จากวิธีการกำหนดสี ให้กับเว็บไซต์ แบบต่าง ๆ ที่ได้นำเสนอไป จะเห็นว่าวิธีที่ สะดวก และนิยมใช้กันที่สุด จะเป็นวิธีกำหนดรหัสสีแบบเลขฐานสิบหก ซึ่งเลขที่นิยมนำมาใช้ในการกำหนดรหัส จะเป็นเลข 0 3 6 9 C F ดังนั้น ผมจึงได้รวบรวมโค้ดสีต่าง ๆ ที่นิยมนำมาใช้กัน มาให้ดูกันครับ ตามด้านล่างเลย
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 |
ต่อมาคือโปรแกรมแปลงค่าโค้ดสี
ตัวอย่างโค้ดสี
ขอบคุณข้อมูลจากเว็บ http://www.doesystem.com/dadc49efe80e81f145d7129807cdc196/CSS-Color-%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B8%AA%E0%B8%B5-%E0%B9%82%E0%B8%84%E0%B9%89%E0%B8%94%E0%B8%AA%E0%B8%B5-RGB-%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87-%E0%B9%86-%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%83%E0%B8%8A%E0%B9%89.htm