ถ้าอยากรู้ว่าสีที่ชอบมีรหัสสีอะไร วิธีที่เร็วที่สุดคือเปิดเครื่องมือเลือกสีแล้วกดเลือกสีจากช่องสี เครื่องมือจะแสดงค่า HEX, RGB และ HSL ของสีนั้นให้พร้อมกัน กดคัดลอกค่าที่ต้องการไปวางใน CSS โปรแกรมออกแบบ หรือเอกสารได้ทันที ไม่ต้องลงโปรแกรมและไม่ต้องสมัครสมาชิก
บทความนี้อธิบายว่า HEX, RGB และ HSL คืออะไร ต่างกันยังไง อ่านรหัสสีอย่าง #2563EB ให้ออกได้ยังไง และเลือกใช้แบบไหนในงานจริง พร้อมตารางค่าสีที่ใช้บ่อยและตัวอย่างการเขียนใน CSS ตัวเลขทุกตัวในบทความคำนวณจากตรรกะเดียวกับเครื่องมือจริง
HEX, RGB, HSL ต่างกันยังไง
ทั้งสามแบบเป็นวิธีเขียน “สีเดียวกัน” คนละภาษา ตารางนี้ใช้สีน้ำเงินของเว็บนี้ คือ #2563EB เป็นตัวอย่าง
| รูปแบบ | หน้าตาของค่า | บอกอะไร | เหมาะกับ |
|---|---|---|---|
| HEX | #2563EB |
ปริมาณแดง เขียว น้ำเงิน เขียนเป็นเลขฐาน 16 คู่ละสี | CSS, Figma, Canva และเครื่องมือออกแบบทั่วไป |
| RGB | rgb(37, 99, 235) |
ปริมาณแดง เขียว น้ำเงิน เป็นเลขฐาน 10 ช่วง 0-255 | โปรแกรมที่ให้ใส่ตัวเลขแยกทีละช่อง สคริปต์และโค้ดที่คำนวณค่าสี |
| HSL | hsl(221, 83%, 53%) |
เฉดสี (องศา) ความอิ่มสี (%) และความสว่าง (%) | ปรับสีให้อ่อนลง เข้มขึ้น หรือทำชุดสีที่เข้ากัน |
พูดสั้นๆ คือ HEX กับ RGB เป็นข้อมูลชุดเดียวกัน ต่างกันที่การเขียน ส่วน HSL เป็นอีกมุมมองหนึ่งที่คนอ่านแล้วปรับสีได้ง่ายกว่า เพราะอยากให้สีสว่างขึ้นก็แค่เพิ่มเลขตัวที่สาม ไม่ต้องไล่แก้ทีละช่องแดง เขียว น้ำเงิน
อ่านรหัส HEX ให้ออกใน 30 วินาที
รหัส HEX ขึ้นต้นด้วย # ตามด้วยตัวอักษร 6 ตัว แบ่งเป็น 3 คู่ คือ แดง เขียว น้ำเงิน เรียงตามลำดับ แต่ละคู่เป็นเลขฐาน 16 ที่ใช้ตัวเลข 0-9 และตัวอักษร A-F โดยค่าต่ำสุดคือ 00 (0) และสูงสุดคือ FF (255) เมื่อแปลง #2563EB ทีละคู่จะได้
25(แดง) = 3763(เขียว) = 99EB(น้ำเงิน) = 235
จึงเท่ากับ rgb(37, 99, 235) พอดี ถ้าอยากรู้ว่าทำไม FF เท่ากับ 255 อ่านวิธีแปลงเลขฐานต่อได้ที่บทความเลขฐาน 2 8 10 16 คืออะไร
เมื่อแต่ละสีมีได้ 256 ระดับ (0-255) การผสมสามสีจึงได้ 256 × 256 × 256 = 16,777,216 สีทั้งหมด ซึ่งเป็นจำนวนสีที่รหัส HEX 6 หลักเขียนได้
อีกสองเรื่องที่ควรรู้เกี่ยวกับ HEX ในเอกสาร CSS ของ MDN
- เขียนแบบย่อ 3 หลักได้ เช่น
#F00คือ#FF0000(สีแดงเต็มที่) โดยแต่ละหลักถูกทำซ้ำเป็นคู่ เครื่องมือเลือกสีของเรารับ HEX ทั้ง 3 หลักและ 6 หลัก - เพิ่มความโปร่งใสได้ด้วยรหัส 8 หลัก เช่น
#2563EB80สองหลักท้ายคือค่าความโปร่งใส00(โปร่งใสเต็มที่) ถึงFF(ทึบ) ใช้ได้ในเบราว์เซอร์รุ่นปัจจุบัน แต่ใช้ไม่ได้ใน Internet Explorer
เบราว์เซอร์อ่าน #2563eb ตัวเล็กกับ #2563EB ตัวใหญ่เป็นสีเดียวกัน เลือกเขียนแบบไหนก็ได้ ขอแค่ใช้ให้เหมือนกันทั้งไฟล์จะอ่านง่ายกว่า
ตารางรหัสสีที่ใช้บ่อย
ตารางนี้ให้ค่าครบทั้งสามรูปแบบ ค่า HSL เป็นเลขที่ปัดเศษเป็นจำนวนเต็มตามที่เครื่องมือแสดง
| สี | HEX | RGB | HSL |
|---|---|---|---|
| แดง | #FF0000 |
rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| เขียว | #00FF00 |
rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| น้ำเงิน | #0000FF |
rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| ขาว | #FFFFFF |
rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| ดำ | #000000 |
rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| เทา | #808080 |
rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| ส้ม | #FFA500 |
rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| เหลืองทอง | #FFD700 |
rgb(255, 215, 0) | hsl(51, 100%, 50%) |
| ชมพู | #FF69B4 |
rgb(255, 105, 180) | hsl(330, 100%, 71%) |
| เขียวมรกต | #10B981 |
rgb(16, 185, 129) | hsl(160, 84%, 39%) |
ลองสังเกตสามแถวแรก สีแดง เขียว น้ำเงินบริสุทธิ์มีค่า H เท่ากับ 0, 120 และ 240 องศาตามลำดับ และ S กับ L เป็น 100% และ 50% เหมือนกัน เพราะ H คือตำแหน่งบนวงล้อสี ส่วน S กับ L บอกว่าสีนั้นจัดและสว่างแค่ไหน แถวขาว ดำ เทามี S เป็น 0% เพราะเป็นสีที่ไม่มีเฉดสีเลย แยกกันด้วยความสว่าง L อย่างเดียว
วิธีใช้เครื่องมือเลือกสี
- เปิดหน้าเครื่องมือเลือกสีออนไลน์
- กดที่ช่อง “เลือกสี” แล้วเลือกสีที่ต้องการ หรือถ้ามีรหัส HEX อยู่แล้วให้พิมพ์ลงในช่อง HEX ได้เลย (ใส่
#หรือไม่ใส่ก็ได้) - ดูค่า HEX, RGB และ HSL ที่ขึ้นพร้อมกัน พร้อมตัวอย่างสีด้านบน
- กดปุ่ม “คัดลอก” ข้างค่าที่ต้องการ
- วางค่านั้นลงใน CSS, Figma, PowerPoint หรือที่ไหนก็ได้ที่รับรหัสสี
- ถ้าอยากได้เฉดอ่อนหรือเข้มของสีเดิม กดเลือกจากแถบเฉดสีด้านล่าง ค่าจะอัปเดตให้ทันที
เครื่องมือทำงานในเบราว์เซอร์ของคุณเอง ไม่มีการอัปโหลดหรือเก็บข้อมูลใดๆ ไว้ที่เซิร์ฟเวอร์
แถบเฉดสีอ่อน-เข้ม ได้ค่าอะไรบ้าง
แถบเฉดสีของเครื่องมือมี 7 ช่อง สร้างโดยคงเฉดสี (H) และความอิ่มสี (S) ของสีที่เลือกไว้ แล้วเปลี่ยนเฉพาะความสว่าง (L) นี่คือผลของ #2563EB
| ความสว่าง (L) | HEX | ใช้ทำอะไรได้ |
|---|---|---|
| 90% | #D0DEFB |
พื้นหลังอ่อนๆ ของการ์ดหรือกล่องข้อความ |
| 75% | #8AACF4 |
เส้นขอบ ไอคอนที่ไม่ต้องเด่น |
| 60% | #447AEE |
สีตอน hover ของปุ่ม |
| 53% (สีที่เลือก) | #2563EB |
สีหลักของแบรนด์หรือปุ่ม |
| 38% | #1043B1 |
สีตอนกดปุ่ม ตัวอักษรบนพื้นอ่อน |
| 25% | #0B2C75 |
หัวข้อ แถบเมนูโทนเข้ม |
| 14% | #061941 |
พื้นหลังโหมดมืด เงา |
ตารางนี้ช่วยให้ได้ชุดสีที่เข้ากันโดยไม่ต้องเดา เพราะทุกเฉดมาจากสีเดียวกัน คอลัมน์ “ใช้ทำอะไรได้” เป็นแนวทางการใช้งาน ไม่ใช่กฎตายตัว
เอารหัสสีไปใช้ใน CSS ยังไง
รูปแบบทั้งสามใช้แทนกันได้ในไฟล์ CSS เดียวกัน เขียนแบบไหนก็ได้ผลลัพธ์เป็นสีเดียวกัน
.button {
background: #2563EB; /* HEX */
color: rgb(255, 255, 255); /* RGB */
border: 2px solid hsl(221, 83%, 38%); /* HSL เข้มกว่าเดิม */
}
.button:hover {
background: hsl(221, 83%, 60%); /* สว่างขึ้นแค่เปลี่ยน L */
}
.overlay {
background: #2563EB80; /* HEX 8 หลัก โปร่งใสประมาณ 50% */
}ข้อดีของ HSL คือเห็นได้ทันทีว่า .button:hover สว่างกว่าปุ่มปกติแค่ไหน ถ้าเขียนเป็น HEX ต้องคำนวณค่าใหม่ทุกครั้ง ซึ่งเป็นเหตุผลที่คนทำเว็บหลายคนเก็บสีหลักไว้เป็น HEX แล้วใช้เครื่องมืออย่างเครื่องมือเลือกสีหาเฉดข้างเคียงมาเขียนเป็น HSL อีกที
เช็กความคมชัดของตัวอักษรกับพื้นหลัง
สวยอย่างเดียวไม่พอ ตัวอักษรต้องอ่านออกด้วย แนวทาง WCAG (Web Content Accessibility Guidelines) ระดับ AA ข้อ 1.4.3 กำหนดว่าตัวอักษรปกติควรมีอัตราส่วนความต่างสีกับพื้นหลังอย่างน้อย 4.5:1 และตัวอักษรขนาดใหญ่ (อย่างน้อย 18 พอยต์ หรือ 14 พอยต์ตัวหนา) อย่างน้อย 3:1 ตัวอย่างอัตราส่วนบนพื้นขาว #FFFFFF ที่คำนวณตามสูตรของ WCAG
| สีตัวอักษร | อัตราส่วนบนพื้นขาว | ผลกับตัวอักษรปกติ (4.5:1) |
|---|---|---|
#2563EB น้ำเงิน |
5.17 : 1 | ผ่าน |
#6B7280 เทาเข้ม |
4.83 : 1 | ผ่าน |
#808080 เทากลาง |
3.95 : 1 | ไม่ผ่าน (ผ่านเฉพาะตัวอักษรใหญ่) |
#10B981 เขียวมรกต |
2.54 : 1 | ไม่ผ่าน |
#FFD700 เหลืองทอง |
1.40 : 1 | ไม่ผ่านอย่างชัดเจน |
สีเหลืองหรือเขียวสว่างจึงไม่เหมาะเป็นสีตัวอักษรบนพื้นขาว แต่ใช้เป็นพื้นปุ่มหรือไอคอนได้ โดยวางตัวอักษรสีเข้มทับ เครื่องมือเลือกสีของเราแสดงเฉพาะค่า HEX, RGB และ HSL ไม่ได้คำนวณอัตราส่วนความต่างสีให้ ถ้าต้องการตัวเลขนี้ให้ใช้เครื่องมือตรวจ contrast แยกต่างหาก
เคล็ดลับเลือกสีให้ใช้งานได้จริง
- เก็บ HEX ไว้เป็นค่าหลัก ค่า HSL ที่ปัดเศษเป็นจำนวนเต็มแปลงกลับอาจคลาดเคลื่อน เช่น
hsl(221, 83%, 53%)แปลงกลับได้#2463EBไม่ใช่#2563EBต่างกันหนึ่งหน่วย ตามองไม่เห็น แต่ถ้าต้องการสีเป๊ะตามแบรนด์ให้ยึด HEX เดิม - จำกัดสีหลักไว้ 1-2 สี แล้วสร้างเฉดอ่อน-เข้มจากสีเหล่านั้น จะได้งานที่ดูเป็นชุดเดียวกัน
- ใช้สีเดียวกันทั้งเว็บหรือเอกสาร คัดลอกจากเครื่องมือมาวางทุกครั้ง ดีกว่าเลือกด้วยตาใหม่
- ดูสีบนจอจริงของกลุ่มเป้าหมาย จอแต่ละรุ่นแสดงสีไม่เท่ากัน โดยเฉพาะมือถือกับจอคอม
- สีที่ใช้พิมพ์อาจต่างจากบนจอ เครื่องพิมพ์ใช้ระบบสีอีกแบบ (CMYK) ค่า HEX ที่เห็นบนจอจึงไม่ได้ออกมาเหมือนเป๊ะบนกระดาษ
ถ้าทำงานกับรูปภาพควบคู่กัน อ่านเรื่องการเลือกชนิดไฟล์ได้ที่ JPG กับ PNG ต่างกันยังไง และการเปลี่ยนขนาดรูปไม่ให้เบลอที่ บีบอัดรูปภาพไม่ให้เบลอ ส่วนคนที่ต้องแก้ข้อความรหัสสีให้เป็นตัวพิมพ์ใหญ่ทั้งหมด ใช้วิธีเปลี่ยนตัวพิมพ์เล็กเป็นตัวพิมพ์ใหญ่ได้
คำถามที่พบบ่อย
รหัสสีคืออะไร
รหัสสีคือค่าที่ใช้บอกคอมพิวเตอร์ว่าต้องแสดงสีอะไร มีหลายรูปแบบ ที่ใช้บ่อยในงานเว็บคือ HEX, RGB และ HSL ซึ่งแปลงข้อมูลระหว่างกันได้
HEX กับ RGB ต่างกันยังไง
เป็นข้อมูลเดียวกัน ต่างกันที่การเขียน HEX ใช้เลขฐาน 16 เขียนติดกันหกหลัก เช่น #2563EB ส่วน RGB ใช้เลขฐาน 10 สามตัว เช่น rgb(37, 99, 235)
ทำไมสีที่ได้จาก HSL ไม่ตรงกับ HEX เดิมเป๊ะ
เพราะค่า HSL ที่แสดงถูกปัดเป็นจำนวนเต็ม ทำให้แปลงกลับมาแล้วคลาดเคลื่อนได้ 1-2 หน่วยในบางช่องสี ถ้าต้องการสีที่แม่นยำให้เก็บค่า HEX ไว้
#FFFFFF กับ #000000 คือสีอะไร
#FFFFFF คือสีขาว (ทุกช่องสีเต็ม 255) และ #000000 คือสีดำ (ทุกช่องสีเป็น 0)
ใส่รหัสสีแล้วไม่เปลี่ยนในเครื่องมือ ทำไง
ตรวจว่ารหัสมี 3 หรือ 6 หลัก และใช้เฉพาะ 0-9 กับ A-F เท่านั้น ถ้ามีตัวอักษรอื่นหรือจำนวนหลักไม่ตรง เครื่องมือจะคงค่าสีเดิมไว้
เครื่องมือเก็บสีที่ฉันเลือกไว้ไหม
ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการส่งหรือบันทึกข้อมูลไปที่เซิร์ฟเวอร์
สรุป
HEX, RGB และ HSL คือภาษาเขียนสีสามแบบที่แปลงกันได้ HEX กับ RGB บอกปริมาณแดง เขียว น้ำเงิน ส่วน HSL บอกเฉดสี ความอิ่ม และความสว่าง ทำให้ปรับโทนง่ายกว่า เก็บ HEX ไว้เป็นค่าหลัก ใช้ HSL เมื่อต้องการสร้างเฉดอ่อน-เข้ม และอย่าลืมเช็กความต่างสีของตัวอักษรกับพื้นหลังก่อนใช้งานจริง พร้อมแล้วลองเลือกสีออนไลน์ฟรีแล้วคัดลอกรหัสสีไปใช้ได้เลย
แหล่งอ้างอิง: MDN Web Docs (CSS color values และ hex-color: รูปแบบ #rgb #rrggbb #rrggbbaa และฟังก์ชัน rgb() hsl()), W3C WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum) ตัวเลขและตารางทั้งหมดคำนวณจากตรรกะของเครื่องมือเลือกสีและสูตร relative luminance ของ WCAG