การใช้แอตทริบิวต์ style การใช้คุณสมบัติพื้นหลัง และการกำหนดค่าให้กับ rgb(255, 0, 0) , rgb(0, 255, 0) และ rgb(0, 0, 255) นั่นคือเราสลับกันสร้างช่องสัญญาณหนึ่งให้อิ่มตัวมากที่สุดและช่องที่เหลือจะไม่ใช้สำหรับการสังเคราะห์เนื่องจากค่าของช่องนั้นเป็นศูนย์

ลองแก้ไขตัวอย่างนี้และระบุค่าของคุณเอง เช่น rgb(100, 100, 100)

การตั้งค่าสีโดยใช้ RGBA

ปรากฏใน CSS3 เครื่องมือใหม่สำหรับการทำงานกับสี - รูปแบบ RGBA เรียกได้ว่าเป็นวิวัฒนาการของโมเดล RGB แต่ด้วยการเพิ่มแชนเนลใหม่หนึ่งแชนเนล - A หรือ alpha channel ช่องนี้ตั้งค่าความโปร่งใสของสี ค่าของมันถูกตั้งค่าในช่วงตั้งแต่ 0 ถึง 1 ค่า 0 สอดคล้องกับความโปร่งใสแบบเต็ม 1 - ความทึบเต็ม (สีจะเหมือนกับที่ระบุไว้ใน สามคนแรก ช่อง RGB) และค่ากลางเช่น 0.4 หรือ 0.6 - ความโปร่งแสงถึงองศาที่แตกต่างกัน

รหัสตัวอย่าง

ต่อไปนี้เป็นวิธีการทำงาน:

รหัสนี้ในแบบของตัวเอง การแสดงภาพจะคล้ายกับต่อไปนี้ โดยใช้โมเดล RGB เพื่อตั้งค่าสี:

นี่คือผลลัพธ์ของเขา:

ค่าช่องอัลฟ่าเท่ากับศูนย์ทำให้สีใดๆ มองไม่เห็น - โปร่งใสอย่างแน่นอน ค่าเท่ากับ 1 แปลสีในโค้ด RGB โดยไม่มีการเปลี่ยนแปลง คุณสมบัติ rgba(255,0,0,1.0) แสดงสีแดง rgb(255, 0, 0)

ตามค่าเลขฐานสิบหก (รหัส HEX)

ในชีวิตประจำวันเราใช้ระบบการนับทศนิยม ต้นกำเนิดของมันง่ายมาก - เรามีมือสิบนิ้วและการนับนิ้วนั้นสะดวกในชีวิต หากระบบทศนิยมมีตัวเลขสิบหลัก: ตั้งแต่ 0 ถึง 9 และตัวเลข 10 เป็นตัวเลขถัดไป ระบบเลขฐานสิบหกจะมี 16 หลัก และตัวเลขถัดไปคือตัวเลข 16

หากต้องการระบุรหัสสีเป็นเลขฐานสิบหก ให้ใช้รหัสปกติ หลักทศนิยมจาก 0 ถึง 9 และการกำหนดตัวเลขตั้งแต่ 10 ถึง 15 ใช้ตัวอักษรละตินตั้งแต่ A ถึง F นั่นคือ (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , จ, ฉ) เพื่อความชัดเจน เรามาใส่ไว้ในตารางกัน:

ในการเขียนเลขฐานสิบหกที่มากกว่า F (15 ในระบบทศนิยม) เช่นเดียวกับในระบบทศนิยมก็ใช้การรวมกันของตัวเลขสองหลัก แต่เป็นเลขฐานสิบหกอยู่แล้วซึ่งเห็นได้ชัด ใช่เพื่อบันทึก เลขทศนิยม 255 โวลต์ ระบบเลขฐานสิบหกใช้สัญกรณ์ FF

ระบบเลขฐานสิบหกนั้นคอมพิวเตอร์เข้าใจได้ง่ายขึ้นและจะประมวลผลค่าที่กำหนดโดยค่าเลขฐานสิบหกได้เร็วขึ้น

หากต้องการระบุสีเป็นเลขฐานสิบหกก่อน ค่าตัวเลขคุณต้องใส่เครื่องหมาย “#” เช่น #FFC0CB ค่า #FFC0CB ประกอบด้วยเลขฐานสิบหกสามหลัก FF, C0 และ CB ความหมายของรายการนี้เหมือนกับการตั้งค่าสี รูปแบบ RGB(rgb(r, g, b)) - เลขฐานสิบหกแต่ละหลักในรหัส HEX ระบุความอิ่มตัวของสีในช่องของโมเดล RGB

รหัสนี้จะแสดงองค์ประกอบต่อไปนี้:

และนี่คือรูปภาพพร้อมผลลัพธ์จากส่วน "การตั้งค่าสีด้วย โดยใช้ RGB" ในหน้านี้ด้านบนนี้

รูปที่ 1. สีใน RGB

เราจะเห็นว่าสีเหมือนกัน

อนุญาตให้ใช้สัญลักษณ์ย่อของรหัสสี HEX: ตัวเลข 6 หลักสามารถเขียนเป็นตัวเลข 3 หลักได้ สิ่งนี้ใช้ได้เฉพาะเมื่อมีการทำซ้ำตัวเลขสองหลักในค่าสีของหนึ่งช่อง

นั่นคือตัวย่อต่อไปนี้เป็นที่ยอมรับ:

ตัวอย่างเช่น สี #ff22aa สามารถเขียนเป็น #f2a หรือสี #44aa22 สามารถเขียนเป็น #4a2 ได้

การตั้งค่าสีโดยใช้ HSL

ปรากฏใน CSS3 รูปแบบใหม่เพื่อระบุสี

รูปแบบ HSL เป็นตัวย่อของคำภาษาอังกฤษ: Hue (hue), Saturate (ความอิ่มตัว) และ Lightness (ความสว่าง)

เฉดสีใน HSL คือค่าของสีบนวงล้อสีพิเศษ (รูปที่ 2) และระบุเป็นองศา ถ้าเราวาดการเปรียบเทียบด้วย รุ่น RGBจากนั้น 0° ตรงกับสีแดง 120° ตรงกับสีเขียว และ 240° ตรงกับสีน้ำเงิน

ค่าสีจะเปลี่ยนจาก 0 เป็น 359

รูปที่ 2. วงล้อสี HSL

ค่าที่สอง - ความอิ่มตัว (Saturate) ตั้งเป็นเปอร์เซ็นต์ เมื่อความอิ่มตัวของสี 100% สีจะ “ชุ่มฉ่ำ” มากที่สุด เมื่อตัวบ่งชี้ความอิ่มตัวเคลื่อนไปทาง 0% สีจะมัวลงและจางลงเป็นสีเทา

ค่าที่สาม Lightness ก็ถูกกำหนดเป็นเปอร์เซ็นต์เช่นกัน ยิ่งเปอร์เซ็นต์สูง สีก็จะยิ่งสว่างขึ้น ค่าสูงสุด 0% และ 100% จะระบุสีดำ (ไม่มีแสง) และสีขาว (สว่างเกินไป) ตามลำดับ และไม่สำคัญว่าสีใดจากวงล้อสีจะถูกเลือกในช่องแรก ค่าความสว่างสีที่เหมาะสมที่สุดคือ 50%

การตั้งค่าสีโดยใช้ HSLA

รูปแบบ HSLA เกี่ยวข้องกับ HSL เช่นเดียวกับ RGB ที่เกี่ยวข้องกับ RGBA ในรูปแบบ HSLA เช่นเดียวกับใน RGBA จะมีการเพิ่มช่องอัลฟ่าซึ่งมีหน้าที่รับผิดชอบในเรื่องความโปร่งใสของสี

สีที่ระบุในรูปแบบ HSL จะอ่านง่ายกว่า เราสามารถพูดได้ว่ามันเป็นสัญชาตญาณ ตัวอย่างเช่น รหัส hsl(120,60%,50%) สามารถใช้แทนสีสุดท้ายได้หากมีรูปภาพของวงล้อสี HSL ในหน่วยความจำ สิ่งเดียวกันนี้ไม่สามารถพูดได้เกี่ยวกับรูปแบบ RGB และ HEX รหัสสีที่ระบุในรูปแบบเหล่านี้จะชัดเจนหลังจากแสดงภาพบนจอภาพเท่านั้น

รูปแบบใหม่ใน CSS3 (HSL, HSLA และ RGBA) ใช้งานได้กับเบราว์เซอร์ที่เริ่มต้นจากเวอร์ชัน: IE 9.0, Opera 10.0 Firefox 3.0 ฉันจะทำให้สไตล์ทำงานบนเบราว์เซอร์รุ่นเก่าได้อย่างไร

Somebloсk ( สีพื้นหลัง: rgb(255,50,50); สีพื้นหลัง: rgba(255,50,50,0.85) )

เมื่อใช้โค้ดนี้ในเบราว์เซอร์รุ่นเก่า สีพื้นหลังของคลาส .somebloсk แม้ว่าจะไม่ใช้ช่องอัลฟ่า แต่จะแสดงในรูปแบบ RGB

ดูภาพวาดอย่างระมัดระวัง พื้นหลังของหน้าต่างแบบเลื่อนลงถูกทำให้โปร่งแสง นี่เป็นเทคนิคการออกแบบที่ค่อนข้างธรรมดา ลองคิดดูว่าสิ่งนี้สามารถนำไปใช้ได้อย่างไร

งาน

ทำให้สีข้ามเบราว์เซอร์โปร่งแสง

สารละลาย

ความคิดแรกในสถานการณ์นี้คือการใช้รูปภาพ PNG24 ที่มีความโปร่งแสงที่กำหนดไว้แล้วสำหรับพื้นหลัง แต่ภาพนี้ไม่จำเป็นเลย คุณสามารถทำได้ดีหากไม่มีมัน (และดังนั้นจึงไม่มีการร้องขอเพิ่มเติมไปยังเซิร์ฟเวอร์) เรายังคงพยายามค้นหาวิธีแก้ปัญหาที่ดีที่สุด

ความคิดที่สองคือการใช้. แต่ใน ในกรณีนี้มันไม่สะดวกมาก ท้ายที่สุดแล้วไม่เพียงแต่พื้นหลังเท่านั้น แต่ยังมีจารึกที่โปร่งแสงอีกด้วย ใช่ จริงๆ แล้ว หน้าต่างทั้งหมดพร้อมกัน

แน่นอน คุณสามารถลองเพิ่มคอนเทนเนอร์เพิ่มเติมและใส่ความทึบกับคอนเทนเนอร์นั้นเท่านั้น แต่องค์ประกอบ HTML นี้มีไว้สำหรับการตกแต่งเท่านั้น และเห็นได้ชัดว่าจะซ้ำซ้อน เป็นไปได้ไหมถ้าไม่มีมัน?

แน่นอนคุณทำได้! หากคุณใช้ RGBA

รูปแบบคำอธิบายสี RGBA

CSS3 ช่วยให้คุณสามารถระบุสีโดยใช้ฟังก์ชัน RGB และ RGBA ในกรณีนี้ เราต้องระบุสัดส่วนของแต่ละองค์ประกอบสีที่มีการจัดสรรหนึ่งไบต์ (ตั้งแต่ 0 ถึง 255 เผื่อใครจะไม่ทราบ)

ไวยากรณ์สำหรับกรณีนี้ง่ายมาก:

พื้นหลัง: RGB (0, 255, 0); /* สีเขียวบริสุทธิ์ */

สำหรับ RGBA จะมีการเพิ่มพารามิเตอร์ที่สี่ - ความโปร่งใสของอัลฟา (ตั้งแต่ 0 ถึง 1)

พื้นหลัง: RGBA(255, 0, 0, 0.5); /* สีแดงบริสุทธิ์ที่มีความโปร่งใส 50% */

นี่สินะ วิธีแก้ปัญหาของเรา เพียงตั้งค่าสีพื้นหลังด้วย ใช้ RGBAและทุกอย่างจะดูตามที่เราต้องการ ปราศจาก รูปภาพพิเศษและองค์ประกอบ!

ฉันจะหาตัวเลขเหล่านี้ได้ที่ไหน?

คุณสามารถดูส่วนประกอบของสีได้โดยใช้เครื่องมือหยดตาของ Photoshop

เกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์

เนื่องจากฟังก์ชัน RGB นั้นเก่ากว่า RGBA มากและมีมาตั้งแต่สมัยของมาตรฐาน CSS2 เพื่อป้องกันเบราว์เซอร์รุ่นเก่าที่สุด คุณสามารถใช้โครงสร้างที่ซ้ำกันต่อไปนี้:

SomeBlock ( พื้นหลัง: rgb(255, 0, 0); พื้นหลัง: rgba(255, 0, 0, 0.5); )

ด้วยแนวทางนี้ครับปู่ทวด เบราว์เซอร์ที่ทันสมัยจะไม่มีความโปร่งแสง แต่สีจะยังคงถูกต้องอยู่

คุณจะต้องดูแล IE แยกกัน Donkeys ไม่เข้าใจ RGBA จนถึงเวอร์ชัน 8 รวมอยู่ด้วย

เช่นเคย: ที่ดินสำหรับชาวนา, โรงงานสำหรับคนงาน, และไม้ค้ำยันลา! ในรูปแบบของ.

แน่นอนว่าในสภาพการต่อสู้เราใช้กฎนี้ CSS แยกกันที่เราเชื่อมต่อกัน

SomeBlock ( พื้นหลัง:โปร่งใส; ตัวกรอง:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); ซูม: 1; )

เคล็ดลับคือระบุสีเริ่มต้นและสีสิ้นสุดให้เหมือนกัน (ff0000 - สีแดง) และใช้ประโยชน์จากข้อเท็จจริงที่ว่าคุณสามารถตั้งค่าช่องอัลฟาสำหรับการไล่ระดับสีในตัวกรองนี้ (ในตัวอย่าง ค่าคือ 80)

สำหรับการอ้างอิง: ตัวกรองใช้ระบบเลขฐานสิบหกและรหัสสำหรับสีทึบแสงคือ FF (ในฐานสิบคือ 255) ดังนั้น เลขฐานสิบหก 80 จึงเป็นทศนิยม 128 นั่นคือความโปร่งใส 50%

ทดสอบใน:

• อส. 6-9
• ไฟร์ฟอกซ์ 3+
• โอเปร่า 10+
• ซาฟารี 4
• โครเมียม

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

สีเลขฐานสิบหก

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. วงล้อสี

ไม่จำเป็นต้องเลือกสีตามค่าฐานสิบหกโดยสังเกต เหมาะสำหรับจุดประสงค์นี้ โปรแกรมแก้ไขกราฟิกสามารถทำงานร่วมกับผู้อื่นได้ โมเดลสี, ตัวอย่างเช่น, อะโดบี โฟโต้ช็อป- ในรูป รูปที่ 6.2 แสดงหน้าต่างสำหรับเลือกสีในโปรแกรมนี้ ค่าเลขฐานสิบหกที่ได้ของสีปัจจุบันจะแสดงเป็นเส้นกรอบ คุณสามารถคัดลอกและวางลงในโค้ดของคุณได้

ข้าว. 6.2. หน้าต่างสำหรับเลือกสี โปรแกรมโฟโต้ชอป

สีของเว็บ

หากคุณตั้งค่าคุณภาพการแสดงสีของจอภาพเป็น 8 บิต (256 สี) สีเดียวกันก็สามารถแสดงได้ใน เบราว์เซอร์ที่แตกต่างกันในแบบของฉันเอง นี่เป็นเพราะวิธีการแสดงกราฟิก เมื่อเบราว์เซอร์ทำงานกับจานสีของตัวเอง และไม่สามารถแสดงสีที่ไม่ได้อยู่ในจานสีได้ ในกรณีนี้สีจะถูกแทนที่ด้วยการรวมกันของพิกเซลของสีอื่น ๆ ที่อยู่ใกล้เคียงซึ่งเป็นสีที่เลียนแบบสีที่กำหนด เพื่อให้แน่ใจว่าสียังคงเหมือนเดิมในเบราว์เซอร์ต่างๆ จึงได้นำชุดสีที่เรียกว่าสีเว็บมาใช้ สีของเว็บคือสีที่แต่ละส่วนประกอบ - สีแดง สีเขียว และสีน้ำเงิน - ถูกตั้งค่าเป็นหนึ่งในหกค่า - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (เอฟเอฟ) ค่าเลขฐานสิบหกของส่วนประกอบนี้จะระบุอยู่ในวงเล็บ จำนวนสีทั้งหมดจากการผสมที่เป็นไปได้ทั้งหมดคือ 6x6x6 - 216 สี สีเว็บตัวอย่างคือ #33FF66

คุณสมบัติหลักของสีเว็บคือปรากฏเหมือนกันในทุกเบราว์เซอร์ ใน ในขณะนี้ความเกี่ยวข้องของสีของเว็บมีขนาดเล็กมากเนื่องจากการปรับปรุงคุณภาพของจอภาพและการขยายขีดความสามารถ

สีตามชื่อ

เพื่อหลีกเลี่ยงการจำชุดตัวเลข คุณสามารถใช้ชื่อสีที่ใช้กันทั่วไปแทนได้ ในตาราง 6.3 แสดงชื่อชื่อสียอดนิยม

โต๊ะ 6.3. ชื่อสีบางสี

ชื่อสี	สี	คำอธิบาย	ค่าเลขฐานสิบหก
สีดำ		สีดำ	#000000
สีฟ้า		สีฟ้า	#0000FF
สีแดงม่วง		สีม่วงอ่อน	#FF00FF
สีเทา		สีเทาเข้ม	#808080
สีเขียว		สีเขียว	#008000
มะนาว		สีเขียวอ่อน	#00FF00
สีน้ำตาลแดง		สีแดงเข้ม	#800000
กองทัพเรือ		สีน้ำเงินเข้ม	#000080
มะกอก		มะกอก	#808000
สีม่วง		สีม่วงเข้ม	#800080
สีแดง		สีแดง	#FF0000
เงิน		สีเทาอ่อน	#C0C0C0
นกเป็ดน้ำ		สีฟ้า-เขียว	#008080
สีขาว		สีขาว	#FFFFFF
สีเหลือง		สีเหลือง	#FFFF00

ไม่สำคัญว่าคุณจะระบุสีตามชื่อหรือใช้เลขฐานสิบหก วิธีการเหล่านี้มีผลเท่าเทียมกัน ตัวอย่าง 6.1 แสดงวิธีการตั้งค่าสีพื้นหลังและข้อความของหน้าเว็บ

ตัวอย่างที่ 6.1 สีพื้นหลังและข้อความ

ข้อความตัวอย่าง

ใน ในตัวอย่างนี้สีพื้นหลังถูกกำหนดโดยใช้แอตทริบิวต์ bgcolor ของแท็ก และสีข้อความผ่านแอตทริบิวต์ข้อความ เพื่อความหลากหลาย ค่าของแอตทริบิวต์ข้อความจะถูกตั้งค่าเป็น: เลขฐานสิบหกและ bgcolor โดยใช้สงวนไว้ คำหลักนกเป็ดน้ำ