ตัวดึงพาเล็ตสีจากรูปภาพ

ดึงสีหลักจากรูปภาพและส่งออกพาเล็ตเป็น HEX, ตัวแปร CSS หรือ JSON

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

เลือกสีในพาเล็ตได้ตั้งแต่ 3 ถึง 12 สี

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

เปลี่ยนลำดับการแสดงผลโดยไม่เปลี่ยนสีที่ดึงออกมา

ข้ามพิกเซลที่โปร่งใสทั้งหมดเมื่อค้นหาสีหลัก

ผลลัพธ์พาเล็ต
ตรวจดู คัดลอก และส่งออกพาเล็ตที่ดึงได้
ยังไม่มีพาเล็ต
อัปโหลดรูปภาพเพื่อดูสีหลักและตัวเลือกการส่งออก

เครื่องมือนี้ทำอะไร

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

กรณีการใช้งานที่เหมาะสม

  • ดึงสีแบรนด์หรือสีสินค้าจากภาพหน้าจอ โลโก้ ภาพถ่าย หรือม็อกอัป
  • สร้างพาเล็ต CSS อย่างรวดเร็วสำหรับหน้าแลนดิ้ง ภาพขนาดย่อ หรือการส่งต่องานออกแบบ
  • เปรียบเทียบว่ารูปภาพถูกขับเคลื่อนด้วยสีหลักสีเดียวมากน้อยเพียงใด เมื่อเทียบกับสีเน้นที่เสริมกัน
  • ทำงานกับรูปภาพส่วนตัวโดยไม่ต้องส่งไฟล์ไปยังเซิร์ฟเวอร์

ตัวเลือกการส่งออก

สามารถคัดลอกผลลัพธ์เป็นรายการ HEX แบบข้อความธรรมดา, CSS custom properties หรือ JSON ได้ รูปแบบ CSS มีประโยชน์เมื่อคุณต้องการตัวแปร เช่น --palette-1 ส่วน JSON จะเก็บรูปแบบสีและอัตราส่วนความเด่นไว้ด้วยกันสำหรับสคริปต์หรือ ระบบอัตโนมัติด้านงานออกแบบ

สิ่งที่ควรระวัง

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