วิธีใช้เครื่องมือสุ่มสีจากภาพแบบ Hex
เลือกภาพจากอุปกรณ์ของคุณในรูปแบบ PNG, JPG, WebP, GIF, AVIF หรือ HEIC (รองรับ MIME types ตามที่ระบุ) เมื่อภาพโหลดเสร็จ เครื่องมือจะแสดงพิกเซลกลางภาพทันทีพร้อมค่าสี HEX, RGB และ HSL พร้อมบอกขนาดภาพเป็นพิกเซล (width × height)
เลื่อนเมาส์เหนือภาพเพื่อสุ่มสีทีละพิกเซล มีแว่นขยายช่วยให้คุณเลือกพิกเซลได้แม่นยำ คลิกเพื่อบันทึกสีนั้นลงในประวัติ สีที่บันทึกจะแสดงเป็นสวอทช์สูงสุด 12 รายการ คลิกที่สวอทช์เพื่อโหลดสีนั้นกลับมาแสดงอีกครั้ง
คุณสามารถใช้แป้นพิมพ์ในการทำงาน: กดลูกศรเพื่อเลื่อนเป้าเล็งทีละ 1 พิกเซล, กด Shift ค้างแล้วกดลูกศรเพื่อเลื่อนทีละ 10 พิกเซล, กด Enter หรือ Space เพื่อบันทึกสีปัจจุบัน
คลิกที่ค่าสีใดก็ได้ (HEX, RGB, HSL) เพื่อคัดลอกไปยังคลิปบอร์ด ถ้าเบราว์เซอร์บล็อกการเข้าถึงคลิปบอร์ด จะแสดงข้อความ "Could not copy — your browser blocked clipboard access."
ปุ่ม "Start over" จะล้างภาพทั้งหมด, ล้างประวัติสี และรีเซ็ตเครื่องมือกลับสู่สถานะเริ่มต้น
เหตุใด Hex จึงเป็นรูปแบบสีหลักสำหรับเว็บ
HEX (เลขฐานสิบหก 6 หลัก เช่น #1E90FF) เป็นรูปแบบมาตรฐานของ CSS ที่ใช้ใน properties ต่างๆ เช่น color, background-color โดยไม่ต้องมีวงเล็บหรือ syntax เพิ่มเติม รูปแบบ HEX 6 หลักไม่มี alpha channel ดังนั้นค่าสีที่ได้จะเป็นสีทึบเสมอ หากพิกเซลมีความโปร่งใส เครื่องมือจะรายงาน alpha แยกต่างหากเป็นเปอร์เซ็นต์ เช่น "Alpha 25% — this pixel is partly transparent."
HEX เป็นรูปแบบที่กะทัดรัดและเป็นที่รู้จักกันดีในวงการออกแบบเว็บและซอฟต์แวร์ออกแบบ (Figma, Photoshop) ทำให้หน้านี้เป็นตัวเลือกแรกเมื่อคุณต้องการค่าสีที่สามารถนำไปใช้ในโค้ดได้ทันที
หลักการทำงานเบื้องหลัง: การอ่านค่าพิกเซลและข้อจำกัด
เครื่องมืออ่านค่าสีโดยตรงจากพิกเซลของภาพที่อัปโหลด โดยใช้ canvas API ของเบราว์เซอร์ ประมวลผลทั้งหมดบนเครื่องผู้ใช้ ไม่มีการอัปโหลดไปยังเซิร์ฟเวอร์
ข้อควรระวัง:
- ภาพ JPEG หรือภาพ screenshot มักมีการบีบอัดและ anti-aliasing ซึ่งทำให้ค่าพิกเซลที่อยู่ติดกันอาจแตกต่างกันแม้ในพื้นที่ที่ดูเหมือนสีเดียวกัน
- พิกเซลโปร่งแสงจะถูกอ่านโดยตรงโดยไม่นำสิ่งที่อยู่ด้านหลังมาคำนวณ
- ภาพที่มีด้านยาวเกิน 4096 พิกเซลจะถูกย่อขนาดลงโดยอัตโนมัติ
- หากไฟล์ที่วางไม่ได้รับการรองรับ จะแสดงข้อความ "That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image."
- หากภาพเปิดไม่ได้ จะแสดง "That image could not be opened. It may be corrupted or in an unsupported format."
ความโปร่งใส (Alpha) และการจัดการกับพิกเซลโปร่งแสง
HEX 6 หลักไม่สามารถเก็บค่า alpha ได้ ดังนั้นเครื่องมือนี้จึงแยกส่วนความโปร่งใสออกมารายงานเป็นเปอร์เซ็นต์ เมื่อคลิกบันทึกสีโปร่งแสง จะบันทึกเป็นรายการแยกต่างหากในประวัติ แม้จะมีค่า RGB เดียวกันแต่ alpha ต่างกันก็จะถูกบันทึกเป็นสองรายการต่างหาก
ตัวอย่าง: พิกเซลที่มี RGB (255, 0, 0) และ alpha 50% จะแสดงเป็น HEX #FF0000 และข้อความ "Alpha 50% — this pixel is partly transparent." เมื่อคลิกบันทึกจะได้สี #FF0000 ที่ alpha 50% ถูกเก็บไว้ในประวัติ
เคล็ดลับการใช้งานสำหรับนักออกแบบและนักพัฒนา
- ใช้แป้นพิมพ์ร่วมกับ Shift เพื่อขยับเป้าเล็งทีละ 10 พิกเซล ช่วยให้เลือกสีในบริเวณกว้างได้รวดเร็ว
- คลิกที่สวอทช์ในประวัติเพื่อโหลดสีกลับมาแสดง พร้อมคัดลอกค่า HEX, RGB, HSL ได้อีกครั้ง
- ประวัติเก็บสีได้สูงสุด 12 รายการ หากเกิน สีที่เก่าที่สุดจะถูกแทนที่โดยสีล่าสุด
- หากคุณต้องการสีที่แน่นอนจากภาพที่มี anti-aliasing ให้ซูมภาพด้วยแว่นขยายและเลือกพิกเซลกลางของพื้นที่ที่ต้องการ
- เมื่อคัดลอกสีแล้วสามารถวางลงใน CSS, Figma, Photoshop หรือเครื่องมืออื่นๆ ได้ทันที
ปัญหาที่พบบ่อยและแนวทางแก้ไข
| ปัญหา | สาเหตุ | วิธีแก้ไข |
|---|---|---|
| สีที่เลือกไม่ตรงกับที่เห็น | ภาพถูกบีบอัดหรือ anti-aliasing | เลือกพิกเซลที่อยู่ตรงกลางพื้นที่สีเดียวกัน |
| ไม่สามารถคัดลอกค่า HEX ได้ | เบราว์เซอร์บล็อก clipboard API | ใช้คำสั่งคัดลอกด้วยตนเอง หรือเปลี่ยนเบราว์เซอร์ |
| ภาพไม่แสดงหลังวาง | รูปแบบไฟล์ไม่รองรับ | ตรวจสอบไฟล์: PNG, JPG, WebP, GIF, AVIF, HEIC |
| ประวัติสีไม่เพิ่ม | ถึงขีดจำกัด 12 รายการ | ลบสีเก่าหรือกด Start over |
| ค่า alpha ไม่แสดง | พิกเซลนั้นทึบแสง 100% | ไม่มีปัญหา — แสดงเฉพาะตอนโปร่งแสงเท่านั้น |
คำถามที่พบบ่อย (FAQ)
ถาม: ทำไม HEX 6 หลักถึงไม่มี alpha channel? ตอบ: ตามมาตรฐาน CSS รูปแบบ HEX 6 หลัก (#RRGGBB) ใช้สำหรับสีทึบเท่านั้น หากต้องการ alpha ต้องใช้รูปแบบ 8 หลัก (#RRGGBBAA) หรือใช้ฟังก์ชัน rgba() เครื่องมือนี้จึงเลือกรายงาน alpha แยกต่างหากเป็นเปอร์เซ็นต์
ถาม: สีที่บันทึกในประวัติสามารถนำไปใช้ใน Figma ได้หรือไม่? ตอบ: ได้ คลิกที่สวอทช์เพื่อให้ค่า HEX แสดง จากนั้นคลิกที่ค่า HEX เพื่อคัดลอก แล้ววางในช่อง Fill ของ Figma ได้ทันที
ถาม: กดลูกศรแล้วเป้าเล็งไม่ขยับต้องทำอย่างไร? ตอบ: ตรวจสอบว่าโฟกัสอยู่ที่ภาพ (คลิกที่ภาพก่อน) แล้วกดลูกศร หากยังไม่ขยับ ให้ลองกด Tab เพื่อเลื่อนโฟกัสไปที่พื้นที่ภาพ
ถาม: รองรับภาพ HEIC/HEIF จาก iPhone หรือไม่?
ตอบ: ใช่ รองรับ MIME types image/heic และ image/heif รวมถึงรูปแบบอื่นๆ ที่ระบุในข้อกำหนด
ถาม: จะล้างประวัติสีทีละรายการได้ไหม? ตอบ: ไม่มีฟังก์ชันลบทีละรายการในเครื่องมือนี้ คุณต้องกด Start over เพื่อล้างทั้งหมด
ถาม: ทำไมสีที่เลือกถึงต่างจากที่เห็นบนหน้าจอ? ตอบ: อาจเกิดจากการปรับเทียบสีของจอภาพ หรือการบีบอัดภาพ JPEG/screenshot ที่ทำให้สีผิดเพี้ยนไปเล็กน้อย ควรใช้ภาพต้นฉบับที่ไม่ผ่านการบีบอัดเพื่อความแม่นยำสูงสุด