ดูดสีจากรูปและสร้างพาเลตต์

หาสีหลักของภาพและแสดงเป็นรหัส HEX, RGB และ HSL และบอกรหัสสีของจุดใดก็ได้ที่คุณกด ใช้ดึงสีจากรูปไปใช้ในงานออกแบบ หรือตรวจสอบสีโลโก้

วิธีใช้

1. ลากภาพมาวางในกรอบหรือคลิกเพื่อเลือก
2. "สีหลัก" จะแสดงสีที่ใช้มากที่สุดและสัดส่วน ลองเปลี่ยน "จำนวนสี" (5 ถึง 10) หรือ "วิธีการ"
3. กดหรือลากบนภาพเพื่อดูสีของจุดนั้นใน "สีที่เลือก" ซูมเข้าก่อนได้ และ "พื้นที่ดูดสี" สามารถหาค่าเฉลี่ยของพิกเซลรอบๆ ได้
4. กดที่รหัสเพื่อคัดลอก สำหรับทั้งชุดสี ให้ใช้ "คัดลอกเป็นตัวแปร CSS" "คัดลอกเป็น JSON" หรือ "บันทึกเป็น PNG"

หลักการทำงาน

• สีหลักหาจากสำเนาที่ย่อให้ด้านยาวไม่เกิน 256 พิกเซล ไม่นับพิกเซลโปร่งใส
• Median cut จะแบ่งกลุ่มที่มีสีกระจายกว้างที่สุดที่ค่ามัธยฐานซ้ำไปเรื่อยๆ ส่วน k-means จะคำนวณจุดศูนย์กลางของแต่ละกลุ่มใหม่ซ้ำๆ k-means ใช้เวลานานกว่าเล็กน้อย
• สีที่เลือก 30 สีล่าสุดจะเก็บไว้ในเบราว์เซอร์นี้บนอุปกรณ์นี้ ภาพไม่ได้ถูกอัปโหลด

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

หารหัสสีจากรูปภาพอย่างไร

เปิดภาพแล้วกดที่จุดที่ต้องการ รหัส HEX, RGB และ HSL จะแสดงใน "สีที่เลือก" กดที่รหัสเพื่อคัดลอก

HEX กับ RGB ต่างกันอย่างไร

เป็นสองวิธีในการเขียนสีเดียวกัน RGB บอกค่าแดง เขียว และน้ำเงินเป็นตัวเลข 0 ถึง 255 ส่วน HEX เขียนค่าทั้งสามเดียวกันเป็นเลขฐานสิบหกค่าละสองหลัก rgb(255, 0, 0) คือ #FF0000

ทำไมสีที่เลือกได้ต่างจากที่เห็นเล็กน้อย

พิกเซลที่อยู่ติดกันในรูปมักต่างกันเล็กน้อย ตั้ง "พื้นที่ดูดสี" เป็นค่าเฉลี่ยของ 3 × 3 หรือ 5 × 5 พิกเซล เพื่อให้ได้ค่าที่นิ่งขึ้น

ดูดสีจากนอกหน้านี้ได้ไหม

ได้เฉพาะในเบราว์เซอร์ที่รองรับ ในเบราว์เซอร์นั้นจะมีปุ่ม "ดูดสีจากที่ใดก็ได้บนหน้าจอ" ให้เลือกจุดใดก็ได้บนหน้าจอ