หน้านี้ประกอบด้วยตารางที่มีคำหลักที่สามารถใช้เพื่อแสดงสีในภาษาของนักพัฒนาเว็บเช่น: HTML, CSS, JavaScript, Flash เป็นต้น

ในข้อกำหนดเก่าสำหรับข้อกังวล WC3 มีการระบุคำหลักเพียง 16 คำเท่านั้น พร้อมด้วยความช่วยเหลือในการตั้งค่าสีใน HTML และ CSS นอกจากนี้ ข้อกำหนดที่ทันสมัยยิ่งขึ้นยังมีการเพิ่มคำหลักอีก 130 คำเพื่อระบุชื่อสี ตารางต่อไปนี้ประกอบด้วยชื่อสี รวมถึงรหัสฐานสิบหกและ RGB ที่ตรงกัน

ตามกฎของ CSS ชื่อสีไม่คำนึงถึงขนาดตัวพิมพ์ รายการสี IndianRed และ indianred เทียบเท่ากัน

นอกจากนี้ ควรสังเกตด้วยว่าจากคำหลัก 146 คำในตาราง จริงๆ แล้วมีสีน้อยกว่า เนื่องจากคำสำคัญบางคำอ้างถึงสีเดียวกัน ดังนั้น ชื่อสีเทาและสีเทาจึงแสดงถึงรหัสสีเทา 50% #808080 และคำว่า Magenta เป็นคำพ้องสำหรับสี HTML สีบานเย็น ซึ่งสอดคล้องกับรหัสเลขฐานสิบหก #FF00FF คำพ้องความหมายคือคำว่า Aqua และ Cyan ซึ่งตรงกับรหัส #00FFFF

ชื่อสีใน HTML และ CSS ฐานสิบหก RGB
โทนสีแดง:
อินเดียแดง#CD5C5C205, 92, 92
ไลท์คอรัล#F08080240, 128, 128
แซลมอน#FA8072250, 128, 114
ดาร์กแซลมอน#E9967A233, 150, 122
ไลท์แซลมอน#FFA07A255, 160, 122
สีแดงเข้ม#DC143C220, 20, 60
สีแดง#FF0000255, 0, 0
อิฐไฟ#B22222178, 34, 34
ดำแดง#8B0000139, 0, 0
โทนสีชมพู:
สีชมพู#FFC0CB255, 192, 203
ชมพูอ่อน#FFB6C1255, 182, 193
ฮอตพิงค์#FF69B4255, 105, 180
ดีพพิงค์#FF1493255, 20, 147
ปานกลางสีม่วงแดง#C71585199, 21, 133
สีม่วงอ่อนสีแดง#DB7093219, 112, 147
โทนสีส้ม:
ไลท์แซลมอน#FFA07A255, 160, 122
ปะการัง#FF7F50255, 127, 80
มะเขือเทศ#FF6347255, 99, 71
สีส้มแดง#FF4500255, 69, 0
ส้มเข้ม#FF8C00255, 140, 0
ส้ม#FFA500255, 165, 0
โทนสีเหลือง:
ทอง#FFD700255, 215, 0
สีเหลือง#FFFF00255, 255, 0
เหลืองอ่อน#FFFFE0255, 255, 224
เลมอนชิฟฟอน#FFFACD255, 250, 205
แสงGoldenrodสีเหลือง#ฟาฟาด2250, 250, 210
มะละกอวิป#FFFEFD5255, 239, 213
แตะ#FFE4B5255, 228, 181
พีชพัฟ#FFDAB9255, 218, 185
ซีดโกลเด้นร็อด#EEE8AA238, 232, 170
กากี#F0E68C240, 230, 140
สีกากีเข้ม#BDB76B189, 183, 107
โทนสีม่วง:
ลาเวนเดอร์#E6E6FA230, 230, 250
ดอกธิสเซิล#D8BFD8216, 191, 216
พลัม#DDA0DD221, 160, 221
สีม่วง#EE82EE238, 130, 238
กล้วยไม้#DA70D6218, 112, 214
บานเย็น#FF00FF255, 0, 255
สีม่วงแดง#FF00FF255, 0, 255
กล้วยไม้ขนาดกลาง#BA55D3186, 85, 211
ม่วงกลาง#9370DB147, 112, 219
บลูไวโอเล็ต#8A2BE2138, 43, 226
ดาร์กไวโอเล็ต#9400D3148, 0, 211
ดาร์กออร์คิด#9932CC153, 50, 204
สีม่วงแดงเข้ม#8B008B139, 0, 139
สีม่วง#800080 128, 0, 128
คราม#4B008275, 0, 130
สเลทบลู#6A5ACD106, 90, 205
ดาร์กสเลทบลู#483D8B72, 61, 139
โทนสีน้ำตาล:
คอร์นซิลค์#FFF8DC255, 248, 220
อัลมอนด์ลวก#FFEBCD255, 235, 205
บิสกิต#FFE4C4255, 228, 196
นาวาโฮไวท์#FFDEAD255, 222, 173
ข้าวสาลี#F5DEB3245, 222, 179
เบอร์ลี่วูด#DEB887222, 184, 135
ตาล#D2B48C210, 180, 140
โรซี่บราวน์#BC8F8F188, 143, 143
แซนดี้ บราวน์#F4A460244, 164, 96
โกลเดนร็อด#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
เปรู#CD853F205, 133, 63
ช็อคโกแลต#D2691E210, 105, 30
แซดเดิลบราวน์#8B4513139, 69, 19
เซียนน่า#A0522D160, 82, 45
สีน้ำตาล#A52A2A165, 42, 42
สีน้ำตาลแดง#800000 128, 0, 0
สีหลัก:
สีดำ#000000 0, 0, 0
สีเทา#808080 128, 128, 128
เงิน#C0C0C0192, 192, 192
สีขาว#FFFFFF255, 255, 255
บานเย็น#FF00FF255, 0, 255
สีม่วง#800080 128, 0, 128
สีแดง#FF0000255, 0, 0
สีน้ำตาลแดง#800000 128, 0, 0
สีเหลือง#FFFF00205, 92, 92
มะกอก#808000 240, 128, 128
มะนาว#00FF00250, 128, 114
สีเขียว#008000 233, 150, 122
อควา#00FFFF205, 92, 92
นกเป็ดน้ำ#008080 240, 128, 128
สีฟ้า#0000FF250, 128, 114
กองทัพเรือ#000080 233, 150, 122
ชื่อสีใน HTML และ CSS ฐานสิบหก RGB
โทนสีเขียว:
เขียว เหลือง#ADFF2F173, 255, 47
ชาร์ต#7FFF00127, 255, 0
สนามหญ้าสีเขียว#7CFC00124, 252, 0
มะนาว#00FF000, 255, 0
ไลม์กรีน#32CD3250, 205, 50
สีเขียวอ่อน#98FB98152, 251, 152
สีเขียวอ่อน#90EE90144, 238, 144
ปานกลางSpringGreen#00FA9A0, 250, 154
สปริงกรีน#00FF7F0, 255, 127
ปานกลางSeaGreen#3CB37160, 179, 113
ทะเลเขียว#2E8B5746, 139, 87
ป่าเขียว#228B2234, 139, 34
สีเขียว#008000 0, 128, 0
เขียวเข้ม#006400 0, 100, 0
เหลืองเขียว#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
มะกอก#808000 128, 128, 0
เข้มOliveGreen#556B2F85, 107, 47
ปานกลางอะความารีน#66ซีดีเอเอ102, 205, 170
ดาร์กซีกรีน#8FBC8F143, 188, 143
ไลท์ซีกรีน#20B2AA32, 178, 170
ดาร์กไซอัน#008B8B0, 139, 139
นกเป็ดน้ำ#008080 0, 128, 128
โทนสีฟ้า:
อควา#00FFFF0, 255, 255
สีฟ้า#00FFFF0, 255, 255
สีฟ้าอ่อน#E0FFFF224, 255, 255
สีฟ้าเทอร์ควอยซ์#อาฟฟี่175, 238, 238
อความารีน#7FFFD4127, 255, 212
เทอร์ควอยซ์#40E0D064, 224, 208
ปานกลางเทอร์ควอยซ์#48D1CC72, 209, 204
ดาร์กเทอร์ควอยซ์#00CED10, 206, 209
นักเรียนนายร้อยสีน้ำเงิน#5F9EA095, 158, 160
สตีลบลู#4682B470, 130, 180
ไลท์สตีลบลู#B0C4DE176, 196, 222
ผงสีฟ้า#B0E0E6176, 224, 230
ฟ้าอ่อน#ADD8E6173, 216, 230
ท้องฟ้าสีคราม#87CEEB135, 206, 235
ไลท์สกายบลู#87CEFA135, 206, 250
ดีพสกายบลู#00BFFF0, 191, 255
ดอดเจอร์ บลู#1E90FF30, 144, 255
ดอกไม้ชนิดหนึ่งสีฟ้า#6495ED100, 149, 237
ปานกลางSlateBlue#7B68EE123, 104, 238
รอยัลบลู#4169E165, 105, 225
สีฟ้า#0000FF0, 0, 255
ปานกลางบลู#0000ซีดี0, 0, 205
น้ำเงิน#00008B0, 0, 139
กองทัพเรือ#000080 0, 0, 128
มิดไนท์บลู#191970 25, 25, 112
โทนสีขาว:
สีขาว#FFFFFF255, 255, 255
หิมะ#FFFAFA255, 250, 250
ฮันนี่ดิว#F0FFF0240, 255, 240
มิ้นท์ครีม#F5FFFA245, 255, 250
สีฟ้า#F0FFFF240, 255, 255
อลิซบลู#F0F8FF240, 248, 255
โกสต์ไวท์#F8F8FF248, 248, 255
สีขาวควัน#F5F5F5245, 245, 245
เปลือกหอย#FFF5EE255, 245, 238
สีเบจ#F5F5DC245, 245, 220
OldLace#FDF5E6253, 245, 230
ดอกไม้สีขาว#FFFAF0255, 250, 240
งาช้าง#FFFFFF0255, 255, 240
โบราณสีขาว#FAEBD7250, 235, 215
ผ้าลินิน#FAF0E6250, 240, 230
ลาเวนเดอร์บลัชออน#FFF0F5255, 240, 245
มิสตี้โรส#FFE4E1255, 228, 225
โทนสีเทา:
เกนส์โบโร#DCDCDC220, 220, 220
แสงสีเทา#D3D3D3211, 211, 211
แสงสีเทา#D3D3D3211, 211, 211
เงิน#C0C0C0192, 192, 192
เทาเข้ม#A9A9A9169, 169, 169
เทาเข้ม#A9A9A9169, 169, 169
สีเทา#808080 128, 128, 128
สีเทา#808080 128, 128, 128
ดิมเกรย์#696969 105, 105, 105
ดิมเกรย์#696969 105, 105, 105
ไลท์สเลทเกรย์#778899 119, 136, 153
ไลท์สเลทเกรย์#778899 119, 136, 153
สเลทเกรย์#708090 112, 128, 144
สเลทเกรย์#708090 112, 128, 144
DarkSlateGray#2F4F4F47, 79, 79
ดาร์กสเลทเกรย์#2F4F4F47, 79, 79
สีดำ#000000 0, 0, 0

ตาราง (จานสี) สี 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

เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 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 และคำอธิบาย

โต๊ะ 1. ชื่อสี
ชื่อ สี รหัส 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.สีบนหน้าเว็บ

สี 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