สีffff. สีในรูปแบบสามารถระบุได้หลายวิธี: ตามค่าเลขฐานสิบหก, ตามชื่อ, ในรูปแบบ RGB, RGBA, HSL, HSLA
ใน HTML สามารถระบุสีได้สามวิธี:
การตั้งค่าสีใน HTML ตามชื่อของมัน
สีบางสีสามารถระบุได้ด้วยชื่อ โดยใช้ชื่อสีในภาษาอังกฤษเป็นค่า คำสำคัญที่พบบ่อยที่สุด: ดำ, ขาว, แดง, เขียว, น้ำเงิน ฯลฯ:
สีข้อความ – สีแดง
สียอดนิยมของมาตรฐาน World Wide Web Consortium (W3C):
| สี | ชื่อ | สี | ชื่อ | สี | ชื่อ | สี | ชื่อ |
|---|---|---|---|---|---|---|---|
| สีดำ | สีเทา | เงิน | สีขาว | ||||
| สีเหลือง | มะนาว | อควา | บานเย็น | ||||
| สีแดง | สีเขียว | สีฟ้า | สีม่วง | ||||
| สีน้ำตาลแดง | มะกอก | กองทัพเรือ | นกเป็ดน้ำ |
ตัวอย่างการใช้ชื่อสีต่างๆ:
ตัวอย่าง: การระบุสีตามชื่อ
- ลองด้วยตัวเอง"
เฮดเดอร์บนพื้นหลังสีแดง
ส่วนหัวบนพื้นหลังสีส้ม
มุ่งหน้าสู่พื้นหลังมะนาว
ข้อความสีขาวบนพื้นหลังสีน้ำเงิน
เฮดเดอร์บนพื้นหลังสีแดง
ส่วนหัวบนพื้นหลังสีส้ม
มุ่งหน้าสู่พื้นหลังมะนาว
ข้อความสีขาวบนพื้นหลังสีน้ำเงิน
การระบุสีโดยใช้ RGB
เมื่อแสดงสีต่างๆ บนจอภาพ ระบบจะใช้จานสี RGB เป็นพื้นฐาน สีใดก็ได้โดยการผสมสีพื้นฐานสามสี: ร - แดง, G - สีเขียว, บี - น้ำเงิน- ความสว่างของแต่ละสีกำหนดไว้หนึ่งไบต์ดังนั้นจึงสามารถรับค่าได้ตั้งแต่ 0 ถึง 255 ตัวอย่างเช่น RGB (255,0,0) จะแสดงเป็นสีแดงเนื่องจากสีแดงถูกกำหนดไว้ที่ค่าสูงสุด (255) และ ส่วนที่เหลือตั้งค่าเป็น 0 คุณยังสามารถตั้งค่าสีเป็นเปอร์เซ็นต์ได้ พารามิเตอร์แต่ละตัวระบุระดับความสว่างของสีที่เกี่ยวข้อง ตัวอย่างเช่น: ค่า rgb(127, 255, 127) และ rgb(50%, 100%, 50%) จะตั้งค่าสีเขียวกลางเดียวกัน:
ตัวอย่าง: การระบุสีโดยใช้ RGB
- ลองด้วยตัวเอง"
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
ตั้งค่าสีตามค่าเลขฐานสิบหก
ค่านิยม ร ช บีสามารถระบุได้โดยใช้ค่าสีเลขฐานสิบหก (HEX) ในรูปแบบ: #RRGGBB โดยที่ RR (สีแดง), GG (สีเขียว) และ BB (สีน้ำเงิน) เป็นค่าสีฐานสิบหกตั้งแต่ 00 ถึง FF (เหมือนกับทศนิยม 0-255 ) . ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบฐานสิบนั้นเป็นไปตามชื่อของมัน ระบบเลขฐานสิบหกใช้เครื่องหมายต่อไปนี้: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. ตัวเลขตั้งแต่ 10 ถึง 15 จะถูกแทนที่ด้วยตัวอักษรละติน ตัวเลขที่มากกว่า 15 ในระบบเลขฐานสิบหกจะแสดงโดยการรวมอักขระสองตัวให้เป็นค่าเดียว ตัวอย่างเช่น จำนวนสูงสุด 255 ในฐานสิบจะสอดคล้องกับค่า FF สูงสุดในฐานสิบหก ไม่เหมือนกับระบบทศนิยม เลขฐานสิบหกจะมีสัญลักษณ์แฮชนำหน้า # ตัวอย่างเช่น #FF0000 จะแสดงเป็นสีแดง เนื่องจากสีแดงถูกกำหนดไว้ที่ค่าสูงสุด (FF) และสีที่เหลือถูกกำหนดไว้ที่ค่าต่ำสุด (00) ป้ายหลังสัญลักษณ์แฮช # คุณสามารถพิมพ์ได้ทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ระบบเลขฐานสิบหกช่วยให้คุณใช้รูปแบบย่อ #rgb โดยที่อักขระแต่ละตัวมีค่าเท่ากับสองเท่า ดังนั้น รายการ #f7O ควรถือเป็น #ff7700
ตัวอย่าง: สี HEX
- ลองด้วยตัวเอง"
สีแดง: #FF0000
สีเขียว: #00FF00
สีน้ำเงิน: #0000FF
สีแดง: #FF0000
สีเขียว: #00FF00
สีน้ำเงิน: #0000FF
แดง+เขียว=เหลือง: #FFFF00
แดง+น้ำเงิน=ม่วง: #FF00FF
เขียว+น้ำเงิน=ฟ้า: #00FFFF
รายการสีที่ใช้กันทั่วไป (ชื่อ, HEX และ RGB):
| ชื่อภาษาอังกฤษ | ชื่อรัสเซีย | ตัวอย่าง | ฐานสิบหก | RGB | ||
|---|---|---|---|---|---|---|
| ดอกบานไม่รู้โรย | ดอกบานไม่รู้โรย | #E52B50 | 229 | 43 | 80 | |
| อำพัน | อำพัน | #FFBF00 | 255 | 191 | 0 | |
| อควา | ฟ้าเขียว | #00FFFF | 0 | 255 | 255 | |
| สีฟ้า | สีฟ้า | #007FFF | 0 | 127 | 255 | |
| สีดำ | สีดำ | #000000 | 0 | 0 | 0 | |
| สีฟ้า | สีฟ้า | #0000FF | 0 | 0 | 255 | |
| บอนได บลู | น้ำที่หาดบอนได | #0095B6 | 0 | 149 | 182 | |
| ทองเหลือง | ทองเหลือง | #B5A642 | 181 | 166 | 66 | |
| สีน้ำตาล | สีน้ำตาล | #964B00 | 150 | 75 | 0 | |
| ซีรูเลียน | สีฟ้า | #007BA7 | 0 | 123 | 167 | |
| ฤดูใบไม้ผลิสีเขียวเข้ม | ฤดูใบไม้ผลิสีเขียวเข้ม | #177245 | 23 | 114 | 69 | |
| มรกต | มรกต | #50C878 | 80 | 200 | 120 | |
| มะเขือ | มะเขือ | #990066 | 153 | 0 | 102 | |
| บานเย็น | บานเย็น | #FF00FF | 255 | 0 | 255 | |
| ทอง | ทอง | #FFD700 | 250 | 215 | 0 | |
| สีเทา | สีเทา | #808080 | 128 | 128 | 128 | |
| สีเขียว | สีเขียว | #00FF00 | 0 | 255 | 0 | |
| คราม | คราม | #4B0082 | 75 | 0 | 130 | |
| หยก | หยก | #00A86B | 0 | 168 | 107 | |
| มะนาว | มะนาว | #CCFF00 | 204 | 255 | 0 | |
| มาลาไคต์ | มาลาไคต์ | #0BDA51 | 11 | 218 | 81 | |
| กองทัพเรือ | น้ำเงิน | #000080 | 0 | 0 | 128 | |
| ดินเหลืองใช้ทำสี | ดินเหลืองใช้ทำสี | #CC7722 | 204 | 119 | 34 | |
| มะกอก | มะกอก | #808000 | 128 | 128 | 0 | |
| ส้ม | ส้ม | #FFA500 | 255 | 165 | 0 | |
| ลูกพีช | ลูกพีช | #FFE5B4 | 255 | 229 | 180 | |
| ฟักทอง | ฟักทอง | #FF7518 | 255 | 117 | 24 | |
| สีม่วง | สีม่วง | #800080 | 128 | 0 | 128 | |
| สีแดง | สีแดง | #FF0000 | 255 | 0 | 0 | |
| สีเหลือง | สีเหลือง | #F4C430 | 244 | 196 | 48 | |
| ทะเลเขียว | ทะเลสีเขียว | #2E8B57 | 46 | 139 | 87 | |
| หนองน้ำสีเขียว | โบโลตนี่ | #ACB78E | 172 | 183 | 142 | |
| นกเป็ดน้ำ | ฟ้าเขียว | #008080 | 0 | 128 | 128 | |
| อุลตรามารีน | อุลตรามารีน | #120A8F | 18 | 10 | 143 | |
| สีม่วง | สีม่วง | #8B00FF | 139 | 0 | 255 | |
| สีเหลือง | สีเหลือง | #FFFF00 | 255 | 255 | 0 | |
รหัสสี (พื้นหลัง) ด้วยความอิ่มตัวและเฉดสี
รหัสไมน์คราฟต์ สีหรือไมน์คราฟต์ รหัสการจัดรูปแบบอนุญาตให้ผู้เล่นเพิ่มดอกไม้และจัดรูปแบบข้อความในทุกวิถีทางที่เป็นไปได้โดยตรงใน Minecraft รหัสสีจาก &0-9 - ถึง &a-f เพิ่มไว้หน้าข้อความของคุณ ข้อความจากผู้เล่นสามารถมีรหัสสีที่ช่วยให้คุณสามารถเพิ่มสีสันให้กับประโยคของคุณได้
สีและรหัสการจัดรูปแบบ
เครื่องหมายแอมเพอร์แซนด์ (&) ตามด้วยเลขฐานสิบหกในข้อความจะส่งสัญญาณให้ลูกค้าเปลี่ยนสีเมื่อแสดงข้อความ นอกจากนี้ ข้อความยังสามารถจัดรูปแบบด้วยเครื่องหมาย & ตามด้วยตัวอักษรได้ คุณสามารถเพิ่มสีต่างๆ ให้กับหนังสือ บล็อกคำสั่ง ชื่อเซิร์ฟเวอร์ คำอธิบายเซิร์ฟเวอร์ (motd) ชื่อโลก สัญลักษณ์ และแม้แต่ชื่อผู้เล่นได้
เป็นเรื่องง่ายมากที่จะจัดรูปแบบข้อความของคุณในการกำหนดค่าหรือในเกมโดยใช้แผนภูมิสีด้านล่าง &r ใช้เพื่อรีเซ็ตรหัสทั้งหมด เช่น &mAAA&rBBB จะแสดงเป็น AAA BBB
เรานำเสนอตารางรหัสสีที่มีอยู่ใน Minecraft เพื่อความสะดวกของคุณ:
| รหัส | ชื่อ | ชื่อทางเทคนิค | สีสัญลักษณ์ | สีเงาสัญลักษณ์ | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ร | ช | บี | ฐานสิบหก | ร | ช | บี | ฐานสิบหก | |||
| &0 | สีดำ | สีดำ | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | น้ำเงิน | น้ำเงิน | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | เขียวเข้ม | เขียวเข้ม | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | น้ำเงินเข้ม-เขียว | dark_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
| &4 | ดำแดง | ดำแดง | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | ม่วงทึบ | ม่วงทึบ | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | ทอง | ทอง | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | สีเทา | สีเทา | 170 | 170 | 170 | อ๊าาา | 42 | 42 | 42 | 2A2A2A |
| &8 | เทาเข้ม | dark_gray | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | สีฟ้า | สีฟ้า | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &ก | สีเขียว | สีเขียว | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &ข | ฟ้าเขียว | น้ำ | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| &ค | สีแดง | สีแดง | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &d | สีม่วงอ่อน | แสง_สีม่วง | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &e | สีเหลือง | สีเหลือง | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &ฉ | สีขาว | สีขาว | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
บางครั้งก็จำเป็น ขีดเส้นใต้, ขีดฆ่า, ไฮไลท์ข้อความใดก็ได้- ทำได้โดยใช้การจัดรูปแบบข้อความ มันถูกใช้ในลักษณะเดียวกับสีทุกประการ (เราใส่ไว้หน้าข้อความ รหัสตัวอย่างเช่น &lMinecraft = ไมน์คราฟต์.
เพื่อความสะดวกของคุณ ด้านล่างนี้คือตารางรหัสการจัดรูปแบบ:
| รหัส | ชื่อ |
|---|---|
| &เค | ข้อความวิเศษ |
| &ล | ภาพขนาดย่อ |
| & ม | ข้อความขีดทับ |
| &n | ข้อความที่ขีดเส้นใต้ |
| &โอ | ข้อความตัวเอียง |
| &ร | ข้อความที่ไม่มีการจัดรูปแบบ |
ดังที่คุณทราบ สีอาจส่งผลต่อสภาวะของบุคคลทั้งทางจิตใจและร่างกาย ทุกวันในขณะที่ท่องเว็บไซต์บนอินเทอร์เน็ต ดวงตาจะประเมินสีและเฉดสีนับล้าน นักออกแบบเว็บไซต์ที่คุ้นเคยกับจิตวิทยาเรื่องสีสามารถควบคุมอารมณ์ของผู้เข้าชมเพื่อให้บรรลุเป้าหมายบางอย่างได้
นี่เป็นเพราะความจริงที่ว่าบางเฉดสงบและบางอันก็ตื่นเต้น ต่อไปเราจะพูดถึงวิธีการสังเคราะห์และแสดงสีโดยใช้เทคโนโลยีคอมพิวเตอร์
RGB เป็นแบบจำลองสีที่แสดงถึงวิธีการเพื่อให้ได้สีและเฉดสีทั้งหมดโดยการผสมองค์ประกอบหลัก 3 ส่วนในสัดส่วนต่างๆ ได้แก่
- สีแดง ( สีแดง);
- สีเขียว ( สีเขียว);
- สีฟ้า ( สีฟ้า).
นี่คือที่มาของชื่อย่อ RGB สีเหล่านี้ถูกเลือกให้เป็นสีหลักด้วยเหตุผล: เหตุผลก็คือสรีรวิทยาของเรตินาของดวงตามนุษย์และวิธีที่รับรู้:
รุ่น RGB ยังคงได้รับความนิยมมากที่สุดในปัจจุบัน และใช้ในการสร้างสีบนหน้าจอทีวีและจอคอมพิวเตอร์ เนื่องจากผู้ผลิตนำเสนอผลิตภัณฑ์ของตนด้วยคุณลักษณะที่แตกต่างกัน ในปี 1996 จึงได้มีการสร้างระบบสังเคราะห์สีแบบรวม RGB ที่เรียกว่า sRGB ซึ่ง Microsoft และ HP ทำงานร่วมกัน
การแสดงสีเป็นตัวเลข
ตามที่กล่าวไว้ข้างต้น สี RGB เกิดจากการผสมสีหลัก เพื่ออธิบายความเข้มของแต่ละรายการ ได้มีการนำโครงร่างมาใช้โดยแสดงสีด้วยช่วง 0-255 (8 บิต) ซึ่งในรูปแบบเลขฐานสิบหกสอดคล้องกับ 00-FF
นั่นคือสีหลักจะมีลักษณะดังนี้:
- สีแดง – RGB (255,0,0);
- สีเขียว – RGB (0,255,0);
- สีน้ำเงิน – RGB (0,0,255);
หากความเข้มของสีใช้ค่าน้อยกว่า 255 จะได้เฉดสีแดงเขียวและน้ำเงินที่แตกต่างกัน ต่อไปนี้เป็นตารางการไล่ระดับรวมถึงค่าเลขฐานสิบหกของแต่ละเฉดสี:
ตารางสี RGB
โดยธรรมชาติแล้วนอกเหนือจากการไล่สีหลักแล้ว ยังมีสีผสมและจำนวนก็ค่อนข้างมาก ดังนั้นจึงมีการสร้างตารางสี RGB ซึ่งนำเสนอเฉดสีที่มีอยู่ทั้งหมด ตลอดจนชื่อและการแสดงตัวเลข ( ในรูปแบบทศนิยมและฐานสิบหก).
คุณสามารถดูได้ที่นี่ ตารางนี้ทำให้ชีวิตของนักออกแบบเว็บไซต์ง่ายขึ้นมาก เนื่องจากภายในไม่กี่วินาที คุณจะพบเฉดสีที่ต้องการและค้นหาการแสดงตัวเลขได้
จานสี RGB ที่ปลอดภัย
อย่างไรก็ตาม ในบางจุดมีปัญหาในการแสดงสีในเบราว์เซอร์ที่แตกต่างกัน และเพื่อแก้ไขปัญหานี้ จึงได้มีการรวบรวมจานสี RGB ที่เรียกว่า "ปลอดภัย" ซึ่งได้มาจากการคำนวณทางคณิตศาสตร์
เมื่อเบราว์เซอร์ไม่สามารถแสดงสีได้อย่างถูกต้อง เบราว์เซอร์จะพยายามเพื่อให้ได้สีที่ใกล้เคียงกับที่ต้องการด้วยการผสมสีที่อยู่ติดกัน และมีแนวโน้มว่าผลลัพธ์จะไม่เป็นที่ยอมรับโดยสิ้นเชิง:
ด้วยการใช้รหัสสี RGB จากจานสีนี้ นักพัฒนาเว็บจะมีความอุ่นใจเกี่ยวกับการแสดงสีบนหน้าเว็บไซต์ของตนเมื่อดูโดยใช้เบราว์เซอร์ แพลตฟอร์ม และจอภาพที่แตกต่างกัน แม้ว่าในขณะนี้ตารางสีที่ปลอดภัยจะสูญเสียความเกี่ยวข้อง ( ความก้าวหน้าทางเทคโนโลยียังไม่หยุดนิ่ง) เมื่อใช้มันคุณสามารถนอนหลับได้อย่างสงบสุขตามที่พวกเขาพูด
สีทองในรุ่น RGB
คำว่า "ทองคำ" ถูกใช้ครั้งแรกเมื่อต้นศตวรรษที่ 14 เพื่ออธิบายสีขององค์ประกอบทางเคมีที่เรียกว่าออรัม - ทองคำ ในโมเดล RGB สีทองจะแสดงด้วยค่าตัวเลขต่อไปนี้:
- RGB (255, 215, 0) – ระบบทศนิยม;
- HEX #FFD700 – ระบบเลขฐานสิบหก
สีเบจ ในรุ่น RGB
สีเบจครองตำแหน่งที่ค่อนข้างสำคัญในประวัติศาสตร์แม้ว่าจะไม่ได้แสดงออกมากที่สุดก็ตาม อนุสรณ์สถานทางวัฒนธรรมหลายแห่ง โดยเฉพาะประติมากรรมโบราณ ทำจากหินสบู่และหินสบู่ซึ่งมีโทนสีเบจ ในรุ่น RGB สีเบจมีการแสดงตัวเลขดังต่อไปนี้:
- RGB (245, 245, 220) – ระบบทศนิยม;
- HEX #F5F5DC – ระบบเลขฐานสิบหก
ทุกวันนี้ โดยเฉพาะอย่างยิ่งบนเวิลด์ไวด์เว็บ เป็นเรื่องยากที่จะเห็นสีที่ "น่าเบื่อ" เช่นนี้ นักพัฒนาให้ความสำคัญกับการออกแบบที่สะดุดตาโดยใช้สีสันสดใส ความก้าวหน้าทางเทคโนโลยีทำให้สามารถแสดงสีจำนวนมหาศาลบนจอภาพได้ ซึ่งทำให้ภาพดูสมจริงยิ่งขึ้น
ดีไม่ดี
เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 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.สีบนหน้าเว็บ
วลาด เมอร์เซวิช
ใน HTML สีจะถูกระบุด้วยวิธีใดวิธีหนึ่งจากสองวิธี: การใช้รหัสฐานสิบหกและตามชื่อของสีบางสี วิธีการที่ใช้ระบบเลขฐานสิบหกส่วนใหญ่จะใช้เนื่องจากเป็นวิธีสากลที่สุด
สีเลขฐานสิบหก
HTML ใช้เลขฐานสิบหกเพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. ตัวเลขตั้งแต่ 10 ถึง 15 จะถูกแทนที่ด้วยตัวอักษรละติน ในตาราง 6.1 แสดงความสอดคล้องระหว่างเลขฐานสิบและเลขฐานสิบหก
ตัวเลขที่มากกว่า 15 ในระบบเลขฐานสิบหกจะถูกสร้างขึ้นโดยการรวมตัวเลขสองตัวให้เป็นหนึ่งเดียว (ตาราง 6.2) ตัวอย่างเช่น ตัวเลข 255 ในรูปทศนิยมจะสอดคล้องกับตัวเลข FF ที่เป็นเลขฐานสิบหก
เพื่อหลีกเลี่ยงความสับสนในการกำหนดระบบตัวเลข เลขฐานสิบหกจะต้องนำหน้าด้วยสัญลักษณ์แฮช # เช่น #aa69cc ในกรณีนี้ ไม่สำคัญ ดังนั้นจึงอนุญาตให้เขียน #F0F0F0 หรือ #f0f0f0
สีทั่วไปที่ใช้ใน HTML มีลักษณะเช่นนี้
ที่นี่สีพื้นหลังของหน้าเว็บถูกตั้งค่าเป็น #FA8E47 สัญลักษณ์แฮช # หน้าตัวเลขหมายความว่าเป็นเลขฐานสิบหก ตัวเลขสองหลักแรก (FA) กำหนดองค์ประกอบสีแดงของสี ตัวเลขที่สามถึงหลักสี่ (8E) กำหนดองค์ประกอบสีเขียว และตัวเลขสองหลักสุดท้าย (47) กำหนดองค์ประกอบสีน้ำเงิน ผลลัพธ์ที่ได้จะเป็นสีนี้
| เอฟ.เอ. | + | 8E | + | 47 | = | FA8E47 |
แต่ละสีในสามสี ได้แก่ แดง เขียว และน้ำเงิน สามารถรับค่าได้ตั้งแต่ 00 ถึง FF ส่งผลให้มีเฉดสีทั้งหมด 256 เฉด ดังนั้น จำนวนสีทั้งหมดสามารถเป็น 256x256x256 = 16,777,216 ชุดค่าผสม โมเดลสีที่ใช้ส่วนประกอบสีแดง เขียว และน้ำเงินเรียกว่า RGB (แดง เขียว น้ำเงิน แดง เขียว น้ำเงิน) รุ่นนี้เป็นสารเติมแต่ง (จากเพิ่ม - เพิ่ม) ซึ่งการเพิ่มส่วนประกอบทั้งสามทำให้เกิดสีขาว
เพื่อให้ง่ายต่อการนำทางสีเลขฐานสิบหก ให้คำนึงถึงกฎบางประการ
- หากค่าของส่วนประกอบสีเท่ากัน (เช่น #D6D6D6) ผลลัพธ์จะเป็นโทนสีเทา ยิ่งตัวเลขสูง สีก็จะยิ่งจางลง โดยมีค่าตั้งแต่ #000000 (สีดำ) ถึง #FFFFFF (สีขาว)
- สีแดงสดจะเกิดขึ้นหากส่วนประกอบสีแดงถูกทำให้สูงสุด (FF) และส่วนประกอบที่เหลือถูกตั้งค่าเป็นศูนย์ สีที่มีค่า #FF0000 จะเป็นสีแดงที่เป็นไปได้มากที่สุด เช่นเดียวกับสีเขียว (#00FF00) และสีน้ำเงิน (#0000FF)
- สีเหลือง (#FFFF00) เกิดจากการผสมสีแดงและสีเขียว สิ่งนี้มองเห็นได้ชัดเจนบนวงล้อสี (รูปที่ 6.1) ซึ่งนำเสนอสีหลัก (แดง, เขียว, น้ำเงิน) และสีเสริมหรือสีเพิ่มเติม ซึ่งรวมถึงสีเหลือง สีฟ้า และสีม่วง (เรียกอีกอย่างว่าสีม่วงแดง) โดยทั่วไปแล้ว สามารถรับสีใดก็ได้โดยการผสมสีใกล้เคียงกัน ดังนั้น จะได้สีฟ้า (#00FFFF) โดยการรวมสีน้ำเงินและสีเขียวเข้าด้วยกัน
ข้าว. 6.1. วงกลมสี
ไม่จำเป็นต้องเลือกสีตามค่าฐานสิบหกโดยสังเกต เพื่อจุดประสงค์นี้ โปรแกรมแก้ไขกราฟิกที่สามารถทำงานกับโมเดลสีต่างๆ เช่น Adobe Photoshop จึงเหมาะสม ในรูป รูปที่ 6.2 แสดงหน้าต่างสำหรับเลือกสีในโปรแกรมนี้ ค่าเลขฐานสิบหกที่ได้ของสีปัจจุบันจะแสดงเป็นเส้นกรอบ คุณสามารถคัดลอกและวางลงในโค้ดของคุณได้
ข้าว. 6.2. หน้าต่างสำหรับเลือกสีใน Photoshop
สีของเว็บ
หากคุณตั้งค่าคุณภาพการแสดงสีของจอภาพเป็น 8 บิต (256 สี) สีเดียวกันก็สามารถแสดงแตกต่างกันในเบราว์เซอร์ที่แตกต่างกันได้ นี่เป็นเพราะวิธีการแสดงกราฟิก เมื่อเบราว์เซอร์ทำงานกับจานสีของตัวเอง และไม่สามารถแสดงสีที่ไม่ได้อยู่ในจานสีได้ ในกรณีนี้สีจะถูกแทนที่ด้วยการรวมกันของพิกเซลของสีอื่น ๆ ที่อยู่ใกล้เคียงซึ่งเป็นสีที่เลียนแบบสีที่กำหนด เพื่อให้แน่ใจว่าสียังคงเหมือนเดิมในเบราว์เซอร์ต่างๆ จึงได้นำชุดสีที่เรียกว่าสีเว็บมาใช้ สีของเว็บคือสีที่แต่ละส่วนประกอบ - สีแดง สีเขียว และสีน้ำเงิน - ถูกตั้งค่าเป็นหนึ่งในหกค่า - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (เอฟเอฟ) ค่าเลขฐานสิบหกของส่วนประกอบนี้จะระบุอยู่ในวงเล็บ จำนวนสีทั้งหมดจากการผสมที่เป็นไปได้ทั้งหมดคือ 6x6x6 - 216 สี สีเว็บตัวอย่างคือ #33FF66
คุณสมบัติหลักของสีเว็บคือปรากฏเหมือนกันในทุกเบราว์เซอร์ ในขณะนี้ ความเกี่ยวข้องของสีของเว็บมีน้อยมาก เนื่องจากการปรับปรุงคุณภาพของจอภาพและการขยายขีดความสามารถ
สีตามชื่อ
เพื่อหลีกเลี่ยงการจำชุดตัวเลข คุณสามารถใช้ชื่อสีที่ใช้กันทั่วไปแทนได้ ในตาราง 6.3 แสดงชื่อชื่อสียอดนิยม
| ชื่อสี | สี | คำอธิบาย | ค่าเลขฐานสิบหก |
|---|---|---|---|
| สีดำ | สีดำ | #000000 | |
| สีฟ้า | สีฟ้า | #0000FF | |
| สีแดงม่วง | สีม่วงอ่อน | #FF00FF | |
| สีเทา | เทาเข้ม | #808080 | |
| สีเขียว | สีเขียว | #008000 | |
| มะนาว | สีเขียวอ่อน | #00FF00 | |
| สีน้ำตาลแดง | ดำแดง | #800000 | |
| กองทัพเรือ | น้ำเงิน | #000080 | |
| มะกอก | มะกอก | #808000 | |
| สีม่วง | ม่วงทึบ | #800080 | |
| สีแดง | สีแดง | #FF0000 | |
| เงิน | แสงสีเทา | #C0C0C0 | |
| นกเป็ดน้ำ | ฟ้าเขียว | #008080 | |
| สีขาว | สีขาว | #FFFFFF | |
| สีเหลือง | สีเหลือง | #FFFF00 |
ไม่สำคัญว่าคุณจะระบุสีตามชื่อหรือใช้เลขฐานสิบหก วิธีการเหล่านี้มีผลเท่าเทียมกัน ตัวอย่าง 6.1 แสดงวิธีการตั้งค่าสีพื้นหลังและข้อความของหน้าเว็บ
ตัวอย่างที่ 6.1 สีพื้นหลังและข้อความ
ข้อความตัวอย่าง
ในตัวอย่างนี้ สีพื้นหลังถูกกำหนดโดยใช้แอตทริบิวต์ bgcolor ของแท็ก
และสีข้อความผ่านแอตทริบิวต์ข้อความ เพื่อความหลากหลาย แอตทริบิวต์ text จะถูกตั้งค่าเป็นเลขฐานสิบหก และแอตทริบิวต์ bgcolor จะถูกตั้งค่าเป็นคีย์เวิร์ดที่สงวนไว้ teal