การกำหนดสีผ่าน rgb ใน CSS

ตอนเริ่มต้นตำราเรียน เมื่อเราศึกษาเกี่ยวกับ สี ผมได้บอกคุณไปว่าสามารถกำหนดสีได้ โดยใช้คำภาษาอังกฤษ หรือผ่าน rgb หรือผ่าน # รูปแบบสองแบบหลังนี้ ทำให้ได้สีทุกเฉดสี มาดูกันว่า รูปแบบเหล่านี้ทำงานอย่างไร

เพื่อให้เข้าใจวิธีเหล่านี้ ก่อนอื่นเรา จำเป็นต้องเข้าใจว่าได้สีที่ต้องการ บนหน้าจอคอมพิวเตอร์มาได้อย่างไร

ในความเป็นจริง จุดเดี่ยวบนหน้าจอ (พิกเซล) ไม่สามารถเปล่งแสงเป็นทุกสีที่ ต้องการได้ เนื่องจากในทางเทคนิคจะ ซับซ้อนมาก จุดแต่ละจุดบนหน้าจอสามารถเปล่งแสงได้ เพียงสามสีเท่านั้น: สีแดง สีเขียว และ สีน้ำเงิน แต่สามารถเปล่งแสงพร้อมกันและใน สัดส่วนที่ต่างกันได้

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

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

ตัวอักษร rgb นั้นย่อมาจาก red, green, blue

มาดูตัวอย่างกัน

ตัวอย่าง

มาผสมสีแดงบริสุทธิ์และสีน้ำเงินบริสุทธิ์กัน สำหรับสิ่งนี้ กำหนดค่าแรกเป็น 255 ค่าที่สองเป็น 0 และค่าที่สาม - เป็น 255 เราจะได้ สีม่วง:

<p>
	ข้อความ
</p>

p {
	color: rgb(255, 0, 255);
}

ตัวอย่าง

คราวนี้ลองตั้งค่าที่หนึ่ง เป็น 255 และค่าที่เหลือทั้งหมด - เป็นศูนย์ ผลที่ ได้คือสีแดงบริสุทธิ์:

<p>
	ข้อความ
</p>

p {
	color: rgb(255, 0, 0);
}

ตัวอย่าง

แบบนี้จะได้สีเขียวบริสุทธิ์:

<p>
	ข้อความ
</p>

p {
	color: rgb(0, 255, 0);
}

ตัวอย่าง

และถ้าตั้งค่าสีเขียวไม่ใช่ 255 แต่เป็น 100 จะได้ สีเขียวบางส่วน:

<p>
	ข้อความ
</p>

p {
	color: rgb(0, 100, 0);
}

ตัวอย่าง

มาผสมทั้งสามสีในสัดส่วนตามใจชอบ ดูสิว่าได้อะไร:

<p>
	ข้อความ
</p>

p {
	color: rgb(200, 100, 125);
}

ตัวอย่าง

ถ้าตั้งค่าทั้งหมดเป็น 255 จะได้สีขาวบริสุทธิ์:

p {
	color: rgb(255, 255, 255);
}

ตัวอย่าง

ถ้าตั้งค่าทั้งหมดเป็น 0 จะได้สีดำบริสุทธิ์:

p {
	color: rgb(0, 0, 0);
}

โจทย์ปฏิบัติ

โดยการกำหนดสีผ่าน rgb ทำให้ ย่อหน้าทุกย่อหน้าเป็นสีแดง

โดยการกำหนดสีผ่าน rgb ทำให้ h2 ทุกตัวเป็นสีเขียว

โดยการกำหนดสีผ่าน rgb ทำให้ h3 ทุกตัวเป็นสีน้ำเงิน

ผสมสีแดงบริสุทธิ์และสีเขียวบริสุทธิ์ จะได้สีอะไร?