คุณมีภาพและคุณต้องการตัวเลขหนึ่งจากมัน: รหัสฐานสิบหกของสีที่เจาะจง อาจเป็นโลโก้ที่สเปกแบรนด์หายไปนานแล้ว ภาพหน้าจอของเว็บที่สีน้ำเงินของมันคุณอยากจับคู่ หรือภาพถ่ายที่มีเฉดที่คุณอยากใช้ซ้ำ การพิมพ์สิ่งที่คุณ คิดว่า สีคืออะไรไม่ได้ผลตาของคุณอ่าน #3A7BD5 ออกจากจอไม่ได้ และสีที่ดูถูกมักผิดไปไม่กี่หลัก นี่คือวิธีอ่านค่าจริงตรงจากพิกเซล
ทำไมการเดาไม่เคยได้ผลจริง
"สีน้ำเงิน" เดียวบนจอจริง ๆ แล้วคือการกระจายของสีน้ำเงินที่แทบเหมือนกัน และความสว่างและการปรับเทียบของจอเลื่อนมันไปอีก เลือกด้วยตาแล้วคุณลงใกล้แต่ผิดใกล้พอที่ความไม่ตรงกันน่ารำคาญแต่ไม่ชัด คุณจึงเผาเวลาสิบนาทีสงสัยว่าทำไมปุ่มไม่เข้ากับส่วนหัว วิธีแก้คือหยุดเดาและอ่านตัวเลขที่พิกเซลเก็บไว้จริง
รับรหัสในสามขั้นตอน
วิธีที่เชื่อถือได้คือสุ่มตัวอย่างพิกเซลโดยตรงด้วยเครื่องมือดูดสี
- โหลดภาพ วางโลโก้ ภาพหน้าจอ หรือภาพถ่ายที่คุณดึงจาก
- วางเมาส์ไปที่พิกเซลที่แน่นอน แว่นขยายตามเคอร์เซอร์ของคุณและขยายพื้นที่ด้านล่าง บนขอบแข็งคุณจึงเห็นได้ว่าพิกเซลไหนเป็นสีแบรนด์แบนและพิกเซลไหนเป็นการผสมสองสีแบบลบรอยหยัก
- คลิกเพื่อบันทึก แล้วคัดลอก แต่ละคลิกเก็บสีเป็นตัวอย่างสีที่แสดง HEX, RGB และ HSL แต่ละอันมีปุ่มคัดลอกของตัวเอง คลิก HEX แล้วมันอยู่บนคลิปบอร์ดของคุณ
ลงบนพิกเซลที่ถูกต้อง
แว่นขยายสำคัญกว่าที่ฟังดู ที่ที่สีหนึ่งพบอีกสีตัวอักษรกับพื้นหลัง ขอบของไอคอนพิกเซลที่อยู่ระหว่างถูกลบรอยหยัก: การผสมสองสีที่เกลี่ยแล้ว ไม่ใช่สีใดสีหนึ่ง สุ่มตัวอย่างที่นั่นแล้วคุณได้ค่าขุ่นที่ไม่ตรงกับอะไรเลย เล็งไปที่พื้นที่แบนสองสามพิกเซลด้านในของรูปทรง ที่ที่สีทึบ และมุมมองที่ซูมช่วยให้คุณยืนยันว่าคุณอยู่บนมันก่อนคลิก
บนโลโก้สะอาดหรือ UI แบนอันนี้ง่ายสีสม่ำเสมอทั่วพื้นที่กว้าง บนภาพถ่ายมันต้องระวังมากกว่า เพราะเกรนและการบีบอัดหมายความว่าพิกเซลข้างเคียงต่างกันจริง เลือกจากบริเวณที่สงบและมีแสงสม่ำเสมอ และเก็บสองสามตัวอย่างเพื่อเช็กว่ามันตรงกัน
HEX, RGB หรือ HSLเอาอันที่พอดี
แต่ละตัวอย่างสีให้คุณครบทั้งสามในครั้งเดียว คุณจึงคัดลอกอันที่ปลายทางต้องการ:
- HEX (
#3A7BD5)ค่าเริ่มต้นของเว็บ CSS, Figma, Canva, เอกสารแบรนด์ คัดลอกอันนี้เว้นแต่คุณมีเหตุผลไม่ทำ - RGB (
rgb(58, 123, 213))ค่าช่องสี มีประโยชน์เมื่อเครื่องมือขอมันหรือคุณต้องการความโปร่งใสผ่านrgba - HSL (
hsl(215, 65%, 53%))เฉด ความอิ่มสี ความสว่าง ดีที่สุดเมื่อคุณอยาก ปรับ สี: เพิ่มความสว่างสำหรับสถานะวางเมาส์ ลดสำหรับเวอร์ชัน หรือสร้างสเกลจากมัน
เพราะทุกตัวอย่างสีพกครบทั้งสาม คุณจึงไม่ต้องสุ่มตัวอย่างใหม่แค่เพื่อสลับรูปแบบ
หยิบหลายสีในครั้งเดียว
โลโก้แทบไม่เคยเป็นสีเดียว คลิกสีหลัก สีเน้น และสีข้อความในครั้งเดียวแต่ละอันซ้อนกันในรายการ คุณจึงเทียบมันและคัดลอกมันทีละอัน แทนที่จะโหลดภาพสามครั้งแยกกัน
ถ้าคุณอยากได้ สรุป สีของทั้งภาพมากกว่าพิกเซลที่เจาะจงพาเลตต์โดยรวมที่ภาพสร้างจากนั่นเป็นงานคนละอย่าง และเครื่องมือพาเลตต์แยกของ img.diy ดึงสีที่โดดเด่นให้คุณโดยอัตโนมัติ ใช้เครื่องมือดูดสีนี้เมื่อคุณรู้จุดที่แน่นอนที่คุณต้องการ ใช้เครื่องมือพาเลตต์เมื่อคุณอยากให้ภาพถูกอธิบายลักษณะให้คุณ
มันอยู่ในเครื่องของคุณ
ภาพถูกอ่านในเครื่องในเบราว์เซอร์ของคุณจากผืนผ้าใบไม่มีอะไรถูกอัปโหลด ไม่ต้องสมัคร และหลังโหลดครั้งแรก มันทำงานแบบออฟไลน์ได้ ภาพจำลองที่ยังไม่เปิดตัวหรือแอสเซตส่วนตัวของลูกค้าจึงไม่เคยออกจากเครื่องของคุณแค่เพราะคุณต้องการรหัสฐานสิบหกเดียวจากมัน
โหลดภาพ วางเมาส์ไปที่พิกเซล คลิก แล้วคัดลอกรหัส