Color Name Lookup: หาชื่อสี CSS ที่ใกล้เคียงที่สุดจาก hex code ได้ในคลิกเดียว

เวลาทำงานกับสีบนเว็บ หลายครั้งเราถือ hex code อยู่ในมือแต่อยากรู้ว่าสีนี้ "ชื่ออะไร" ในโลกของ CSS named colors — มันคือ RoyalBlue, Tomato หรือ AliceBlue กันแน่? การนั่งไล่เทียบทีละสีจากตารางกว่าร้อยชื่อไม่ใช่เรื่องสนุกเลย Color Name Lookup คือเครื่องมือฟรีที่ออกแบบมาเพื่อแก้ปัญหานี้โดยเฉพาะ: เพียงใส่ hex color อะไรก็ได้ เครื่องมือจะหา named color ที่ใกล้ที่สุดให้ทันที พร้อมค่า RGB, distance และ match percentage

หลักการทำงานง่ายมาก เครื่องมือจะแปลง hex ของคุณเป็นค่า RGB ก่อน จากนั้นคำนวณระยะห่าง (distance) ระหว่างสีของเรากับ named color ทั้ง 148 สีในฐานข้อมูล แล้วเรียงลำดับจากใกล้ไปไกล แสดงผลเป็น top 5 สีที่ใกล้เคียงที่สุด พร้อมโค้ด CSS สำเร็จรูปที่กด copy ได้ในคลิกเดียว

ทุกอย่างทำงานแบบ 100% client-side บน browser ของคุณ ไม่มีการส่งข้อมูลสีหรือประวัติการค้นหาขึ้น server ทั้งสิ้น ใช้ได้ฟรี ไม่จำกัดจำนวนครั้ง และไม่ต้องสมัครสมาชิกใด ๆ

ทำไมต้องใช้ Color Name Lookup?

• เปลี่ยน hex code เป็นชื่อที่อ่านออกได้ทันที — hex อย่าง #4169E1 แทบไม่บอกอะไรเรา แต่ถ้ารู้ว่ามันคือ RoyalBlue ก็สื่อสารกับทีมได้เข้าใจตรงกันทันทีโดยไม่ต้องเปิดตารางสี
• ไม่ได้ให้แค่คำตอบเดียว — เครื่องมือแสดง top 5 สีที่ใกล้ที่สุด ทำให้คุณมีตัวเลือกสำรองเสมอ ถ้าสีอันดับหนึ่งดูเพี้ยนไปนิด ก็ขยับไปใช้อันดับสองหรือสามได้ทันที
• มี match percentage ประกอบการตัดสินใจ — บอกเป็นเปอร์เซ็นต์ว่าสีที่พบ "ใกล้" กับสีต้นฉบับแค่ไหน ถ้า 100% แปลว่าตรงกันพอดี ถ้าต่ำลงมาก็รู้ตัวล่วงหน้าว่าสีจะเพี้ยนไปบ้าง
• copy โค้ด CSS ได้ในคลิกเดียว — แต่ละผลลัพธ์มาพร้อมโค้ดอย่าง color: RoyalBlue; กด copy แล้ววางลงโปรเจกต์ได้ทันที ไม่ต้องจำชื่อไปพิมพ์เอง
• รองรับ hex ทุกฟอร์แมต — จะใส่ #FFF, FFF, #FFFFFF หรือ FFFFFF ก็ทำงานได้เหมือนกัน รองรับทั้งแบบ 3-digit และ 6-digit
• ปลอดภัยและเป็นส่วนตัว — ทุกอย่างรันบน browser แบบ 100% client-side ไม่มีอะไรถูกอัปโหลด เหมาะกับงาน design ที่เป็นความลับหรือโปรเจกต์ที่ยังไม่เปิดตัว

ฟีเจอร์เด่น

• แสดง top 5 พร้อมข้อมูลครบทุกมิติ: แต่ละผลลัพธ์ไม่ได้มีแค่ชื่อสี แต่มาพร้อม hex code, ค่า RGB, distance score และ match percentage ทำให้เปรียบเทียบและตัดสินใจได้จบในหน้าเดียว ไม่ต้องเปิดแท็บอื่นเพิ่ม
• Preset colors สำหรับลองเล่นทันที: ยังนึก hex ไม่ออก? กดเลือกสีตัวอย่างที่เตรียมไว้ให้ แล้วดูการทำงานของเครื่องมือได้ทันที เหมาะมากสำหรับการเรียนรู้เรื่อง CSS named colors แบบเห็นภาพ
• One-click copy ลด context switch: ผลลัพธ์แต่ละรายการมีปุ่ม copy โค้ด CSS ให้พร้อมใช้ กดปุ๊บสลับไปวางใน editor ได้เลย ไม่ต้องเสียเวลาพิมพ์ชื่อสีเองให้เสี่ยงสะกดผิด

วิธีใช้งาน

1. เปิดหน้า Color Name Lookup บน browser ของคุณ
2. พิมพ์ hex color ที่ต้องการลงในช่อง input เช่น #4169E1 หรือ FF5733 (มี # หรือไม่มีก็ได้ รองรับทั้ง 3 และ 6 หลัก)
3. ดูผลลัพธ์ top 5 named colors ที่ใกล้ที่สุด เรียงจากใกล้ไปไกล พร้อมค่า RGB, distance และ match percentage ของแต่ละสี
4. กดปุ่ม copy โค้ด CSS สำเร็จรูป เช่น color: RoyalBlue; จากสีที่คุณเลือก
5. นำโค้ดไปวางใน stylesheet ได้เลย หรือจะกด preset colors เพื่อทดลองสีอื่น ๆ ต่อได้ทันที

แนวคิดเบื้องหลัง

CSS named colors คืออะไร?

CSS named colors คือชุดชื่อสีมาตรฐานที่ browser ทุกตัวรู้จักและตีความได้ตรงกันโดยไม่ต้องจำค่าตัวเลข เช่น color: RoyalBlue; ให้ผลเท่ากับ color: #4169E1; เป๊ะ ปัจจุบันมีทั้งหมด 148 ชื่อ ครอบคลุมตั้งแต่ AliceBlue, AntiqueWhite, Aqua ไปจนถึง RoyalBlue, Navy และสีอื่น ๆ ครบทุกโทนสว่าง กลาง เข้ม

รายชื่อ 148 สีมาจากไหน?

รายชื่อสีเหล่านี้มีรากฐานมาจากชุดสีของ X Window System (X11) ระบบกราฟิกเก่าแก่ของโลกยูนิกซ์ตั้งแต่ปลายทศวรรษ 1980 ต่อมา W3C ได้นำชุดสีนี้มารับรองในสเปก CSS3 จนกลายเป็นมาตรฐานที่ใช้กันทุกวันนี้ ชื่อหลายชื่อจึงมีกลิ่นอายประวัติศาสตร์ เช่น PapayaWhip, BlanchedAlmond หรือ RebeccaPurple ที่ถูกเพิ่มเข้ามาภายหลังเพื่อรำลึกถึงลูกสาวของ Eric Meyer บิดาแห่ง CSS

ทำไม weighted distance (redmean) ถึงดีกว่า plain Euclidean?

วิธีวัดระยะห่างระหว่างสีที่ตรงไปตรงมาที่สุดคือ Euclidean distance ใน RGB space ซึ่งคำนวณจากผลต่างของช่อง R, G, B แบบถ่วงน้ำหนักเท่ากันหมด แต่ปัญหาคือสายตามนุษย์ไม่ได้ไวต่อทุกช่องสีเท่ากัน — เราแยกความแตกต่างของโทนแดงและน้ำเงินได้ไม่ดีเท่าโทนเขียว การนับสามช่องเท่ากันจึงทำให้ "ระยะทางคณิตศาสตร์" ไม่ตรงกับ "ระยะที่ตาเห็นจริง"

เครื่องมือนี้จึงใช้ redmean approximation ซึ่งนำค่าเฉลี่ยของช่องสีแดง (mean red) มาเป็น weight ถ่วงช่อง R และ B เพิ่มเติม ทำให้ distance ที่ได้ใกล้เคียงกับการรับรู้ของมนุษย์มากกว่า plain Euclidean แบบเดิม ๆ ผลคือสีที่เครื่องมือบอกว่า "ใกล้ที่สุด" มักจะตรงกับที่ตาเรารู้สึกจริง ๆ ไม่ใช่แค่ใกล้ในทางตัวเลข

distance และ match percentage หมายถึงอะไร?

distance คือคะแนนระยะห่างที่คำนวณได้ระหว่างสีของเรากับ named color แต่ละสี — ยิ่งค่าน้อยแปลว่ายิ่งใกล้ ส่วน match percentage คือการแปลง distance ให้อยู่ในรูปเปอร์เซ็นต์ที่เข้าใจง่าย: 100% แปลว่าสีตรงกันพอดีไม่มีเพี้ยน ยิ่งเปอร์เซ็นต์สูง สีที่ได้ก็ยิ่งใกล้เคียงต้นฉบับ การมีทั้งสองค่าทำให้คุณตัดสินใจได้ทั้งเชิงเทคนิคและเชิงสายตา

exact match กับ nearest match ต่างกันอย่างไร?

ถ้า hex ที่ใส่ตรงกับ named color พอดี (เช่น #F0F8FF คือ AliceBlue) ผลลัพธ์จะเป็น exact match — distance เท่ากับ 0 และ match 100% แต่ถ้าสีของคุณไม่ตรงกับชื่อใดเลยใน 148 สี (ซึ่งเป็นกรณีส่วนใหญ่ เพราะสีบนจอมีได้เป็นล้านค่า) เครื่องมือจะแสดง nearest match คือสีที่ใกล้ที่สุดแทน พร้อมบอกเปอร์เซ็นต์ให้รู้ว่าเพี้ยนไปแค่ไหน

ตัวอย่างการใช้งานจริง

เจอสีใน design mockup แต่อยากใช้ชื่อสีในโค้ด

Designer ส่งค่า #4169AA มาให้ในไฟล์ mockup คุณอยากรู้ว่ามี named color ไหนใกล้เคียงบ้าง ก็ใส่ค่านี้ลงในเครื่องมือ ผลคือสีที่ใกล้ที่สุดคือ RoyalBlue (#4169E1) พร้อม match percentage สูง ๆ คุณก็ตัดสินใจได้ว่าจะใช้ RoyalBlue ในโค้ดเพื่อ readability หรือจะเก็บ hex เดิมไว้เพื่อความแม่นยำสูงสุด

แปลง brand color ให้เป็นชื่อที่จำง่าย

สมมติ brand color ของโปรเจกต์คือ #FF5733 (ส้มอมแดง) การใส่ค่านี้ในเครื่องมือจะพบว่าสีที่ใกล้ที่สุดคือ Tomato (#FF6347) ทำให้เวลาคุยในทีมหรือเขียน documentation คุณสามารถเรียกสีนี้สั้น ๆ ว่า "โทน Tomato" ได้ทันที โดยอาจแนบ hex จริงกำกับไว้ด้วยเพื่อความชัดเจน

ตรวจสอบ legacy code ว่าสีเดิมคือสีอะไร

เปิดเจอโค้ดเก่าที่เขียน color: #F0F8FF; ไว้เต็มไปหมด แทนที่จะเดาสุ่ม ก็นำ hex มาเช็คในเครื่องมือ ผลคือ exact match 100% กับ AliceBlue — คุณก็ refactor โค้ดเก่าให้ใช้ชื่อสีที่อ่านเข้าใจได้ทันที โค้ดสะอาดขึ้นโดยที่หน้าตาเว็บไม่เปลี่ยน

เรียนรู้ CSS named colors แบบ interactive

สำหรับมือใหม่ที่อยากจำชื่อสี CSS การกด preset colors ในเครื่องมือแล้วดูว่าแต่ละ hex ถูก map ไปชื่ออะไร พร้อมดู top 5 สีข้างเคียงเทียบกัน เป็นวิธีเรียนรู้ที่เห็นภาพและจำได้เร็วกว่าการท่องตารางสีเฉย ๆ มาก

แนวทางปฏิบัติที่ดี

• เช็ค match percentage ก่อนตัดสินใจ — ถ้าเปอร์เซ็นต์สูงมาก (ใกล้ 100%) การใช้ named color แทบไม่ต่างจาก hex เดิม แต่ถ้าต่ำลงมาชัดเจน อาจยอมใช้ hex ตรง ๆ เพื่อรักษาความแม่นยำของ design ไว้
• ใช้ named colors เพื่อ readability ของโค้ด — color: RoyalBlue; อ่านง่ายกว่า color: #4169E1; โดยเฉพาะใน code review หรือ documentation แต่ควรใช้ควบคู่กับ design tokens หรือ CSS variables เพื่อความสม่ำเสมอทั้งระบบ
• ระวังข้อจำกัดของ palette — named colors เป็นชุดสีคงที่ 148 สี ไม่ได้ถูกออกแบบมาเป็น palette สมัยใหม่ ถ้างานต้องการความกลมกลืนของสีทั้งระบบ ควรใช้เครื่องมือสร้าง palette เสริมแทนการพึ่งชื่อสีอย่างเดียว
• ทดสอบ contrast จริงเสมอ — การเปลี่ยนจาก hex เป็น named color ที่ "ใกล้ที่สุด" อาจทำให้ contrast กับพื้นหลังเปลี่ยนเล็กน้อย ควรเช็ค accessibility หลังเปลี่ยนสีทุกครั้ง
• ใช้ preset colors เป็นจุดเริ่มต้น — ถ้ายังไม่แน่ใจว่าจะเริ่มจากสีไหน preset ที่เตรียมไว้ให้ช่วยให้เห็นพฤติกรรมของเครื่องมือและจุดประกายไอเดียสีใหม่ ๆ ได้เร็ว
• ใช้ประโยชน์จากความเป็น client-side — เพราะทุกอย่างรันบนเครื่อง คุณจึงใช้เครื่องมือนี้กับงานลับหรือโปรเจกต์ที่ยังไม่เปิดตัวได้อย่างสบายใจ โดยไม่ต้องกังวลเรื่องข้อมูลรั่วไหล

เริ่มหาชื่อสีให้ hex ของคุณเลย

ไม่ว่าคุณจะกำลังแปลงสีจาก mockup, ทำความสะอาด legacy code หรือแค่อยากรู้ว่าสีที่เห็นบนจอคือชื่ออะไร Color Name Lookup พร้อมช่วยคุณเสมอ — ใส่ hex, ได้ชื่อสี, copy โค้ด CSS จบในไม่กี่วินาที ฟรี ไม่ต้องติดตั้ง และข้อมูลไม่ออกจากเครื่องของคุณ (100% client-side) ลองเปิดใช้ดูสักครั้ง แล้วคุณจะพบว่าโลกของ CSS named colors ใกล้ตัวกว่าที่คิด

เครื่องมือที่เกี่ยวข้อง:

• Color Converter — แปลงค่าระหว่าง HEX, RGB, HSL และอื่น ๆ
• Color Palette Generator — สร้าง palette จากสีหลัก
• Image Color Extractor — ดึงสีหลักจากรูปภาพ

ขอให้สนุกกับการเล่นกับสี!