ตัวแปลงสี

ตัวแปลงสีเป็นเครื่องมือฟรีสำหรับแปลงค่าสีในรูปแบบ HEX, HEX alpha, RGB, RGBA, HSV, HSL หรือ HSLA ให้เป็นค่าสีเทียบเท่าในรูปแบบต่าง ๆ

แปลงค่าสีรูปแบบใดได้บ้าง?

คุณป้อนค่าสีแบบ HEX, HEX alpha, RGB, RGBA, HSV, HSL หรือ HSLA แล้วดูค่าที่ตรงกันในรูปแบบทั้งหมดที่รองรับได้ เหมาะสำหรับกรณีที่ข้อกำหนดงานออกแบบ สไตล์ชีต หรือ API ของบุคคลที่สามใช้รูปแบบต่างกันเพื่อแทนสีเดียวกัน

• HEX ใช้เลขฐานสิบหกสองหลักแทนช่องสีแดง เขียว และน้ำเงิน โดยทั่วไปอยู่ในรูป #RRGGBB
• อัลฟา HEX เพิ่มช่องความทึบ ในรูปแบบ CSS สมัยใหม่มักเขียนเป็น #RRGGBBAA
• RGB ใช้ค่าของช่องสีแดง เขียว และน้ำเงิน ซึ่งโดยทั่วไปมีค่าตั้งแต่ 0 ถึง 255
• RGBA เพิ่มค่า alpha สำหรับความโปร่งใสให้กับ RGB
• HSV อธิบายสีด้วยเฉดสี ความอิ่มตัว และค่าความสว่าง มักใช้ในตัวเลือกสี แต่ไม่ใช่ฟังก์ชันสีมาตรฐานของ CSS
• HSL อธิบายสีด้วยเฉดสี ความอิ่มตัว และความสว่าง โดย CSS รองรับ HSL โดยตรง
• HSLA คือ HSL ที่เพิ่มค่า alpha

RGB และ HSL เป็นวิธีอธิบายสีเดียวกันด้วยหลักคณิตศาสตร์คนละแบบ ไม่ใช่คนละสี การแปลงช่วยเปลี่ยนรูปแบบการเขียนโดยคงสีที่ต้องการไว้ให้ใกล้เคียงที่สุดเท่าที่รูปแบบปลายทางรองรับ

ใช้ตัวแปลงสีอย่างไร?

ป้อนค่าสีแบบสมบูรณ์หนึ่งค่าลงในช่อง Color โดยใช้รูปแบบที่รองรับ จากนั้นดูหรือคัดลอกค่าที่สร้างขึ้นจากช่องผลลัพธ์

1. คัดลอกค่าต้นฉบับให้ครบถ้วน รวมถึงเครื่องหมายแฮชด้านหน้า จุลภาค วงเล็บ เครื่องหมายเปอร์เซ็นต์ หรือส่วนประกอบ alpha หากมี
2. วางค่าลงในช่อง Color
3. ดูค่าเทียบเท่าที่แสดงใต้ HEX, อัลฟา HEX, RGB, RGBA, HSV, HSL และ HSLA
4. เลือกรูปแบบสีที่ระบบปลายทางรองรับ สำหรับกฎ CSS มักใช้ HEX, RGB, RGBA, HSL และ HSLA ส่วน HSV พบได้บ่อยกว่าในหน้าจอแก้ไขและการคำนวณสี

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

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

ควรอ่านค่าที่แปลงแล้วอย่างไร?

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

สำหรับ HEX แบบหกหลัก เลขคู่แรกแทนสีแดง คู่ที่สองแทนสีเขียว และคู่ที่สามแทนสีน้ำเงิน ตัวอย่างเช่น #336699 มีค่าช่องสีฐานสิบหกเป็น 33, 66 และ 99 ซึ่งตรงกับค่า RGB ฐานสิบเป็น 51, 102 และ 153

โดยทั่วไป เฉดสีจะแสดงเป็นมุมรอบวงล้อสี ส่วนความอิ่มตัวและความสว่างหรือค่าความสว่างมักแสดงเป็นเปอร์เซ็นต์ ความสว่างของ HSL กับค่าความสว่างของ HSV ใช้วิธีคำนวณต่างกัน จึงไม่ควรเปรียบเทียบเปอร์เซ็นต์เหมือนเป็นการวัดคุณสมบัติเดียวกัน

Alpha ใช้อธิบายความทึบ สีที่ทึบสนิทไม่จำเป็นต้องใช้รูปแบบที่รองรับ alpha แต่สีโปร่งใสบางส่วนจำเป็นต้องใช้ หากคัดลอกสีแบบ RGBA หรือ HSLA ไปใส่ใน RGB, HSL หรือ HEX แบบหกหลัก รูปแบบปลายทางเหล่านั้นจะไม่มีส่วนสำหรับบันทึกช่อง alpha

ตัวแปลงนี้ไม่ได้ระบุว่าเป็นเครื่องมือตรวจสอบไวยากรณ์ที่แสดงข้อความวินิจฉัยโดยละเอียด จึงไม่ควรใช้เพื่อค้นหาอักขระที่ผิดในข้อมูลซึ่งมีรูปแบบไม่ถูกต้อง ข้อผิดพลาดที่พบบ่อย ได้แก่ HEX ไม่มีเครื่องหมายแฮช วงเล็บเปิดปิดไม่ครบ ขาดเครื่องหมายเปอร์เซ็นต์ ค่า alpha อยู่นอกช่วงที่คาดไว้ หรือใช้หลักเกณฑ์ของช่องสี HSL และ RGB ปะปนกัน

ตัวอย่างการแปลงค่าสี

ตัวอย่างสั้น ๆ นี้แสดงความสัมพันธ์ระหว่าง HEX, RGB, HSL และ HSV สีแดงล้วนเขียนเป็นรูปแบบเทียบเท่าต่อไปนี้ได้

• ค่า HEX ที่ป้อน #ff0000
• ค่า RGB ที่เทียบเท่า rgb(255, 0, 0)
• ค่า HSL ที่เทียบเท่า hsl(0, 100%, 50%)
• ค่า HSV ที่เทียบเท่า hsv(0, 100%, 100%)

สำหรับสีที่มีความอิ่มตัวน้อยลง #336699 เทียบเท่ากับ rgb(51, 102, 153) ค่า HSL คือ hsl(210, 50%, 40%) ส่วนค่า HSV มีเฉดสี 210 องศา ความอิ่มตัวประมาณ 66.7% และค่าความสว่าง 60% อินเทอร์เฟซอาจปัดเศษทศนิยมหรือเว้นวรรคต่างกัน โดยไม่ทำให้ความหมายในการใช้งานเปลี่ยนไป

ความโปร่งใสเป็นอีกตัวอย่างที่เข้าใจได้ง่าย rgba(255, 0, 0, 0.5) และ hsla(0, 100%, 50%, 0.5) ต่างก็หมายถึงสีแดงที่มีความทึบครึ่งหนึ่ง ตามรูปแบบ HEX แบบแปดหลักที่ใช้กันทั่วไปใน CSS ค่าที่ตรงกันคือ #ff000080 โดย 80 คือไบต์ alpha ที่ผ่านการควอนไทซ์

ควรแปลงค่าสีเมื่อใด?

การแปลงค่าสีมีประโยชน์เมื่อแอปพลิเคชันปลายทางต้องการรูปแบบอื่น หรือเมื่อการเขียนสีอีกรูปแบบช่วยให้แก้จุดบกพร่องได้ง่ายขึ้น กรณีที่พบบ่อย ได้แก่ การแปลงค่าจาก Figma เป็นพร็อพเพอร์ตีแบบกำหนดเองของ CSS การตรวจสอบค่า RGBA ที่พบใน Chrome DevTools การเตรียมช่องค่าสีสำหรับเพย์โหลด API หรือการตรวจสอบข้อมูลธีมจากบุคคลที่สามก่อนนำไปใช้งานจริง

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

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

คำถามที่พบบ่อย

ตัวแปลงรองรับชื่อสีของ CSS ไหม?

ไม่รองรับ รูปแบบข้อมูลที่ระบุว่ารองรับมีเฉพาะ HEX, HEX alpha, RGB, RGBA, HSV, HSL และ HSLA ดังนั้นชื่ออย่าง red, rebeccapurple หรือ transparent จึงไม่อยู่ในรายการอินพุตที่รองรับ ให้แปลงชื่อสีเป็นค่าตัวเลขของ CSS ก่อนนำมาป้อน

ป้อนค่า HEX แบบสามหลักได้ไหม?

อินพุตที่รองรับมี HEX รวมอยู่ด้วย แต่ไม่มีเอกสารระบุความยาวของค่า HEX ที่ใช้ได้ หากต้องการให้ระบบอ่านค่าได้แน่นอน ให้ขยายรูปแบบย่ออย่าง #369 เป็น #336699 หลักการเดียวกันนี้ใช้กับรูปแบบย่อสี่หลักที่มี alpha

วางคำประกาศ CSS ทั้งบรรทัดแทนค่าสีได้ไหม?

ให้ป้อนเฉพาะค่าสี ไม่ใช่คำประกาศทั้งบรรทัด ตัวอย่างเช่น ใช้ #336699 แทน color: #336699; เพราะชื่อพร็อพเพอร์ตีและอัฒภาคไม่ได้เป็นส่วนหนึ่งของค่าสี หากคัดลอกค่าจาก JSON หรือไฟล์กำหนดค่า ให้นำเครื่องหมายอัญประกาศที่ครอบค่าออกด้วย

ผลลัพธ์จะเก็บข้อมูลขอบเขตสีกว้างหรือโปรไฟล์สีไว้ไหม?

ไม่มีการระบุว่ารองรับรูปแบบขอบเขตสีกว้างหรือโปรไฟล์สีที่ฝังไว้ ข้อมูล Display P3, Lab, LCH และโปรไฟล์ ICC มีรายละเอียดที่ช่อง HEX, RGB, HSL และ HSV ซึ่งมีอยู่ไม่สามารถแสดงได้ หากต้องแปลงโดยคำนึงถึงโปรไฟล์สี ให้ใช้แอปพลิเคชันที่รองรับการจัดการสี

ทำไมค่าที่แปลงแล้วบางครั้งจึงมีทศนิยม?

การคำนวณ HSL และ HSV อาจได้ค่าเปอร์เซ็นต์เป็นเศษส่วน แม้ช่อง RGB ต้นทางจะเป็นจำนวนเต็ม การปัดเศษตัวเลขเหล่านี้อาจทำให้สีเปลี่ยนเล็กน้อยเมื่อนำไปแปลงกลับเป็น RGB ในภายหลัง ควรเก็บความละเอียดของค่าที่มีไว้เมื่อบันทึกโทเค็นงานออกแบบ แล้วปัดเศษเฉพาะเมื่อรูปแบบปลายทางหรือมาตรฐานการเขียนโค้ดกำหนดให้ทำ