ข้ามไปที่เนื้อหา

ตัวเลือกสีภาพและพาเลท

ตัวเลือกสีภาพและพาเลท

คลิกเพื่อเลือกสีจากภาพ แยกสีหลักและพาเลทอัตโนมัติ คัดลอก HEX/RGB และส่งออกตัวแปร CSS รองรับ PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF

ลากและวางภาพที่นี่หรือคลิกเพื่อเลือก

รองรับ PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF

ตัวเลือกสีภาพและพาเลท

🚀 เริ่มต้นอย่างรวดเร็ว

  • นำเข้าภาพ: ลากและวางหรือคลิกเพื่อเลือก
  • สลับแผง: เดสก์ท็อปแสดงแผงด้านข้าง; มือถือแตะปุ่มด้านล่าง
  • คลิกเพื่อเลือก: คลิกที่ใดก็ได้บนภาพเพื่อรับสีของพิกเซลนั้น
  • คัดลอกสี: หลังจากเลือกคัดลอกรูปแบบ HEX/RGB/CSS
  • ตั้งจำนวนสี: ลากแถบเลื่อนหรือคลิกพรีเซ็ต (4/6/8/12/16/24/32)
  • แยกพาเลท: คลิกปุ่มแยกเพื่อรับรายการสีหลัก
  • ส่งออก CSS: หลังจากแยกส่งออกไฟล์ตัวแปร CSS
  • ส่งออก JSON: หลังจากแยกส่งออกไฟล์ข้อมูล JSON
  • รีเซ็ต: ล้างภาพปัจจุบันและผลลัพธ์

📌 สถานการณ์การใช้งานทั่วไป

  • การเลือกสีการออกแบบ/โปสเตอร์: แยกสีหลักและสีเน้นสำหรับชุดสี
  • ธีม/ระบบการออกแบบ: ส่งออกตัวแปร CSS หรือ JSON สำหรับโปรเจกต์
  • การจัดแต่งคอมโพเนนต์: แยกสีที่เข้ากันสำหรับปุ่ม แท็ก แผนภูมิ
  • ความสอดคล้องของแบรนด์: แยกพาเลทสีมาตรฐานจากสินทรัพย์แบรนด์

🎛️ ตัวเลือกตัวเลือกสีและพาเลท

  • จำนวนสี: 2–32, ปกติ 8/12; ภาพถ่าย/ไล่ระดับแนะนำ 16–32
  • ปุ่มพรีเซ็ต: 4/6/8/12/16/24/32 สลับคลิกเดียว
  • การเรียงลำดับ: ตามเปอร์เซ็นต์จากสูงไปต่ำ สีที่พบบ่อยที่สุดก่อน
  • ตัวเลขข้างสี: แสดงเปอร์เซ็นต์พิกเซลในภาพ

🧭 คำแนะนำการใช้งาน

  • เริ่มด้วย 8/12 เพื่อดูผลรวม จากนั้นเพิ่มเป็น 16/24/32 ตามต้องการ
  • เมื่อใช้ในโปรเจกต์ เปลี่ยนชื่อ --color-1 เป็นชื่อที่มีความหมาย (เช่น --color-primary)
  • รักษาหน้าไว้ด้านหน้าเมื่อแยกภาพขนาดใหญ่เพื่อหลีกเลี่ยงการจำกัดของเบราว์เซอร์

⚠️ ข้อจำกัดและความเข้ากันได้

  • จำกัดไฟล์เดี่ยว 128MB ภาพขนาดใหญ่มากอาจทำให้ช้าลง
  • การแยกพาเลทดาวน์แซมเพิลอัตโนมัติเพื่อประสิทธิภาพ ผลลัพธ์เป็นสีตัวแทน
  • การถอดรหัส HEIC/HEIF ขึ้นอยู่กับการรองรับของเบราว์เซอร์ แปลงเป็น JPG/PNG หากล้มเหลว
  • พิกเซลโปร่งใสจะถูกละเว้นหรือประมวลผลเป็น RGBA จริง

🔒 ความเป็นส่วนตัวและความปลอดภัย

  • การประมวลผลทั้งหมดทำในเบราว์เซอร์ของคุณ ข้อมูลไม่ออกจากอุปกรณ์ของคุณ

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

ใช้ไฟล์ CSS ที่ส่งออกอย่างไร?

ใส่ :root { --color-1: ... } ที่ส่งออกใน CSS ทั่วไป จากนั้นอ้างอิงด้วย var(--color-1)

JSON ที่ส่งออกใช้ทำอะไร?

สำหรับการนำสคริปต์/ระบบการออกแบบกลับมาใช้ เช่น สร้าง Design Tokens หรือการตั้งค่าธีม แต่ละสีรวม hex/css/rgb และ count

จำนวนสีใดแนะนำ?

UI ทั่วไป: 8 หรือ 12; ไอคอนมินิมอล: 4–6; ภาพถ่าย/ไล่ระดับ: 16–32 ใช้พรีเซ็ตเพื่อเปรียบเทียบอย่างรวดเร็ว

ทำไมสีที่คลิกเลือกและพาเลทต่างกัน?

การเลือกคลิกได้พิกเซลเดียว; พาเลทควอนไทซ์ภาพทั้งหมดสำหรับสีตัวแทนที่เน้นแนวโน้มโดยรวม

ทำไมปุ่มส่งออกเป็นสีเทา?

ต้องคลิก 'แยกพาเลท' ก่อน ส่งออกใช้ได้หลังจากแยกเสร็จ

ชื่อไฟล์ที่ส่งออกสร้างอย่างไร?

ค่าเริ่มต้นใช้ชื่อไฟล์ต้นฉบับ (ไม่มีนามสกุล) + .palette-จำนวน + .css/.json โดยอักขระที่ไม่ถูกต้องจะถูกล้างอัตโนมัติ