HEX vs RGB vs HSL: ควรใช้รูปแบบสีใด?

HEX vs RGB vs HSL: ควรใช้รูปแบบสีใด?

CSS มีหลายวิธีในการกำหนดสี แต่สามรูปแบบที่พบมากที่สุดคือ HEX, RGB และ HSL แต่ละรูปแบบมีจุดแข็งที่แตกต่างกัน และการรู้ว่าเมื่อใดควรใช้แต่ละรูปแบบสามารถปรับปรุงความสามารถในการบำรุงรักษาสไตล์ชีตและความสามารถในการสร้างระบบสีแบบไดนามิกของคุณได้อย่างมาก คู่มือนี้อธิบายทุกรูปแบบเพื่อให้คุณสามารถเลือกสิ่งที่เหมาะสมสำหรับทุกสถานการณ์

รูปแบบสี HEX: มาตรฐานอุตสาหกรรม

สี HEX (เลขฐานสิบหก) เป็นรูปแบบที่ใช้กันอย่างแพร่หลายที่สุดในการออกแบบเว็บ สี hex เขียนด้วย # ตามด้วยเลขฐานสิบหกหกหลักที่แทนค่าแดง เขียว และน้ำเงินตามลำดับ

#FF5733

• #FF — แดง (255 ในเลขฐานสิบ)
• #57 — เขียว (87 ในเลขฐานสิบ)
• #33 — น้ำเงิน (51 ในเลขฐานสิบ)

รูปแบบย่อยของ HEX

HEX รองรับรูปแบบการเขียนหลายแบบสำหรับความต้องการที่แตกต่างกัน:

/* hex หกหลักมาตรฐาน */
color: #FF5733;

/* แบบย่อ — คู่ที่เหมือนกันยุบเหลือสามหลัก */
color: #F53; /* ขยายเป็น #FF5533 */

/* hex แปดหลักพร้อมช่องอัลฟ่า */
color: #FF573380; /* ความทึบ 50% */

HEX แบบย่อ ทำงานเมื่อแต่ละคู่ใช้อักขระที่ตรงกัน: #AABBCC กลายเป็น #ABC นี่เป็นเพียงข้อตกลงการประหยัดพื้นที่ที่รองรับในทุกเบราว์เซอร์

HEX แปดหลัก (#RRGGBBAA) เพิ่มความโปร่งใสอัลฟ่า ค่าอัลฟ่ามีตั้งแต่ 00 (โปร่งใสเต็มที่) ถึง FF (ทึบแสงเต็มที่) การรองรับเบราว์เซอร์สำหรับ hex 8 หลักนั้นยอดเยี่ยมในทุกเบราว์เซอร์สมัยใหม่

แบบย่อสี่หลัก (#RGBA) ก็มีเช่นกัน: #F538 ขยายเป็น #FF553388

เมื่อใดควรใช้ HEX

• คัดลอกจากเครื่องมือออกแบบ — Figma, Sketch และ Adobe XD ทั้งหมดแสดงผล hex ตามค่าเริ่มต้น
• สีแบรนด์ที่กำหนดตายตัว — Hex ชัดเจนและกระชับสำหรับค่าที่ไม่เคยเปลี่ยนแปลง
• เอกสารประกอบและ mockup — Hex เป็นรูปแบบที่นักออกแบบและนักพัฒนารู้จักมากที่สุด
• CSS custom properties — การเก็บโทเค็นแบรนด์ใน hex เป็นแนวทางปฏิบัติทั่วไป

เมื่อใดควรหลีกเลี่ยง HEX

• การจัดการสีแบบโปรแกรม — การปรับช่องสัญญาณแต่ละช่องต้องการการแยกวิเคราะห์สตริง
• การสร้างระบบสี — การสร้างรูปแบบที่สว่างกว่าหรือเข้มกว่าเกี่ยวข้องกับคณิตศาสตร์ที่ไม่เล็กน้อย
• การสื่อสารเจตนาของสี — Hex ไม่ให้ข้อมูลเชิงความหมายเกี่ยวกับสี

รูปแบบสี RGB: การควบคุมช่องสัญญาณ

RGB ย่อมาจาก Red, Green, Blue (แดง, เขียว, น้ำเงิน) ใน CSS เขียนเป็นฟังก์ชันที่มีค่าตั้งแต่ 0 ถึง 255 หรือเปอร์เซ็นต์ (0% ถึง 100%)

/* ไวยากรณ์เดิมที่คั่นด้วยคอมมา */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* ไวยากรณ์สมัยใหม่ที่คั่นด้วยช่องว่าง */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* ค่าเปอร์เซ็นต์ */
color: rgb(100% 34% 20%);

การปรับปรุงไวยากรณ์ RGB สมัยใหม่

ข้อกำหนด CSS Color Level 4 ปรับปรุงฟังก์ชัน rgb() ให้ทันสมัยในสองวิธีที่สำคัญ:

1. ค่าที่คั่นด้วยช่องว่าง — ไม่จำเป็นต้องใช้คอมมาอีกต่อไป ทำให้ไวยากรณ์สะอาดขึ้น
2. อัลฟ่าที่คั่นด้วยเครื่องหมายทับ — ไม่จำเป็นต้องใช้นามแฝง rgba() อีกต่อไป; rgb() ตอนนี้รับช่องอัลฟ่าเสริม

ทั้งไวยากรณ์ดั้งเดิมและสมัยใหม่รองรับอย่างสมบูรณ์ แต่แนะนำให้ใช้ไวยากรณ์สมัยใหม่สำหรับโค้ดใหม่

เมื่อใดควรใช้ RGB

• Canvas และ WebGL — API ข้อมูลภาพคืนค่าพิกเซลในรูปแบบ RGB
• การปรับสีเชิงตัวเลข — เมื่อคุณมีค่าแดง เขียว และน้ำเงินเก็บเป็นตัวแปรแยกกัน
• การแปลจากสเปกการออกแบบ — ระบบการออกแบบบางระบบระบุสีเป็นชุดตัวเลข RGB
• การทำงานกับตัวเลือกสี — UI ตัวเลือกสีจำนวนมากใช้แถบเลื่อน 0-255

เมื่อใดควรหลีกเลี่ยง RGB

• การสร้างพาเลตสีที่สอดคล้องกัน — การปรับแต่งทั้งสามช่องสัญญาณอย่างอิสระทำให้การปรับที่สม่ำเสมอทำได้ยาก
• ความสามารถในการอ่านของมนุษย์ — rgb(123, 45, 67) ไม่ให้ความรู้สึกทันทีว่ามันแทนสีอะไร

รูปแบบสี HSL: สีที่เป็นมิตรกับมนุษย์

HSL ย่อมาจาก Hue (เฉดสี), Saturation (ความอิ่มตัว) และ Lightness (ความสว่าง) รูปแบบนี้เข้าใจง่ายกว่าสำหรับมนุษย์เพราะแยกสีเอง (เฉดสี) ออกจากความเข้ม (ความอิ่มตัว) และความสว่าง (ความสว่าง)

/* ไวยากรณ์ดั้งเดิม */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* ไวยากรณ์สมัยใหม่ */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

ทำความเข้าใจช่องสัญญาณ HSL

Hue (0-360) — มุมสีบนวงล้อสี นี่คือส่วนประกอบ "มันคือสีอะไร":

| ค่า Hue | สี | |-----------|---------| | 0 หรือ 360 | แดง | |-----------|---------| | 30 | ส้ม | | 60 | เหลือง | | 120 | เขียว | | 180 | ฟ้า | | 240 | น้ำเงิน | | 300 | บานเย็น |

Saturation (0-100%) — ความเข้มหรือความสดใสของสี 0% ให้เฉดสีเทา; 100% เป็นเวอร์ชันที่บริสุทธิ์ที่สุดของเฉดสีนั้น

Lightness (0-100%) — ความสว่างหรือความมืดของสี 0% เป็นสีดำเสมอ, 50% เป็นเวอร์ชัน "ปกติ" ของเฉดสี และ 100% เป็นสีขาวเสมอ

เหตุใด HSL จึงเหนือกว่าสำหรับระบบสี

HSL ทำให้งานที่ยากใน HEX หรือ RGB เป็นเรื่องง่าย:

/* สีแบรนด์หลัก */
--brand: hsl(220, 80%, 50%);

/* สถานะ hover — สว่างขึ้นเล็กน้อย */
--brand-hover: hsl(220, 80%, 60%);

/* สถานะ active — เข้มขึ้นเล็กน้อย */
--brand-active: hsl(220, 80%, 40%);

/* สถานะปิดใช้งาน — ลดความอิ่มตัว */
--brand-disabled: hsl(220, 30%, 70%);

/* พื้นหลังอ่อน — สว่างมาก */
--brand-bg: hsl(220, 40%, 95%);

ด้วย HSL ทุกรูปแบบคือการเปลี่ยนแปลงตัวแปรเดียว สิ่งนี้เป็นไปไม่ได้ด้วย HEX และยุ่งยากด้วย RGB

เมื่อใดควรใช้ HSL

• การสร้างพาเลตสี — HSL เป็นมาตรฐานโดยพฤตินัยสำหรับการสร้างโทเค็นการออกแบบ
• ธีมและโหมดมืด — สลับค่าความสว่างเพื่อสร้างรูปแบบโหมดมืด
• สถานะ hover และ focus — ปรับความสว่างด้วยเปอร์เซ็นต์คงที่
• การปรับการช่วยการเข้าถึง — เพิ่มคอนทราสต์ความสว่างโดยไม่เปลี่ยนสี
• ตัวเลือกสีแบบโต้ตอบ — แถบเลื่อน HSL เข้าใจง่ายกว่าแถบเลื่อน RGB

ตารางเปรียบเทียบโดยย่อ

| คุณสมบัติ | HEX | RGB | HSL | |---------|-----|-----|-----| | ความสามารถในการอ่านระดับพิกเซล | แย่ | ปานกลาง | ดี | | ความหมายของช่องสัญญาณ | ทึบแสง | เชิงตัวเลข | เชิงการรับรู้ | | การปรับแบบโปรแกรม | ยาก | ปานกลาง | ง่าย | | ความโปร่งใสอัลฟ่า | hex 8 หลัก | rgb(R G B / A) | hsl(H S% L% / A) | | การรองรับเบราว์เซอร์ | ยอดเยี่ยม | ยอดเยี่ยม | ยอดเยี่ยม | | ไวยากรณ์สมัยใหม่ | ไม่มี | มี | มี | | ค่าเริ่มต้นของเครื่องมือออกแบบ | ใช่ | ทั่วไป | หายาก | | ความเหมาะสมกับระบบสี | แย่ | พอใช้ | ยอดเยี่ยม |

การรองรับเบราว์เซอร์: ทั้งสามรูปแบบปลอดภัย

HEX, RGB และ HSL มีการรองรับเบราว์เซอร์ที่เหมือนกัน ทั้งสามรูปแบบทำงานในทุกเบราว์เซอร์ที่เผยแพร่ตั้งแต่ Internet Explorer 9 ไวยากรณ์สมัยใหม่ที่คั่นด้วยช่องว่าง (rgb(255 0 0 / 0.5)) รองรับในทุกเบราว์เซอร์ที่เผยแพร่ตั้งแต่ปี 2020 ไม่มีเหตุผลด้านความเข้ากันได้ในการเลือกอย่างใดอย่างหนึ่ง

กรอบการตัดสินใจเชิงปฏิบัติ

เลือกรูปแบบของคุณตามสิ่งที่คุณกำลังทำ:

1. คัดลอกจาก mockup การออกแบบ? ใช้ HEX — มันคือสิ่งที่เครื่องมือออกแบบแสดงผล
2. สร้างระบบโทเค็นการออกแบบ? ใช้ HSL — มันทำให้การสร้างพาเลตเป็นเรื่องง่าย
3. ทำงานกับ canvas หรือข้อมูลภาพ? ใช้ RGB — API พิกเซลใช้ RGB โดยตรง
4. เขียนกฎสไตล์ครั้งเดียว? ใช้ HEX — มันกระชับที่สุด
5. สร้างการเปลี่ยนผ่านสีแบบไดนามิก? ใช้ HSL — การประมาณค่าในช่วงเฉดสีสร้างเอฟเฟกต์รุ้ง; การประมาณค่าในช่วง RGB สร้างสีกลางที่ขุ่นมัว

แปลงระหว่างรูปแบบใดก็ได้

ใช้ตัวแปลงสีออนไลน์ฟรีของเราเพื่อแปลงระหว่าง HEX, RGB, HSL และรูปแบบสี CSS อื่นๆ ทันที ไม่ต้องคำนวณด้วยมือหรือค้นหาใน Browser DevTools อีกต่อไป