คุณเห็นสีที่อยากใช้ซ้ำในภาพถ่าย ในภาพหน้าจอของเว็บที่คุณชอบ ในโลโก้เก่าที่ไฟล์ต้นทางหายไปนานแล้วและคุณต้องการรหัสฐานสิบหกจริง ๆ ไม่ใช่การเดา การกะด้วยตาไม่เคยได้ผลจริง จอโกหก และ "สีน้ำเงินนั่น" จริง ๆ แล้วคือสีน้ำเงินหกเฉดที่ต่างกันเล็กน้อย การดึงพาเลตต์ตรงจากพิกเซลให้รหัสที่คุณวางลงใน CSS เครื่องมือออกแบบ หรือเอกสารแบรนด์ได้
นี่คือวิธีทำ และวิธีได้พาเลตต์ที่ใช้งานได้จริงแทนที่จะเป็นการหยิบพิกเซลแบบสุ่ม
"การดึงพาเลตต์" ทำอะไรจริง ๆ
เครื่องมือสแกนภาพและหาสีที่แทนมันได้ดีที่สุดโทนหลักบวกสีเน้นที่โดดเด่นแล้วให้คุณแต่ละสีเป็นรหัสฐานสิบหกที่คุณคัดลอกได้ แทนที่จะเป็นสีพิกเซลแต่ละอันเป็นล้าน คุณได้ชุดที่เรียบร้อย (เช่น 5 หรือ 8) ที่สรุปภาพ
อันนี้มีประโยชน์จริงสำหรับงานทั่วไปไม่กี่อย่าง:
- กู้สีแบรนด์ จากโลโก้หรือแอสเซตเก่าเมื่อคุณไม่มีสเปกต้นฉบับ
- สร้างพาเลตต์ออกแบบ จากภาพที่คุณอยากให้อารมณ์ตรงกันทิวทัศน์ รูปสินค้า ชิ้นงานศิลปะ
- จับคู่เว็บหรือกราฟิกที่มีอยู่ ที่คุณมีแค่ภาพหน้าจอ
- เลือกพื้นหลังหรือสีเน้น ที่กลมกลืนกับภาพที่คุณใช้อยู่แล้ว
วางภาพลงไปแล้วอ่านรหัส:
ใช้ตัวควบคุมจำนวนเพื่อได้พาเลตต์ที่ ใช้ได้
การตั้งค่าที่สำคัญที่สุดเดียวคือคุณดึงกี่สี มันเปลี่ยนคำตอบทั้งหมด
- สีน้อยกว่า (3–5) ให้พาเลตต์ที่จำเป็นโทนหยิบมือที่นิยามภาพ นี่คือสิ่งที่คุณมักต้องการสำหรับแบรนด์หรือระบบออกแบบ ที่ชุดกระชับเป็นข้อดี ไม่ใช่ข้อจำกัด
- สีมากกว่า (8–12) จับสีเน้นและการไล่สีที่ละเอียดอ่อน มีประโยชน์เมื่อภาพอุดมและหลากหลายและคุณอยากได้โทนรองด้วย หรือเมื่อคุณกำลังศึกษาว่าภาพถูกจัดองค์ประกอบอย่างไรเป๊ะ ๆ
ถ้าผลลัพธ์แรกรู้สึกผิดเฉดหนึ่งครอบงำ หรือสีเน้นที่คุณอยากได้ถูกรวมหายไปให้ปรับจำนวนแล้วอ่านใหม่ ภาพที่เป็นท้องฟ้า 80% จะให้สีน้ำเงินเยอะที่จำนวนต่ำ เพิ่มจำนวนขึ้นเพื่อดึงสีเล็ก ๆ ที่โดดออกมา
คลิกเพื่อคัดลอกขั้นตอนที่สำคัญ
การอ่านรหัสฐานสิบหกแล้วพิมพ์มันออกมาคือจุดที่ข้อผิดพลาดแทรกเข้ามา (#3A7BD5 กับ #3A7BD6 แล้วคุณก็เสียเวลาสิบนาทีสงสัยว่าทำไมมันดูผิด) ในเครื่องมือพาเลตต์สี แต่ละตัวอย่างสีคัดลอกรหัสฐานสิบหกของมันเมื่อคลิก คุณจึงไปจากภาพสู่คลิปบอร์ดสู่สไตล์ชีตของคุณโดยไม่ต้องแตะแป้นพิมพ์
ขั้นตอนที่ใช้งานได้:
- โหลดภาพ
- ตั้งจำนวนให้ตรงกับงานต่ำสำหรับพาเลตต์แบรนด์ สูงกว่าเพื่อจับสีเน้น
- คลิกแต่ละตัวอย่างสีที่คุณต้องการ วางมันไปที่ที่มันจะไป
- ช่วงไม่พอ? ปรับจำนวนแล้วหยิบสีเพิ่ม
อ่านผลลัพธ์ด้วยสายตานักออกแบบ
สิ่งไม่กี่อย่างที่ควรรู้เพื่อให้พาเลตต์ลงตัว:
- สีที่โดดเด่นไม่ใช่สีที่มีประโยชน์เสมอ รูปสินค้าบนพื้นหลังขาวจะรายงานสีขาวหรือเกือบขาวเยอะ นั่นแม่นยำ แต่สีที่คุณสนใจจริง ๆ คือสินค้าเพิ่มจำนวนให้สูงขึ้นเพื่อดึงมันออกมา หรือครอปเหลือตัวแบบก่อน
- ภาพถ่ายมีสีมากกว่าที่มันดูเหมือน ผิว เงา และเงาสะท้อนเพิ่มโทนที่คุณไม่ได้สังเกตอย่างมีสติ จำนวนที่สูงกว่าเผยมัน จำนวนที่ต่ำกว่าซ่อนมันไว้หลังค่าเฉลี่ย
- ฐานสิบหกพกพาได้ ทุกรหัสที่คุณคัดลอกใช้ได้โดยตรงใน CSS, Figma, Photoshop, Canva หรือเอกสารแบรนด์ ไม่ต้องแปลง
ทำไมมันอยู่ในเบราว์เซอร์ของคุณ
การดึงทั้งหมดทำงานในเครื่องภาพถูกอ่านและวิเคราะห์ในเบราว์เซอร์ของคุณด้วย Canvas และไม่เคยถูกอัปโหลดไปเซิร์ฟเวอร์ เรื่องนี้สำคัญเมื่อ "ภาพ" เป็นภาพจำลองที่ยังไม่เปิดตัว แอสเซตแบรนด์ส่วนตัวของลูกค้า หรือภาพหน้าจอภายในที่คุณไม่ควรโพสต์ไปยังเครื่องมือเว็บสุ่ม ๆ มันฟรี ไม่ต้องสมัคร และหลังเข้าครั้งแรกมันทำงานแบบออฟไลน์ได้
หยิบสี คลิกเพื่อคัดลอก วางมันไปที่ที่มันควรอยู่