HEX, RGB, HSL: ทำความเข้าใจรหัสสีเว็บ

คุณกำลังแก้ไขเว็บไซต์แล้วเห็น #FF5733 ใน CSS หรือคุณทำงานกับนักออกแบบที่ส่ง rgb(255, 87, 51) มา หรือเครื่องมือออกแบบแสดงสีเป็น hsl(11, 100%, 60%) ทั้งหมดนี้อธิบายสีเดียวกันทุกประการ คือสีส้มแดงสด แต่ในสามรูปแบบที่แตกต่างกัน

หากคุณเคยสับสนกับรหัสสีเว็บ คู่มือนี้จะทำให้ทุกอย่างชัดเจนใน 5 นาที

สีดิจิทัลทำงานอย่างไร

ทุกสีบนหน้าจอของคุณถูกสร้างจากการผสมแสงสามสีหลัก: แดง, เขียว และ น้ำเงิน นี่คือโมเดลสี RGB โดยการปรับความเข้มของแต่ละช่องสัญญาณจากศูนย์ (ปิด) ถึงสูงสุด (สว่างเต็มที่) คุณสามารถสร้างสีได้ประมาณ 16.7 ล้านสีที่จอแสดงผลมาตรฐานแสดงได้

• แดง 255, เขียว 0, น้ำเงิน 0 = สีแดงบริสุทธิ์
• แดง 0, เขียว 255, น้ำเงิน 0 = สีเขียวบริสุทธิ์
• แดง 0, เขียว 0, น้ำเงิน 255 = สีน้ำเงินบริสุทธิ์
• แดง 255, เขียว 255, น้ำเงิน 255 = สีขาว (ทุกช่องเต็ม)
• แดง 0, เขียว 0, น้ำเงิน 0 = สีดำ (ทุกช่องปิด)
• แดง 255, เขียว 255, น้ำเงิน 0 = สีเหลือง (แดง + เขียว)

รูปแบบสีทุกแบบที่ใช้บนเว็บเป็นเพียงวิธีการแสดงค่าช่องสัญญาณเหล่านี้ที่แตกต่างกัน

สี HEX

หน้าตาเป็นอย่างไร

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

ทำงานอย่างไร

รหัสสี HEX เป็นสตริง 6 ตัวอักษรนำหน้าด้วยเครื่องหมาย hash ตัวอักษร 6 ตัวแบ่งเป็นสามคู่ แต่ละคู่แทนช่องสัญญาณสีในเลขฐานสิบหก (base 16):

เลขฐานสิบหกใช้ตัวเลข 0-9 และตัวอักษร A-F โดย A=10, B=11, C=12, D=13, E=14, F=15 ดังนั้น FF ในฐานสิบหกเท่ากับ 255 ในฐานสิบ (15 x 16 + 15 = 255)

แยกส่วน #FF5733:

• FF = แดงที่ 255 (สูงสุด)
• 57 = เขียวที่ 87
• 33 = น้ำเงินที่ 51

ให้ผลลัพธ์เป็นสีส้มแดงสด

รูปย่อ

เมื่อแต่ละคู่มีตัวอักษรเหมือนกัน คุณสามารถใช้รูปย่อสามตัวอักษร:

• #FF0000 เขียนเป็น #F00 ได้
• #3366FF เขียนเป็น #36F ได้
• #000000 เขียนเป็น #000 ได้

สี RGB

หน้าตาเป็นอย่างไร

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

ทำงานอย่างไร

สัญลักษณ์ RGB ระบุค่าช่องสัญญาณแดง เขียว และน้ำเงินโดยตรงเป็นตัวเลขฐานสิบตั้งแต่ 0 ถึง 255 เป็นรูปแบบที่เข้าใจง่ายที่สุดเพราะตัวเลขสอดคล้องโดยตรงกับความเข้มของแต่ละช่องสัญญาณแสง

rgb(255, 87, 51) หมายความว่า:

• แดง: 255 (สูงสุด)
• เขียว: 87 (ประมาณหนึ่งในสาม)
• น้ำเงิน: 51 (ประมาณหนึ่งในห้า)

RGBA: เพิ่มความโปร่งใส

RGBA เพิ่มค่าที่สี่สำหรับความทึบ (alpha) ตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด):

rgba(255, 87, 51, 0.5)   /* โปร่งใส 50% */
rgba(0, 0, 0, 0.8)        /* ทึบ 80% สีดำ */

มีประโยชน์สำหรับ overlay เงา และองค์ประกอบการออกแบบที่ต้องแสดงเนื้อหาด้านหลัง

สี HSL

หน้าตาเป็นอย่างไร

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

ทำงานอย่างไร

HSL ย่อมาจาก Hue, Saturation, Lightness แทนที่จะคิดในแง่การผสมช่องสัญญาณแดง/เขียว/น้ำเงิน HSL อธิบายสีตามวิธีที่มนุษย์คิดเรื่องสีตามธรรมชาติ

Hue คือตัวสีเอง แสดงเป็นองศาบนวงล้อสี (0-360):

• 0° / 360° = แดง
• 60° = เหลือง
• 120° = เขียว
• 180° = ฟ้า (Cyan)
• 240° = น้ำเงิน
• 300° = ม่วงแดง (Magenta)

Saturation คือความสดของสี ตั้งแต่ 0% (เทา) ถึง 100% (สดเต็มที่)

Lightness คือความสว่างหรือมืดของสี ตั้งแต่ 0% (ดำ) ถึง 100% (ขาว) 50% คือความสว่าง "ปกติ"

hsl(11, 100%, 60%) หมายความว่า:

• Hue: 11° (แดงออกส้มเล็กน้อย)
• Saturation: 100% (สดเต็มที่)
• Lightness: 60% (สว่างกว่าปกติเล็กน้อย)

HSLA: เพิ่มความโปร่งใส

เช่นเดียวกับ RGBA, HSLA เพิ่มช่อง alpha:

hsla(11, 100%, 60%, 0.5)   /* โปร่งใส 50% */

เมื่อไหร่ควรใช้รูปแบบไหน

สำหรับการพัฒนาเว็บ

HEX เป็นมาตรฐานโดยพฤตินัย CSS ส่วนใหญ่เขียนด้วยรหัส HEX เพราะกะทัดรัดและนักพัฒนาทุกคนรู้จัก

สำหรับระบบการออกแบบ

HSL เหมาะอย่างยิ่งสำหรับการสร้างจานสีที่สม่ำเสมอ ในการสร้างตัวแปรสว่างและมืดของสีแบรนด์ เพียงปรับค่า lightness:

• สีหลัก: hsl(210, 80%, 50%)
• ตัวแปรสว่าง: hsl(210, 80%, 70%)
• ตัวแปรมืด: hsl(210, 80%, 30%)

Hue และ saturation เท่าเดิม รับประกันว่าตัวแปรเป็น "สี" เดียวกันที่ความสว่างต่างกัน

สำหรับความโปร่งใส

ใช้ RGBA หรือ HSLA เมื่อต้องการสีกึ่งโปร่งใสสำหรับ overlay เงา หรือเอฟเฟกต์กระจก

การแปลงระหว่างรูปแบบ

คุณจะต้องแปลงระหว่างรูปแบบบ่อยๆ นักออกแบบส่งค่า HSL แต่โค้ดเบสใช้ HEX แบรนด์ไกด์ระบุ RGB แต่คุณต้องการ HSL สำหรับสร้างตัวแปร

การคำนวณตรงไปตรงมาแต่น่าเบื่อที่จะทำเอง เครื่องมือแปลงจัดการได้ทันที

เริ่มทำงานกับสี:

• แปลงรหัสสี
• เครื่องมือแปลงสี
• ตัวสร้างจานสี

เครื่องมือทั้งหมดฟรีและทำงานในเบราว์เซอร์โดยตรง