รหัสไลแลค กวดวิชา HTML สี RGB จานสีที่ปลอดภัย สี CSS - ค่า RGB
ตาราง (จานสี) สี htmlเปิดโอกาสให้คุณเลือกโทนเสียงที่คุณต้องการได้อย่างอิสระ ค่าสีจะแสดงในสามรูปแบบ: Hex, RGB และ HSV
- Hex ประกอบด้วยค่าสองอักขระสามค่าในระบบเลขฐานสิบหก ตัวอย่างเช่น: #ff00b3 โดยที่ตัวเลขคู่แรกเป็นสีแดง คู่ที่สองเป็นสีเขียว และคู่ที่สามเป็นสีน้ำเงิน
- RGB (RedGreenBlue) มีรูปแบบ "200,100,255" ซึ่งระบุปริมาณของโทนสีที่สอดคล้องกัน (แดง เขียว น้ำเงิน) ในสีผลลัพธ์
- HSV (ฮิว, ความอิ่มตัว, ค่า - โทนสี, ความอิ่มตัว, ค่า) - โมเดลสีซึ่งมีพิกัดดังนี้:
- ฮิว - โทนสี สามารถเปลี่ยนแปลงได้ตั้งแต่ 0° ถึง 360°
- ความอิ่มตัว - ความอิ่มตัวแตกต่างกันไปตั้งแต่ 0-100 หรือ 0-1 ยิ่งพารามิเตอร์นี้สูง สีก็จะยิ่ง “บริสุทธิ์” ซึ่งเป็นสาเหตุที่บางครั้งเรียกว่าพารามิเตอร์นี้ว่าความบริสุทธิ์ของสี และยิ่งพารามิเตอร์นี้เข้าใกล้ศูนย์มากเท่าไร สีก็จะยิ่งเข้าใกล้สีเทากลางมากขึ้นเท่านั้น
- ค่า (ค่าสี) - ตั้งค่าความสว่าง ค่าอาจแตกต่างกันระหว่าง 0-100 หรือ 0-1
ใส่รหัสสี: ไป
รายการสีพร้อมชื่อ
ตารางจะแสดงชื่อสีภาษาอังกฤษ (ซึ่งสามารถใช้เป็นค่าได้) ที่เบราว์เซอร์ทั้งหมดรองรับและค่าเลขฐานสิบหก สีทั้งหมดที่แสดงเป็นสี “ปลอดภัย” ซึ่งหมายความว่าสีจะปรากฏเหมือนกันในทุกเบราว์เซอร์
| ชื่อสี | ฐานสิบหก | สี |
|---|---|---|
| สีดำ | #000000 | |
| กองทัพเรือ | #000080 | |
| น้ำเงิน | #00008B | |
| ฟ้ากลาง | #0000ซีดี | |
| สีฟ้า | #0000FF | |
| เขียวเข้ม | #006400 | |
| สีเขียว | #008000 | |
| นกเป็ดน้ำ | #008080 | |
| ดาร์กไซอัน | #008B8B | |
| ดีพสกายบลู | #00BFFF | |
| ดาร์กเทอร์ควอยซ์ | #00CED1 | |
| ปานกลางSpringGreen | #00FA9A | |
| มะนาว | #00FF00 | |
| สปริงกรีน | #00FF7F | |
| อควา | #00FFFF | |
| สีฟ้า | #00FFFF | |
| มิดไนท์บลู | #191970 | |
| ดอดเจอร์บลู | #1E90FF | |
| ไลท์ซีกรีน | #20B2AA | |
| ป่าเขียว | #228B22 | |
| ทะเลเขียว | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| ไลม์กรีน | #32CD32 | |
| ปานกลางSeaGreen | #3CB371 | |
| เทอร์ควอยซ์ | #40E0D0 | |
| รอยัลบลู | #4169E1 | |
| สตีลบลู | #4682B4 | |
| ดาร์กสเลทบลู | #483D8B | |
| ปานกลางเทอร์ควอยซ์ | #48D1CC | |
| คราม | #4B0082 | |
| เข้มOliveGreen | #556B2F | |
| นักเรียนนายร้อยบลู | #5F9EA0 | |
| ดอกไม้ชนิดหนึ่งสีฟ้า | #6495ED | |
| ปานกลางอความารีน | #66ซีดีเอเอ | |
| ดิมเกรย์ | #696969 | |
| สเลทบลู | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| สเลทเกรย์ | #708090 | |
| ไลท์สเลทเกรย์ | #778899 | |
| ปานกลางSlateBlue | #7B68EE | |
| สนามหญ้าสีเขียว | #7CFC00 | |
| ชาร์ต | #7FFF00 | |
| อความารีน | #7FFFD4 | |
| สีน้ำตาลแดง | #800000 | |
| สีม่วง | #800080 | |
| มะกอก | #808000 | |
| สีเทา | #808080 | |
| ท้องฟ้าสีคราม | #87CEEB | |
| ไลท์สกายบลู | #87CEFA | |
| บลูไวโอเล็ต | #8A2BE2 | |
| ดำแดง | #8B0000 | |
| สีม่วงแดงเข้ม | #8B008B | |
| แซดเดิลบราวน์ | #8B4513 | |
| ดาร์กซีกรีน | #8FBC8F | |
| สีเขียวอ่อน | #90EE90 | |
| ม่วงกลาง | #9370D8 | |
| ดาร์กไวโอเล็ต | #9400D3 | |
| สีเขียวอ่อน | #98FB98 | |
| ดาร์กออร์คิด | #9932CC | |
| เหลืองเขียว | #9ACD32 | |
| เซียนน่า | #A0522D | |
| สีน้ำตาล | #A52A2A | |
| เทาเข้ม | #A9A9A9 | |
| ฟ้าอ่อน | #ADD8E6 | |
| เขียว เหลือง | #ADFF2F | |
| สีฟ้าเทอร์ควอยซ์ | #อาฟฟี่ | |
| ไลท์สตีลบลู | #B0C4DE | |
| ผงสีฟ้า | #B0E0E6 | |
| อิฐไฟ | #B22222 | |
| DarkGoldenRod | #B8860B | |
| กล้วยไม้ขนาดกลาง | #BA55D3 | |
| โรซี่บราวน์ | #BC8F8F | |
| สีกากีเข้ม | #BDB76B | |
| เงิน | #C0C0C0 | |
| ปานกลางสีม่วงแดง | #C71585 | |
| อินเดียแดง | #CD5C5C | |
| เปรู | #CD853F | |
| ช็อคโกแลต | #D2691E | |
| ตาล | #D2B48C | |
| แสงสีเทา | #D3D3D3 | |
| สีม่วงอ่อนสีแดง | #D87093 | |
| ดอกธิสเซิล | #D8BFD8 | |
| กล้วยไม้ | #DA70D6 | |
| โกลเด้นร็อด | #DAA520 | |
| สีแดงเข้ม | #DC143C | |
| เกนส์โบโร | #DCDCDC | |
| พลัม | #DDA0DD | |
| เบอร์ลี่วูด | #DEB887 | |
| สีฟ้าอ่อน | #E0FFFF | |
| ลาเวนเดอร์ | #E6E6FA | |
| ดาร์กแซลมอน | #E9967A | |
| สีม่วง | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| ไลท์คอรัล | #F08080 | |
| กากี | #F0E68C | |
| อลิซบลู | #F0F8FF | |
| ฮันนี่ดิว | #F0FFF0 | |
| สีฟ้า | #F0FFFF | |
| แซนดี้ บราวน์ | #F4A460 | |
| ข้าวสาลี | #F5DEB3 | |
| สีเบจ | #F5F5DC | |
| สีขาวควัน | #F5F5F5 | |
| มิ้นท์ครีม | #F5FFFA | |
| โกสต์ไวท์ | #F8F8FF | |
| แซลมอน | #FA8072 | |
| โบราณสีขาว | #FAEBD7 | |
| ผ้าลินิน | #FAF0E6 | |
| แสงโกลเด้นร็อดสีเหลือง | #ฟาฟาด2 | |
| OldLace | #FDF5E6 | |
| สีแดง | #FF0000 | |
| บานเย็น | #FF00FF | |
| สีม่วงแดง | #FF00FF | |
| ดีพพิงค์ | #FF1493 | |
| สีส้มแดง | #FF4500 | |
| มะเขือเทศ | #FF6347 | |
| ฮอตพิงค์ | #FF69B4 | |
| ปะการัง | #FF7F50 | |
| ส้มเข้ม | #FF8C00 | |
| ไลท์แซลมอน | #FFA07A | |
| ส้ม | #FFA500 | |
| ชมพูอ่อน | #FFB6C1 | |
| สีชมพู | #FFC0CB | |
| ทอง | #FFD700 | |
| พีชพัฟ | #FFDAB9 | |
| นาวาโฮไวท์ | #FFDEAD | |
| แตะ | #FFE4B5 | |
| บิสกิต | #FFE4C4 | |
| มิสตี้โรส | #FFE4E1 | |
| อัลมอนด์ลวก | #FFEBCD | |
| มะละกอวิป | #FFFEFD5 | |
| ลาเวนเดอร์บลัชออน | #FFF0F5 | |
| เปลือกหอย | #FFF5EE | |
| คอร์นซิลค์ | #FFF8DC | |
| เลมอนชิฟฟอน | #FFFACD | |
| ดอกไม้สีขาว | #FFFAF0 | |
| หิมะ | #FFFAFA | |
| สีเหลือง | #FFFF00 | |
| เหลืองอ่อน | #FFFFE0 | |
| งาช้าง | #FFFFFF0 | |
| สีขาว | #FFFFFF |
สี 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 |
สำหรับหน้า html สีจะถูกระบุในระบบเลขฐานสิบหกเป็นหลัก ในการดำเนินการนี้ จะใช้การบันทึกโค้ดสองประเภท - แบบสมบูรณ์หรือแบบย่อ หากต้องการระบุสี html ให้ครบถ้วนอย่างถูกต้อง คุณต้องเขียนอักขระหกตัว (ตัวเลขและ/หรือตัวอักษรภาษาอังกฤษ) หลังเครื่องหมายแฮช เช่น สีดำจะเขียนดังนี้: #000000 ชวเลขสำหรับระบุสี html ประกอบด้วยแฮชและตัวเลขและ/หรือตัวอักษรสามตัวที่อยู่ด้านหลัง อย่างไรก็ตาม หุ้นประเภทนี้สามารถใช้ได้ก็ต่อเมื่อบันทึกที่สมบูรณ์ของสีที่กำหนดประกอบด้วยสัญลักษณ์ที่เหมือนกันหลังเครื่องหมายแฮช ตัวอย่างเช่น สีดำเดียวกันสามารถเขียนได้ดังนี้: #000 คุณสามารถระบุสี html โดยใช้ทั้งอักขระขนาดใหญ่และขนาดเล็กได้ เนื่องจากไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
อักขระแต่ละตัวที่เขียนตามหลัง "#" จะสอดคล้องกับสัดส่วนของสีแดง เขียว และน้ำเงิน ในทางกลับกัน จอภาพทั้งหมดประกอบด้วยพิกเซลจำนวนมาก (จุดกล้องจุลทรรศน์) ซึ่งแต่ละพิกเซลมี 3 ที่เรียกว่า "ไฟฉาย" (แหล่งกำเนิดแสง): สีแดง สีเขียว และสีน้ำเงิน จากนั้นด้วยการปรับความเข้มของแสงที่ปล่อยออกมาจาก "ไฟฉาย" เหล่านี้ จอภาพจะแสดงสีที่เราต้องการ
ด้วยการรวมความเข้มของการปล่อยแสงสีแดง น้ำเงิน และเขียว (ตั้งแต่ 0 ถึง 256) จอภาพจึงสามารถแสดงเฉดสีที่แตกต่างกันได้ 16,000,000 เฉด
นอกจากนี้ สีสำหรับเว็บไซต์ยังสามารถระบุด้วยวาจาหรือในโค้ด RGB ได้อีกด้วย
ปัจจุบัน 147 สีสามารถเขียนได้ด้วยวาจา สิ่งสำคัญคือต้องทราบว่าชื่อที่แตกต่างกันบางชื่ออาจหมายถึงสีเดียวกัน เช่น สีเทาและสีเทาเป็นสีเทา (#808080)
สีที่ปลอดภัยสำหรับเว็บไซต์
ไม่ใช่ทุกจอภาพและเบราว์เซอร์ที่สามารถแสดงสี html ทั้งหมด 16 ล้านสีได้อย่างถูกต้อง
ตัวอย่างเช่น หากคุณพบสีที่เบราว์เซอร์ไม่สามารถแสดงได้อย่างถูกต้อง ดังนั้น:
- เบราว์เซอร์จะแทนที่ด้วยเบราว์เซอร์ที่คล้ายกับเบราว์เซอร์มากที่สุดและสามารถทำซ้ำได้สำเร็จ
- เพื่อให้แสดงได้อย่างถูกต้อง เบราว์เซอร์สามารถผสมหลายสีและสร้างผลลัพธ์ขึ้นมาใหม่ได้
เพื่อให้แน่ใจว่าเอาต์พุตในเบราว์เซอร์และจอภาพใดๆ เป็นสีที่คุณระบุในโค้ด ขอแนะนำให้ใช้ "สีที่ปลอดภัย" สิ่งเหล่านี้ไม่ได้ถูกกำหนดด้วยตนเองหรือโดยความปรารถนาของผู้อื่น แต่ถูกกำหนดโดยทางคณิตศาสตร์ มีสีที่ปลอดภัย 100% ถึง 216 สีสำหรับเอกสาร HTML และแม้ว่าเทคโนโลยีในปัจจุบันจะถึงจุดที่จอภาพและเบราว์เซอร์สมัยใหม่สามารถจดจำเฉดสีได้นับล้านสี
| ระบบสีเลขฐานสิบหก | รหัสสีใน RGB (แดง, เขียว, น้ำเงิน) |
| รหัสสี HTML: #000000 | สี RGB: 0 0 0 |
| รหัสสี HTML: #333333 | สี RGB: 51 51 51 |
| รหัสสี HTML: #666666 | สี RGB: 102 102 102 |
| รหัสสี HTML: #999999 | สี RGB: 153 153 153 |
| รหัสสี HTML: #CCCCCC | สี RGB: 204 204 204 |
| รหัสสี HTML: #FFFFFF | สี RGB: 255 255 255 |
| รหัสสี HTML: #666600 | สี RGB: 102 102 0 |
| รหัสสี HTML: #999900 | สี RGB: 153 153 0 |
| รหัสสี HTML: #999933 | สี RGB: 153 153 51 |
| รหัสสี HTML: #999966 | สี RGB: 153 153 102 |
| รหัสสี HTML: #CCCC33 | สี RGB: 204 204 51 |
| รหัสสี HTML: #CCCC66 | สี RGB: 204 204 102 |
| รหัสสี HTML: #333300 | สี RGB: 51 51 0 |
| รหัสสี HTML: #666633 | สี RGB: 102 102 51 |
| รหัสสี HTML: #CCCC99 | สี RGB: 204 204 153 |
| รหัสสี HTML: #CCFF33 | สี RGB: 204 255 51 |
| รหัสสี HTML: #CCFF00 | สี RGB: 204 255 0 |
| รหัสสี HTML: #CCFF66 | สี RGB: 204 255 102 |
| รหัสสี HTML: #669900 | สี RGB: 102 153 0 |
| รหัสสี HTML: #99CC33 | สี RGB: 153 204 51 |
| รหัสสี HTML: #99CC00 | สี RGB: 153 204 0 |
| รหัสสี HTML: #99CC66 | สี RGB: 153 204 102 |
| รหัสสี HTML: #99FF33 | สี RGB: 153 255 51 |
| รหัสสี HTML: #99FF00 | สี RGB: 153 255 0 |
| รหัสสี HTML: #336600 | สี RGB: 51 102 0 |
| รหัสสี HTML: #669933 | สี RGB: 102 153 51 |
| รหัสสี HTML: #66CC33 | สี RGB: 102 204 51 |
| รหัสสี HTML: #66CC00 | สี RGB: 102 204 0 |
| รหัสสี HTML: #99FF66 | สี RGB: 153 255 102 |
| รหัสสี HTML: #CCFF99 | สี RGB: 204 255 153 |
| รหัสสี HTML: #009900 | สี RGB: 0 153 0 |
| รหัสสี HTML: #339900 | สี RGB: 51 153 0 |
| รหัสสี HTML: #33CC00 | สี RGB: 51 204 0 |
| รหัสสี HTML: #33FF00 | สี RGB: 51 255 0 |
| รหัสสี HTML: #66FF33 | สี RGB: 102 255 51 |
| รหัสสี HTML: #66FF00 | สี RGB: 102 255 0 |
| รหัสสี HTML: #00CC33 | สี RGB: 0 204 51 |
| รหัสสี HTML: #33CC33 | สี RGB: 51 204 51 |
| รหัสสี HTML: #00CC00 | สี RGB: 0 204 0 |
| รหัสสี HTML: #00FF00 | สี RGB: 0 255 0 |
| รหัสสี HTML: #00FF33 | สี RGB: 0 255 51 |
| รหัสสี HTML: #33FF33 | สี RGB: 51 255 51 |
| รหัสสี HTML: #003300 | สี RGB: 0 51 0 |
| รหัสสี HTML: #336633 | สี RGB: 51 102 51 |
| รหัสสี HTML: #669966 | สี RGB: 102 153 102 |
| รหัสสี HTML: #66CC66 | สี RGB: 102 204 102 |
| รหัสสี HTML: #99CC99 | สี RGB: 153 204 153 |
| รหัสสี HTML: #CCFFCC | สี RGB: 204 255 204 |
| รหัสสี HTML: #006600 | สี RGB: 0 102 0 |
| รหัสสี HTML: #339933 | สี RGB: 51 153 51 |
| รหัสสี HTML: #00FF66 | สี RGB: 0 255 102 |
| รหัสสี HTML: #33FF66 | สี RGB: 51 255 102 |
| รหัสสี HTML: #66FF66 | สี RGB: 102 255 102 |
| รหัสสี HTML: #99FF99 | สี RGB: 153 255 153 |
| รหัสสี HTML: #009933 | สี RGB: 0 153 51 |
| รหัสสี HTML: #00CC66 | สี RGB: 0 204 102 |
| รหัสสี HTML: #33CC66 | สี RGB: 51 204 102 |
| รหัสสี HTML: #00FF99 | สี RGB: 0 255 153 |
| รหัสสี HTML: #33FF99 | สี RGB: 51 255 153 |
| รหัสสี HTML: #66FF99 | สี RGB: 102 255 153 |
| รหัสสี HTML: #006633 | สี RGB: 0 102 51 |
| รหัสสี HTML: #009966 | สี RGB: 0 153 102 |
| รหัสสี HTML: #339966 | สี RGB: 51 153 102 |
| รหัสสี HTML: #00CC99 | สี RGB: 0 204 153 |
| รหัสสี HTML: #33CC99 | สี RGB: 51 204 153 |
| รหัสสี HTML: #66CC99 | สี RGB: 102 204 153 |
| รหัสสี HTML: #009999 | สี RGB: 0 153 153 |
| รหัสสี HTML: #33CCCC | สี RGB: 51 204 204 |
| รหัสสี HTML: #00FFCC | สี RGB: 0 255 204 |
| รหัสสี HTML: #33FFCC | สี RGB: 51 255 204 |
| รหัสสี HTML: #66FFCC | สี RGB: 102 255 204 |
| รหัสสี HTML: #99FFCC | สี RGB: 153 255 204 |
| รหัสสี HTML: #00CCCC | สี RGB: 0 204 204 |
| รหัสสี HTML: #00FFFF | สี RGB: 0 255 255 |
| รหัสสี HTML: #33FFFF | สี RGB: 51 255 255 |
| รหัสสี HTML: #66FFFF | สี RGB: 102 255 255 |
| รหัสสี HTML: #99FFFF | สี RGB: 153 255 255 |
| รหัสสี HTML: #CCFFFF | สี RGB: 204 255 255 |
| รหัสสี HTML: #336666 | สี RGB: 51 102 102 |
| รหัสสี HTML: #006666 | สี RGB: 0 102 102 |
| รหัสสี HTML: #669999 | สี RGB: 102 153 153 |
| รหัสสี HTML: #339999 | สี RGB: 51 153 153 |
| รหัสสี HTML: #66CCCC | สี RGB: 102 204 204 |
| รหัสสี HTML: #99CCCC | สี RGB: 153 204 204 |
| รหัสสี HTML: #003333 | สี RGB: 0 51 51 |
| รหัสสี HTML: #0099CC | สี RGB: 0 153 204 |
| รหัสสี HTML: #3399CC | สี RGB: 51 153 204 |
| รหัสสี HTML: #00CCFF | สี RGB: 0 204 255 |
| รหัสสี HTML: #33CCFF | สี RGB: 51 204 255 |
| รหัสสี HTML: #66CCFF | สี RGB: 102 204 255 |
| รหัสสี HTML: #006699 | สี RGB: 0 102 153 |
| รหัสสี HTML: #336699 | สี RGB: 51 102 153 |
| รหัสสี HTML: #6699CC | สี RGB: 102 153 204 |
| รหัสสี HTML: #0099FF | สี RGB: 0 153 255 |
| รหัสสี HTML: #3399FF | สี RGB: 51 153 255 |
| รหัสสี HTML: #99CCFF | สี RGB: 153 204 255 |
| รหัสสี HTML: #003366 | สี RGB: 0 51 102 |
| รหัสสี HTML: #003399 | สี RGB: 0 51 153 |
| รหัสสี HTML: #0033FF | สี RGB: 0 51 255 |
| รหัสสี HTML: #3366CC | สี RGB: 51 102 204 |
| รหัสสี HTML: #0066CC | สี RGB: 0 102 204 |
| รหัสสี HTML: #0066FF | สี RGB: 0 102 255 |
| รหัสสี HTML: #000033 | สี RGB: 0 0 51 |
| รหัสสี HTML: #0033CC | สี RGB: 0 51 204 |
| รหัสสี HTML: #0000CC | สี RGB: 0 0 204 |
| รหัสสี HTML: #0000FF | สี RGB: 0 0 255 |
| รหัสสี HTML: #3366FF | สี RGB: 51 102 255 |
| รหัสสี HTML: #6699FF | สี RGB: 102 153 255 |
| รหัสสี HTML: #000066 | สี RGB: 0 0 102 |
| รหัสสี HTML: #000099 | สี RGB: 0 0 153 |
| รหัสสี HTML: #3333CC | สี RGB: 51 51 204 |
| รหัสสี HTML: #3300CC | สี RGB: 51 0 204 |
| รหัสสี HTML: #3300FF | สี RGB: 51 0 255 |
| รหัสสี HTML: #3333FF | สี RGB: 51 51 255 |
| รหัสสี HTML: #333366 | สี RGB: 51 51 102 |
| รหัสสี HTML: #333399 | สี RGB: 51 51 153 |
| รหัสสี HTML: #666699 | สี RGB: 102 102 153 |
| รหัสสี HTML: #6666CC | สี RGB: 102 102 204 |
| รหัสสี HTML: #6666FF | สี RGB: 102 102 255 |
| รหัสสี HTML: #9999CC | สี RGB: 153 153 204 |
| รหัสสี HTML: #330066 | สี RGB: 51 0 102 |
| รหัสสี HTML: #330099 | สี RGB: 51 0 153 |
| รหัสสี HTML: #6600FF | สี RGB: 102 0 255 |
| รหัสสี HTML: #6633FF | สี RGB: 102 51 255 |
| รหัสสี HTML: #9999FF | สี RGB: 153 153 255 |
| รหัสสี HTML: #CCCCFF | สี RGB: 204 204 255 |
| รหัสสี HTML: #330033 | สี RGB: 51 0 51 |
| รหัสสี HTML: #663399 | สี RGB: 102 51 153 |
| รหัสสี HTML: #6633CC | สี RGB: 102 51 204 |
| รหัสสี HTML: #6600CC | สี RGB: 102 0 204 |
| รหัสสี HTML: #9966FF | สี RGB: 153 102 255 |
| รหัสสี HTML: #9966CC | สี RGB: 153 102 204 |
| รหัสสี HTML: #663366 | สี RGB: 102 51 102 |
| รหัสสี HTML: #660099 | สี RGB: 102 0 153 |
| รหัสสี HTML: #9900FF | สี RGB: 153 0 255 |
| รหัสสี HTML: #9933FF | สี RGB: 153 51 255 |
| รหัสสี HTML: #9933CC | สี RGB: 153 51 204 |
| รหัสสี HTML: #CC99FF | สี RGB: 204 153 255 |
| รหัสสี HTML: #660066 | สี RGB: 102 0 102 |
| รหัสสี HTML: #996699 | สี RGB: 153 102 153 |
| รหัสสี HTML: #9900CC | สี RGB: 153 0 204 |
| รหัสสี HTML: #CC00FF | สี RGB: 204 0 255 |
| รหัสสี HTML: #CC33FF | สี RGB: 204 51 255 |
| รหัสสี HTML: #CC66FF | สี RGB: 204 102 255 |
| รหัสสี HTML: #993399 | สี RGB: 153 51 153 |
| รหัสสี HTML: #990099 | สี RGB: 153 0 153 |
| รหัสสี HTML: #CC33CC | สี RGB: 204 51 204 |
| รหัสสี HTML: #CC00CC | สี RGB: 204 0 204 |
| รหัสสี HTML: #CC66CC | สี RGB: 204 102 204 |
| รหัสสี HTML: #CC99CC | สี RGB: 204 153 204 |
| รหัสสี HTML: #CC3399 | สี RGB: 204 51 153 |
| รหัสสี HTML: #FF00FF | สี RGB: 255 0 255 |
| รหัสสี HTML: #FF33FF | สี RGB: 255 51 255 |
| รหัสสี HTML: #FF66FF | สี RGB: 255 102 255 |
| รหัสสี HTML: #FF99FF | สี RGB: 255 153 255 |
| รหัสสี HTML: #FFCCFF | สี RGB: 255 204 255 |
| รหัสสี HTML: #990066 | สี RGB: 153 0 102 |
| รหัสสี HTML: #CC0099 | สี RGB: 204 0 153 |
| รหัสสี HTML: #CC6699 | สี RGB: 204 102 153 |
| รหัสสี HTML: #FF33CC | สี RGB: 255 51 204 |
| รหัสสี HTML: #FF00CC | สี RGB: 255 0 204 |
| รหัสสี HTML: #FF66CC | สี RGB: 255 102 204 |
| รหัสสี HTML: #660033 | สี RGB: 102 0 51 |
| รหัสสี HTML: #993366 | สี RGB: 153 51 102 |
| รหัสสี HTML: #CC0066 | สี RGB: 204 0 102 |
| รหัสสี HTML: #FF0099 | สี RGB: 255 0 153 |
| รหัสสี HTML: #FF3399 | สี RGB: 255 51 153 |
| รหัสสี HTML: #FF99CC | สี RGB: 255 153 204 |
| รหัสสี HTML: #663333 | สี RGB: 102 51 51 |
| รหัสสี HTML: #996666 | สี RGB: 153 102 102 |
| รหัสสี HTML: #CC3366 | สี RGB: 204 51 102 |
| รหัสสี HTML: #FF0066 | สี RGB: 255 0 102 |
| รหัสสี HTML: #FF3366 | สี RGB: 255 51 102 |
| รหัสสี HTML: #FF6699 | สี RGB: 255 102 153 |
| รหัสสี HTML: #330000 | สี RGB: 51 0 0 |
| รหัสสี HTML: #990033 | สี RGB: 153 0 51 |
| รหัสสี HTML: #993333 | สี RGB: 153 51 51 |
| รหัสสี HTML: #CC3333 | สี RGB: 204 51 51 |
| รหัสสี HTML: #CC6666 | สี RGB: 204 102 102 |
| รหัสสี HTML: #CC9999 | สี RGB: 204 153 153 |
| รหัสสี HTML: #CC0033 | สี RGB: 204 0 51 |
| รหัสสี HTML: #FF0033 | สี RGB: 255 0 51 |
| รหัสสี HTML: #FF3333 | สี RGB: 255 51 51 |
| รหัสสี HTML: #FF6666 | สี RGB: 255 102 102 |
| รหัสสี HTML: #FF9999 | สี RGB: 255 153 153 |
| รหัสสี HTML: #FFCCCC | สี RGB: 255 204 204 |
| รหัสสี HTML: #990000 | สี RGB: 153 0 0 |
| รหัสสี HTML:#CC0000 | สี RGB: 204 0 0 |
| รหัสสี HTML: #FF0000 | สี RGB: 255 0 0 |
| รหัสสี HTML: #FF3300 | สี RGB: 255 51 0 |
| รหัสสี HTML: #CC3300 | สี RGB: 204 51 0 |
| รหัสสี HTML: #FF6633 | สี RGB: 255 102 51 |
| รหัสสี HTML: #660000 | สี RGB: 102 0 0 |
| รหัสสี HTML: #993300 | สี RGB: 153 51 0 |
| รหัสสี HTML: #CC6633 | สี RGB: 204 102 51 |
| รหัสสี HTML: #FF6600 | สี RGB: 255 102 0 |
| รหัสสี HTML: #FF9966 | สี RGB: 255 153 102 |
| รหัสสี HTML: #FFCC99 | สี RGB: 255 204 153 |
| รหัสสี HTML: #663300 | สี RGB: 102 51 0 |
| รหัสสี HTML: #996633 | สี RGB: 153 102 51 |
| รหัสสี HTML: #CC6600 | สี RGB: 204 102 0 |
| รหัสสี HTML: #CC9966 | สี RGB: 204 153 102 |
| รหัสสี HTML: #FF9933 | สี RGB: 255 153 51 |
| รหัสสี HTML: #FF9900 | สี RGB: 255 153 0 |
| รหัสสี HTML: #996600 | สี RGB: 153 102 0 |
| รหัสสี HTML: #CC9933 | สี RGB: 204 153 51 |
| รหัสสี HTML: #CC9900 | สี RGB: 204 153 0 |
| รหัสสี HTML: #FFCC33 | สี RGB: 255 204 51 |
| รหัสสี HTML: #FFCC00 | สี RGB: 255 204 0 |
| รหัสสี HTML: #FFCC66 | สี RGB: 255 204 102 |
| รหัสสี HTML: #CCCC00 | สี RGB: 204 204 0 |
| รหัสสี HTML: #FFFF00 | สี RGB: 255 255 0 |
| รหัสสี HTML: #FFFF33 | สี RGB: 255 255 51 |
| รหัสสี HTML: #FFFF66 | สี RGB: 255 255 102 |
| รหัสสี HTML: #FFFF99 | สี RGB: 255 255 153 |
| รหัสสี HTML: #FFFFCC | สี RGB: 255 255 204 |
ตารางนี้ประกอบด้วยรหัสสี html ที่ปลอดภัย 216 รหัส แต่ละสีมีค่าเป็น RGB สำหรับระบุสีในโปรแกรมแก้ไขกราฟิก และ HEX สำหรับระบุสีในหน้า html
เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 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.สีบนหน้าเว็บ
มีหลายวิธีในการแสดงสีในการออกแบบเว็บ
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) |
