ตารางสี สีในรูปแบบสามารถระบุได้หลายวิธี: ตามค่าเลขฐานสิบหก ตามชื่อ ในรูปแบบ RGB, RGBA, HSL, HSLA ตัวอย่าง: การระบุสีตามชื่อ
ค่ารายละเอียดโมดูลสี 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
อนุญาตให้ใช้อักขระเว้นวรรครอบค่าตัวเลข
เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 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
คำเตือน
วิธีการจับสิงโตทั้งหมดที่แสดงอยู่ในเว็บไซต์เป็นไปในเชิงทฤษฎีและใช้วิธีการคำนวณ ผู้เขียนไม่รับประกันความปลอดภัยของคุณเมื่อใช้งาน และไม่รับผิดชอบต่อผลลัพธ์ใดๆ จำไว้ว่าสิงโตเป็นสัตว์นักล่าและเป็นสัตว์อันตราย!
ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 2.
ข้าว. 2.สีบนหน้าเว็บ
หน้านี้ประกอบด้วยตารางที่มีคำหลักที่สามารถใช้เพื่อกำหนดสีในภาษาของนักพัฒนาเว็บเช่น: HTML, CSS, JavaScript, Flash เป็นต้น
ในข้อกำหนดเก่าสำหรับข้อกังวล WC3 มีการระบุคำหลักเพียง 16 คำเท่านั้น พร้อมด้วยความช่วยเหลือในการตั้งค่าสีใน HTML และ CSS นอกจากนี้ ข้อกำหนดที่ทันสมัยยิ่งขึ้นยังมีการเพิ่มคำหลักอีก 130 คำเพื่อระบุชื่อสี ตารางต่อไปนี้ประกอบด้วยชื่อสี รวมถึงรหัสฐานสิบหกและ RGB ที่ตรงกัน
ตาม กฎซีเอสเอสชื่อสีไม่คำนึงถึงขนาดตัวพิมพ์ รายการสี IndianRed และ indianred เทียบเท่ากัน
นอกจากนี้ ควรสังเกตด้วยว่าจากคำหลัก 146 คำในตาราง จริงๆ แล้วมีสีน้อยกว่า ทั้งนี้ก็เพราะว่าบางคน คำหลักเป็นตัวแทนของสีเดียวกัน ดังนั้นชื่อสีเทาและสีเทาจึงแสดงถึงสีเทาร้อยละ 50 โดยมีรหัส #808080 และคำว่า Magenta เป็นคำพ้องความหมาย สี HTMLสีบานเย็น สอดคล้องกับรหัสฐานสิบหก #FF00FF คำพ้องความหมายคือคำว่า Aqua และ Cyan ซึ่งตรงกับรหัส #00FFFF
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
มีหลายวิธีในการแสดงสีในการออกแบบเว็บ
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) |