เบอร์สีเนื้อ. สีในรูปแบบสามารถระบุได้หลายวิธี: ตามค่าเลขฐานสิบหก ตามชื่อ ในรูปแบบ RGB, RGBA, HSL, HSLA รหัสสี HTML
สี HTML ระบุด้วยอักขระหกตัวหลังเครื่องหมายทับ เช่น #000000 สัญลักษณ์ทั้งหกนี้แสดงถึงสัดส่วนของสีต่างๆ (แดง เขียว น้ำเงิน) ในสีสุดท้าย บนจอคอมพิวเตอร์ของคุณ รูปภาพจะถูกสร้างขึ้นจากจุดจำนวนมากที่เรียกว่าพิกเซล แต่ละพิกเซลเป็นแหล่งกำเนิดแสงขนาดเล็ก เรียกมันว่า "ไฟฉาย" ซึ่งจะประกอบด้วยไฟฉายสามดวง ได้แก่ สีแดง สีเขียว และสีน้ำเงิน โดยการลดหรือเพิ่มความเข้มของการเรืองแสงของไฟฉายแต่ละสี เราก็จะได้สีที่ต้องการ
รหัสสี HTML
สีใน HTML จะแสดงด้วยสัญลักษณ์เลขฐานสิบหก (HEX) ซึ่งได้แก่ สีแดง น้ำเงิน และเขียว (RGB)
ค่าสีที่น้อยที่สุดคือ 0 (เลขฐานสิบหก 00) ค่าสีสูงสุดคือ 255 (hex FF)
ค่าสีเลขฐานสิบหกคือตัวเลขสามหลักที่ขึ้นต้นด้วยเครื่องหมาย #
รหัสสี (ความหมาย)
สี | รหัสเลขฐานสิบหก | รหัส RGB |
---|---|---|
#000000 | RGB(0,0,0) | |
#FF0000 | RGB(255,0,0) | |
#00FF00 | RGB(0,255,0) | |
#0000FF | RGB(0,0,255) | |
#FFFF00 | RGB(255,255,0) | |
#00FFFF | RGB(0,255,255) | |
#FF00FF | RGB(255,0,255) | |
#C0C0C0 | RGB(192,192,192) | |
#FFFFFF | RGB(255,255,255) |
16 ล้านเฉดสี
รวมสีแดง น้ำเงิน และเขียว โดยมีค่าตั้งแต่ 0 ถึง 255 เป็นเปอร์เซ็นต์ของแต่ละสี ทำให้มีเฉดสีรวมกันกว่า 16 ล้านเฉดสี (256 x 256 x 256)
จอภาพสมัยใหม่ส่วนใหญ่สามารถแสดงเฉดสีที่แตกต่างกันได้อย่างน้อย 16,384 เฉด (โดยทั่วไปจอภาพ LCD สามารถแสดงได้ 262,000 หรือ 16 ล้านเฉด (อัปเดตเมื่อเดือนตุลาคม 2556)สี และจอภาพ CRT สามารถแสดงสีได้ไม่จำกัดจำนวน)
ตารางสีด้านล่างแสดงการเปลี่ยนแปลงสัดส่วนของสีแดงจาก 0 ถึง 255 โดยมีค่าเป็นศูนย์สำหรับสีน้ำเงินและสีเขียว:
สีแดง | รหัสเลขฐานสิบหก | รหัส RGB |
---|---|---|
#000000 | RGB(0,0,0) | |
#080000 | RGB(8,0,0) | |
#100000 | RGB(16,0,0) | |
#180000 | RGB(24,0,0) | |
#200000 | RGB(32,0,0) | |
#280000 | RGB(40,0,0) | |
#300000 | RGB(48,0,0) | |
#380000 | RGB(56,0,0) | |
#400000 | RGB(64,0,0) | |
#480000 | RGB(72,0,0) | |
#500000 | RGB(80,0,0) | |
#580000 | RGB(88,0,0) | |
#600000 | RGB(96,0,0) | |
#680000 | RGB(104,0,0) | |
#700000 | RGB(112,0,0) | |
#780000 | RGB(120,0,0) | |
#800000 | RGB(128,0,0) | |
#880000 | RGB(136,0,0) | |
#900000 | RGB(144,0,0) | |
#980000 | RGB(152,0,0) | |
#A00000 | RGB(160,0,0) | |
#A80000 | RGB(168,0,0) | |
#B00000 | RGB(176,0,0) | |
#B80000 | RGB(184,0,0) | |
#C00000 | RGB(192,0,0) | |
#C80000 | RGB(200,0,0) | |
#D00000 | RGB(208,0,0) | |
#D80000 | RGB(216,0,0) | |
#E00000 | RGB(224,0,0) | |
#E80000 | RGB(232,0,0) | |
#F00000 | RGB(240,0,0) | |
#F80000 | RGB(248,0,0) | |
#FF0000 | RGB(255,0,0) |
เฉดสีเทา
เพื่อให้ได้เฉดสีเทา จะใช้การแบ่งสีทุกสีเท่าๆ กัน เพื่อให้คุณสามารถเลือกสีที่ต้องการได้ง่ายขึ้น เราจึงเตรียมรหัสเฉดสีเทาไว้ให้คุณ
เฉดสีเทา | รหัสเลขฐานสิบหก | รหัส RGB |
---|---|---|
#000000 | RGB(0,0,0) | |
#080808 | RGB(8,8,8) | |
#101010 | RGB(16,16,16) | |
#181818 | RGB(24,24,24) | |
#202020 | RGB(32,32,32) | |
#282828 | RGB(40,40,40) | |
#303030 | RGB(48,48,48) | |
#383838 | RGB(56,56,56) | |
#404040 | RGB(64,64,64) | |
#484848 | RGB(72,72,72) | |
#505050 | RGB(80,80,80) | |
#585858 | RGB(88,88,88) | |
#606060 | RGB(96,96,96) | |
#686868 | RGB(104,104,104) | |
#707070 | RGB(112,112,112) | |
#787878 | RGB(120,120,120) | |
#808080 | RGB(128,128,128) | |
#888888 | RGB(136,136,136) | |
#909090 | RGB(144,144,144) | |
#989898 | RGB(152,152,152) | |
#A0A0A0 | RGB(160,160,160) | |
#A8A8A8 | RGB(168,168,168) | |
#B0B0B0 | RGB(176,176,176) | |
#B8B8B8 | RGB(184,184,184) | |
#C0C0C0 | RGB(192,192,192) | |
#C8C8C8 | RGB(200,200,200) | |
#D0D0D0 | RGB(208,208,208) | |
#D8D8D8 | RGB(216,216,216) | |
#E0E0E0 | RGB(224,224,224) | |
#E8E8E8 | RGB(232,232,232) | |
#F0F0F0 | RGB(240,240,240) | |
#F8F8F8 | RGB(248,248,248) | |
#FFFFFF | RGB(255,255,255) |
ข้ามเบราว์เซอร์ (ทุกเบราว์เซอร์) ชื่อสี html
ชุดชื่อสี 150 ชื่อในรูปแบบ html รองรับทุกเบราว์เซอร์
ชื่อสีมาตรฐาน
W3C แสดงรายการชื่อสีที่ถูกต้อง 16 ชื่อสำหรับ HTML และ CSS: น้ำ, ดำ, น้ำเงิน, บานเย็น, เทา, เขียว, มะนาว, มารูน (เกาลัด), น้ำเงิน (อุลตรามารีน), มะกอก (มะกอก), ม่วง (ม่วง), แดง (แดง) , เงิน (เงิน), ฟ้าอมเขียว (เทา), ขาว (ขาว) และเหลือง (เหลือง)
เมื่อใช้สีที่ไม่รวมอยู่ในรายการนี้ การใช้รหัสฐานสิบหก (HEX) หรือรหัส RGB จะถูกต้องมากกว่า
สีที่ปลอดภัย
เมื่อหลายปีก่อน เมื่อคอมพิวเตอร์สามารถรองรับสีที่แตกต่างกันได้สูงสุด 256 สี มีการเสนอรายการ "สีที่ปลอดภัยสำหรับเว็บ" 216 สี โดยสงวนไว้ 40 สีสำหรับระบบ
จานสี 216 สีนี้ถูกสร้างขึ้นเพื่อแสดงสีอย่างเหมาะสมในโหมดจานสี 256 สี
ตอนนี้ไม่สำคัญแล้ว เพราะคอมพิวเตอร์ส่วนใหญ่ทั่วโลกรองรับเฉดสีหลายล้านเฉด ไม่ว่าในกรณีใด นี่คือรายการสีเหล่านี้:
000000 | 000033 | 000066 | 000099 | 0000ซีซี | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033ซีซี | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066ซีซี | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099ซีซี | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300ซีซี | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333ซีซี | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366ซีซี | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399ซีซี | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33ซีซีเอฟเอฟ |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600ซีซี | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633ซีซี | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666ซีซี | 6666FF |
669900 | 669933 | 669966 | 669999 | 6,699ซีซี | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66ซีซีเอฟเอฟ |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900ซีซี | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933ซีซี | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966ซีซี | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999ซีซี | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
ซีซี0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
ซีซี3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
ซีซี6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
ซีซี9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | ซีซีซีซี66 | CCCC99 | ซีซีซีซีซี | ซีซีซีซีเอฟ |
CCFF00 | ซีซีเอฟเอฟ33 | ซีซีเอฟเอฟ66 | CCFF99 | ซีซีเอฟซีซี | ซีซีเอฟเอฟ |
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 |
เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. ตัวเลขตั้งแต่ 10 ถึง 15 จะถูกแทนที่ด้วยตัวอักษรละติน ตัวเลขที่มากกว่า 15 ในระบบเลขฐานสิบหกนั้นเกิดขึ้นจากการรวมตัวเลขสองตัวให้เป็นหนึ่งเดียว ตัวอย่างเช่น ตัวเลข 255 ในรูปทศนิยมจะสอดคล้องกับตัวเลข FF ที่เป็นเลขฐานสิบหก เพื่อหลีกเลี่ยงความสับสนในการกำหนดระบบตัวเลข สัญลักษณ์แฮช # จะถูกวางไว้หน้าเลขฐานสิบหก เช่น #666999 แต่ละสีในสามสี ได้แก่ แดง เขียว และน้ำเงิน สามารถรับค่าได้ตั้งแต่ 00 ถึง FF ดังนั้น สัญลักษณ์สีจึงถูกแบ่งออกเป็นสามองค์ประกอบ #rrggbb โดยที่สัญลักษณ์สองตัวแรกระบุองค์ประกอบสีแดงของสี สองตัวตรงกลางคือสีเขียว และสองตัวสุดท้ายคือสีน้ำเงิน อนุญาตให้ใช้รูปแบบย่อ #rgb โดยที่อักขระแต่ละตัวควรเพิ่มเป็นสองเท่า ดังนั้น รายการ #fe0 ควรถือเป็น #ffee00
ตามชื่อ
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โครเมียม | โอเปร่า | ซาฟารี | ไฟร์ฟอกซ์ | หุ่นยนต์ | ไอโอเอส |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
เบราว์เซอร์รองรับสีบางสีตามชื่อ ในตาราง เลข 1 แสดงชื่อ รหัสเลขฐานสิบหก RGB ค่า HSL และคำอธิบาย
ชื่อ | สี | รหัส | RGB | HSL | คำอธิบาย |
---|---|---|---|---|---|
สีขาว | #ffffff หรือ #fff | RGB(255,255,255) | เอชเอสแอล(0.0%,100%) | สีขาว | |
เงิน | #c0c0c0 | RGB(192,192,192) | เอชเอสแอล(0.0%,75%) | สีเทา | |
สีเทา | #808080 | RGB(128,128,128) | เอชเอสแอล(0.0%,50%) | สีเทาเข้ม | |
สีดำ | #000000 หรือ #000 | RGB(0,0,0) | HSL(0.0%,0%) | สีดำ | |
สีน้ำตาลแดง | #800000 | RGB(128,0,0) | เอชเอสแอล(0.100%,25%) | สีแดงเข้ม | |
สีแดง | #ff0000 หรือ #f00 | RGB(255,0,0) | เอชเอสแอล(0,100%,50%) | สีแดง | |
ส้ม | #ffa500 | RGB(255,165,0) | เอชเอสแอล(38.8,100%,50%) | ส้ม | |
สีเหลือง | #ffff00 หรือ #ff0 | RGB(255,255,0) | เอชเอสแอล(60,100%,50%) | สีเหลือง | |
มะกอก | #808000 | RGB(128,128,0) | เอชเอสแอล(60,100%,25%) | มะกอก | |
มะนาว | #00ff00 หรือ #0f0 | RGB(0,255,0) | เอชเอสแอล(120,100%,50%) | สีเขียวอ่อน | |
สีเขียว | #008000 | RGB(0,128,0) | เอชเอสแอล(120,100%,25%) | สีเขียว | |
น้ำ | #00ffff หรือ #0ff | RGB(0,255,255) | เอชเอสแอล(180,100%,50%) | สีฟ้า | |
สีฟ้า | #0000ff หรือ #00f | RGB(0,0,255) | เอชเอสแอล(240,100%,50%) | สีฟ้า | |
กองทัพเรือ | #000080 | RGB(0,0,128) | เอชเอสแอล(240,100%,25%) | สีน้ำเงินเข้ม | |
นกเป็ดน้ำ | #008080 | RGB(0,128,128) | เอชเอสแอล(180,100%,25%) | สีฟ้า-เขียว | |
สีแดงม่วง | #ff00ff หรือ #f0f | RGB(255,0,255) | เอชเอสแอล(300,100%,50%) | สีชมพู | |
สีม่วง | #800080 | RGB(128,0,128) | เอชเอสแอล(300,100%,25%) | สีม่วง |
การใช้ RGB
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โครเมียม | โอเปร่า | ซาฟารี | ไฟร์ฟอกซ์ | หุ่นยนต์ | ไอโอเอส |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
คุณสามารถกำหนดสีโดยใช้ค่าสีแดง เขียว และน้ำเงินในรูปแบบทศนิยม ส่วนประกอบสีทั้งสามสีแต่ละสีใช้ค่าตั้งแต่ 0 ถึง 255 นอกจากนี้ยังอนุญาตให้ระบุสีเป็นเปอร์เซ็นต์ โดยที่ 100% สอดคล้องกับตัวเลข 255 ขั้นแรก ให้ระบุคีย์เวิร์ด rgb จากนั้นระบุส่วนประกอบสีในวงเล็บ โดยคั่นด้วยเครื่องหมายจุลภาค เช่น rgb(255 , 128, 128) หรือ rgb(100%, 50%, 50%)
RGBA
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โครเมียม | โอเปร่า | ซาฟารี | ไฟร์ฟอกซ์ | หุ่นยนต์ | ไอโอเอส |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
รูปแบบ RGBA มีไวยากรณ์คล้ายกับ RGB แต่มีช่องอัลฟ่าที่ระบุความโปร่งใสขององค์ประกอบ ค่า 0 หมายถึงโปร่งใสทั้งหมด 1 หมายถึงทึบแสง และค่ากลาง เช่น 0.5 หมายถึงกึ่งโปร่งใส
เพิ่ม RGBA ใน CSS3 ดังนั้นโค้ด CSS จะต้องได้รับการตรวจสอบกับเวอร์ชันนี้ ควรสังเกตว่ามาตรฐาน CSS3 ยังอยู่ระหว่างการพัฒนาและคุณสมบัติบางอย่างอาจมีการเปลี่ยนแปลง ตัวอย่างเช่น สีในรูปแบบ RGB ที่เพิ่มให้กับคุณสมบัติสีพื้นหลังได้รับการตรวจสอบแล้ว แต่สีที่เพิ่มเข้าไปในคุณสมบัติพื้นหลังนั้นใช้ไม่ได้อีกต่อไป ในขณะเดียวกัน เบราว์เซอร์ก็ค่อนข้างเข้าใจสีของคุณสมบัติทั้งสองอย่างถูกต้อง
HSL
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โครเมียม | โอเปร่า | ซาฟารี | ไฟร์ฟอกซ์ | หุ่นยนต์ | ไอโอเอส |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
ชื่อของรูปแบบ HSL มาจากการรวมกันของตัวอักษรตัวแรก Hue (hue), Saturate (ความอิ่มตัว) และ Lightness (ความสว่าง) ฮิว คือค่าสีบนวงล้อสี (รูปที่ 1) และมีหน่วยเป็นองศา 0° ตรงกับสีแดง 120° เป็นสีเขียว และ 240° เป็นสีน้ำเงิน ค่าเฉดสีอาจแตกต่างกันตั้งแต่ 0 ถึง 359
ข้าว. 1. วงล้อสี
ความอิ่มตัวคือความเข้มของสีและวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% ถึง 100% ค่า 0% หมายถึงไม่มีสีและเป็นสีเทา ส่วน 100% คือค่าสูงสุดสำหรับความอิ่มตัว
ความสว่างจะระบุความสว่างของสีและระบุเป็นเปอร์เซ็นต์ตั้งแต่ 0% ถึง 100% ค่าต่ำจะทำให้สีเข้มขึ้น และค่าที่สูงจะทำให้สีจางลง ค่าสุดขีดคือ 0% และ 100% สอดคล้องกับขาวดำ
HSLA
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ | โครเมียม | โอเปร่า | ซาฟารี | ไฟร์ฟอกซ์ | หุ่นยนต์ | ไอโอเอส |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
รูปแบบ HSLA มีไวยากรณ์คล้ายกับ HSL แต่มีช่องอัลฟ่าเพื่อระบุความโปร่งใสขององค์ประกอบ ค่า 0 หมายถึงโปร่งใสทั้งหมด 1 หมายถึงทึบแสง และค่ากลาง เช่น 0.5 หมายถึงกึ่งโปร่งใส
ค่าสี RGBA, HSL และ HSLA จะถูกเพิ่มใน CSS3 ดังนั้น โปรดตรวจสอบโค้ดของคุณเพื่อดูความถูกต้องของเวอร์ชันเมื่อใช้รูปแบบเหล่านี้
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
คำเตือน
วิธีการจับสิงโตทั้งหมดที่แสดงอยู่ในเว็บไซต์เป็นไปในเชิงทฤษฎีและใช้วิธีการคำนวณ ผู้เขียนไม่รับประกันความปลอดภัยของคุณเมื่อใช้งาน และไม่รับผิดชอบต่อผลลัพธ์ใดๆ จำไว้ว่าสิงโตเป็นสัตว์นักล่าและเป็นสัตว์อันตราย!
ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.
ข้าว. 2.สีบนหน้าเว็บ
ค่ารายละเอียดโมดูลสี CSS ที่อนุญาตให้ผู้เขียนกำหนดสีและความทึบขององค์ประกอบ html รวมถึงค่าของคุณสมบัติสี
คุณสมบัติสี
1. สีลำดับความสำคัญ: คุณสมบัติของสี
คุณสมบัติระบุสีแบบอักษรโดยใช้ระบบการแสดงผลสีต่างๆ คุณสมบัติอธิบายสีของเนื้อหาข้อความขององค์ประกอบ นอกจากนี้ยังใช้เพื่อแสดงค่าทางอ้อมที่เป็นไปได้ (currentColor) สำหรับคุณสมบัติอื่นใดที่รับค่าสี
ทรัพย์สินเป็นมรดก
2. ค่าสี
2.1. คำหลักหลัก
รายการคำหลักมีความหมายดังต่อไปนี้:
ชื่อ | ฐานสิบหก | RGB | สี |
---|---|---|---|
สีดำ | #000000 | 0,0,0 | |
เงิน | #C0C0C0 | 192,192,192 | |
สีเทา | #808080 | 128,128,128 | |
สีขาว | #FFFFFF | 255,255,255 | |
สีน้ำตาลแดง | #800000 | 128,0,0 | |
สีแดง | #FF0000 | 255,0,0 | |
สีม่วง | #800080 | 128,0,128 | |
สีแดงม่วง | #FF00FF | 255,0,255 | |
สีเขียว | #008000 | 0,128,0 | |
มะนาว | #00FF00 | 0,255,0 | |
มะกอก | #808000 | 128,128,0 | |
สีเหลือง | #FFFF00 | 255,255,0 | |
กองทัพเรือ | #000080 | 0,0,128 | |
สีฟ้า | #0000FF | 0,0,255 | |
นกเป็ดน้ำ | #008080 | 0,128,128 | |
น้ำ | #00FFFF | 0,255,255 |
ชื่อสีไม่คำนึงถึงขนาดตัวพิมพ์
ไวยากรณ์
สี: ฟ้าอมเขียว;
2.2. ค่าสีตัวเลข
2.2.1. สีโมเดล RGB
รูปแบบเลขฐานสิบหกของค่า RGB คือเครื่องหมาย # ตามด้วยอักขระเลขฐานสิบหกสามหรือหกตัวทันที สัญลักษณ์ RGB สามหลัก #rgb จะถูกแปลงเป็นรูปแบบหกหลัก #rrggbb โดยการคัดลอกตัวเลขแทนที่จะบวกเลขศูนย์ ตัวอย่างเช่น #fb0 ขยายเป็น #ffbb00 เพื่อให้แน่ใจว่าสามารถระบุสีขาว #ffffff ในรายการ #fff แบบสั้นได้ และลบการขึ้นต่อกันใดๆ กับความลึกของสีที่แสดง
รูปแบบของค่า RGB ในสัญลักษณ์การทำงานคือ rgb( ตามด้วยรายการค่าตัวเลขสามค่าที่คั่นด้วยเครื่องหมายจุลภาค (ค่าจำนวนเต็มสามค่าหรือค่าเปอร์เซ็นต์สามค่า) ตามด้วยสัญลักษณ์) ค่าจำนวนเต็ม 255 สอดคล้องกับ 100% และ F หรือ FF ในรูปแบบเลขฐานสิบหก:
RGB(255,255,255) = RGB(100%, 100%, 100%) = #FFF
อนุญาตให้ใช้อักขระเว้นวรรครอบค่าตัวเลข
มีหลายวิธีในการแสดงสีในการออกแบบเว็บ
HEX เป็นระบบการแสดงสีเลขฐานสิบหกตามฐาน 16 สำหรับระบบนี้ จะใช้เลขทศนิยมอารบิกตั้งแต่ 0 ถึง 9 และตัวอักษรละตินจาก A ถึง F เพื่อเสริมตัวเลขดิจิทัลถึง 16 สำหรับการออกแบบเว็บไซต์ สีหลัก (คีย์) 16 สี ถูกนำมาใช้ ซึ่งเรียกว่ารหัสสีเลขฐานสิบหก #RRGGBB โดยแต่ละคู่มีหน้าที่รับผิดชอบในการแบ่งสี: RR – สีแดง, GG – สีเขียว และ BB – สีน้ำเงิน แต่ละเศษส่วนของสีมีตั้งแต่ 00 ถึง FF
การแสดงสีอื่นๆ อีกสองแบบในการออกแบบเว็บ ได้แก่: ในรูปแบบของ RGB(*,*,*) โดยที่แต่ละเศษส่วน “*” ของสีจะแสดงด้วยตัวเลขทศนิยมตั้งแต่ 0 ถึง 255 และตามชื่อสีในภาษาอังกฤษ
เมื่อสร้างภาพสี ปัญหาหลักคือการสร้างสีที่ถูกต้องบนคอมพิวเตอร์ จอภาพ และเบราว์เซอร์ประเภทต่างๆ หากเบราว์เซอร์ไม่สามารถแสดงสีได้อย่างถูกต้อง เบราว์เซอร์จะเลือกสีที่คล้ายกันหรือผสมหลายสี และบางครั้งก็สามารถถูกแทนที่ด้วยสีที่แตกต่างไปจากเดิมอย่างสิ้นเชิง
โต๊ะ สีหลัก 16 สีซึ่งใช้ในเบราว์เซอร์ทั้งหมด
ชื่อ | สี | ฐานสิบหก | (อาร์จีบี) |
อควา (คลื่นทะเล) | #00FFFF | (000,255,255) | |
สีดำ | #000000 | (000,000,000) | |
สีฟ้า | #0000FF | (000,000,255) | |
บานเย็น (สีม่วงแดง) | #FF00FF | (255,000,255) | |
สีเทา | #808080 | (128,128,128) | |
สีเขียว | #008000 | (000,128,000) | |
มะนาว (สีเขียวสดใส) | #00FF00 | (000,255,000) | |
สีน้ำตาลแดง (เบอร์กันดีเข้ม) | #800000 | (128,000,000) | |
น้ำเงิน (น้ำเงินเข้ม) | #000080 | (000,000,128) | |
มะกอก | #808000 | (128,128,000) | |
สีม่วง | #800080 | (128,000,128) | |
สีแดง | #FF0000 | (255,000,000) | |
เงิน | #C0C0C0 | (192,192,192) | |
ฟ้าอมเขียว (เทา-เขียว) | #008080 | (000,128,128) | |
สีขาว | #FFFFFF | (255,255,255) | |
สีเหลือง | #FFFF00 | (255,255,000) |
โต๊ะ สีม่วงสีและเฉดสีของมัน
ชื่อ | สี | ฐานสิบหก | (อาร์จีบี) |
สีม่วงแดง (สีม่วงแดง) | #FFCBDB | (255,203,219) | |
สีม่วงแดง (สีม่วงแดง) | #FF0099 | (255,000,153) | |
สีม่วงแดง (สีม่วงแดง) | #F95A61 | (249,090,097) | |
สีบานเย็น (บานเย็น) | #FF00FF | (255,000,255) | |
Mauvein (สีม่วงสวรรค์) | #EF0097 | (239,000,151) | |
สีชมพูแซลมอน (สีชมพูส้ม) | #FF91A4 | (255,145,164) | |
Cenise (เฉดสีม่วง) | #DE3163 | (153,149,140) | |
มะเขือม่วง (มะเขือยาว) | #990066 | (153,000,132) | |
Lavender Blush (ชมพู-ลาเวนเดอร์) |  #FFF0F5 | (255,240,245) | |
ไลแลค (ไลแลค) | #C8A2C8 | (200,162,200) | |
สีม่วงแดง (สีม่วงแดง) | #FF008F | (255,000,143) | |
กล้วยไม้ (กล้วยไม้) | #DA70D6 | (218,112,214) | |
แดงม่วง (ม่วงแดง) | #C71585 | (199,021,133) | |
ร่าเริง (ร่าเริง) | #92000A | (146,000,010) | |
Thistle (สีม่วง) | #D8BFD8 | (185,211,238) | |
มะเขือยาวสีม่วง (สีม่วง) | #991199 | (153,017,153) | |
Rosa vivo (สีชมพูเข้ม) | #FF007F | (255,000,127) | |
ลาเวนเดอร์-โรส (สีม่วง) | #FBA0E3 | (108,123,139) | |
เมาท์แบทเทน สีชมพู | #997ABD | (153,122,141) |
โต๊ะ สีเทาสีและเฉดสีของมัน
ชื่อ | สี | ฐานสิบหก | (อาร์จีบี) |
สีเทา | #808080 | (128,128,128) | |
สีเทา | #เบเบ้ | (190,190,190) | |
(สีเทา) | #858585 | (133,133,133) | |
สีเทา33 | #545454 | (084,084,084) | |
(กระดานชนวนสีเทา) | #708090 | (112,128,144) | |
(ควอตซ์) | #99958с | (153,149,140) | |
(สีเทาอ่อน) | #bbbbbb | (187,187,187) | |
(เงิน) | #c0c0c0 | (192,192,192) | |
(เทา-ขาว) | #f0f0f0 | (240,240,240) | |
(เคราของ Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
สีเทาอ่อน (สีเทาอ่อน) | #d3d3d3 | (211,211,211) | |
แสงสถานะสีเทา() | #778899 | (119,136,153) | |
StateGray-1 (สีฟ้าคอร์นฟลาวเวอร์สีซีด1) | #c6e2ff | (198,226,255) | |
StateGray-2 (สีฟ้าคอร์นฟลาวเวอร์สีซีด2) | #b9d3ee | (185,211,238) | |
สเตทเกรย์3() | #9fb6cd | (159,182,205) | |
รัฐGray4() | #6c7b8b | (108,123,139) |
หน้านี้ประกอบด้วยตารางที่มีคำหลักที่สามารถใช้เพื่อกำหนดสีในภาษาของนักพัฒนาเว็บเช่น: HTML, CSS, JavaScript, Flash เป็นต้น
ในข้อกำหนดเก่าสำหรับข้อกังวล WC3 มีการระบุคำหลักเพียง 16 คำเท่านั้น พร้อมด้วยความช่วยเหลือในการตั้งค่าสีใน HTML และ CSS นอกจากนี้ ข้อกำหนดที่ทันสมัยยิ่งขึ้นยังมีการเพิ่มคำหลักอีก 130 คำเพื่อระบุชื่อสี ตารางต่อไปนี้ประกอบด้วยชื่อสี รวมถึงรหัสฐานสิบหกและ RGB ที่ตรงกัน
ตามกฎของ CSS ชื่อสีไม่คำนึงถึงขนาดตัวพิมพ์ รายการสี IndianRed และ indianred เทียบเท่ากัน
นอกจากนี้ ควรสังเกตด้วยว่าจากคำหลัก 146 คำในตาราง จริงๆ แล้วมีสีน้อยกว่า เนื่องจากคำสำคัญบางคำอ้างถึงสีเดียวกัน ดังนั้น ชื่อสีเทาและสีเทาจึงแสดงถึงรหัสสีเทา 50% #808080 และคำว่า Magenta เป็นคำพ้องสำหรับสี HTML สีบานเย็น ซึ่งสอดคล้องกับรหัสเลขฐานสิบหก #FF00FF คำพ้องความหมายคือคำว่า Aqua และ Cyan ซึ่งตรงกับรหัส #00FFFF
|
|