ต้องการสีที่แน่นอนจากโลโก้ ภาพหน้าจอ ภาพถ่าย หรือภาพอ้างอิงการออกแบบ? โหลดภาพ เลื่อนเคอร์เซอร์ทับเพื่อดูตัวอย่างสีใต้แว่นขยาย แล้วคลิกเพื่อบันทึก แต่ละสีที่บันทึกแสดง HEX, RGB และ HSL พร้อมปุ่มคัดลอกคลิกเดียว
มันอ่านพิกเซลจากภาพโดยตรงในเบราว์เซอร์ของคุณ การดูดสีจึงทันทีและไฟล์ไม่มีการอัปโหลด — สะดวกสำหรับสีแบรนด์ที่คุณไม่อยากส่งไปเว็บมั่ว ๆ
วิธีใช้งาน
- เพิ่มรูปภาพลากภาพหรือภาพหน้าจอที่ต้องการดูดสีเข้ามา
- เลื่อนและคลิกแว่นขยายจะขยายพิกเซลที่แน่นอน คลิกเพื่อบันทึกสี
- คัดลอกค่าคว้า HEX, RGB หรือ HSL ของแต่ละสีที่คุณบันทึกไว้
บางครั้งคุณต้องการสีเดียวจากภาพ และไม่มีอะไรทดแทนได้ — สีน้ำเงินเป๊ะ ๆ ในโลโก้ สีเทาหลังปุ่มในภาพหน้าจอ เฉดสีในรูปถ่ายที่อยากนำมาใช้ซ้ำ ตาเปล่าอ่านโค้ด hex จากหน้าจอไม่ได้ และสีที่ 'ดูเหมือนใช่' มักผิดไปสองสามหลักเสมอ เครื่องมือนี้ให้คุณโหลดภาพ เลื่อนไปบนภาพพร้อมแว่นขยายที่ซูมพิกเซลใต้เคอร์เซอร์ แล้วคลิกเพื่อบันทึกพิกเซลที่ต้องการเป็น swatch — แสดง HEX, RGB และ HSL พร้อมกัน แต่ละค่ามีปุ่มคัดลอก
เครื่องมืออ่านพิกเซลในเครื่องผ่าน canvas ในเบราว์เซอร์: ไม่มีอะไรถูกอัปโหลด ไม่ต้องมีบัญชี และหลังโหลดครั้งแรกก็ทำงานออฟไลน์ได้ ซึ่งสำคัญเมื่อภาพเป็น mockup ที่ยังไม่เปิดตัว ทรัพยากรแบรนด์ของลูกค้า หรือภาพหน้าจอภายใน นี่คือเครื่องมือสุ่มตัวอย่างจุดเดียว — แต่ละคลิกอ่านหนึ่งพิกเซล ซึ่งเหมาะเป๊ะกับโลโก้สะอาด ๆ หรือ UI สีเรียบ ส่วนภาพถ่ายที่มี noise ต้องระวังมากขึ้นสักหน่อย ถ้าอยากให้ระบบดึงสีเด่นของทั้งภาพให้อัตโนมัติ นั่นคือหน้าที่ของเครื่องมือ palette แยกต่างหาก เครื่องมือนี้มีไว้ชี้ที่พิกเซลจำเพาะแล้วเก็บค่าของมัน
ผู้คนใช้ทำอะไรบ้าง
กู้สีแบรนด์ที่แม่นยำจากโลโก้เก่า เมื่อสเปกสีหายไปแล้ว
จับคู่สีปุ่มหรือหัวข้อให้ตรงกับสีในภาพหน้าจอของเว็บที่คุณชอบ
ดึงสีหลัก สีรอง และสีตัวอักษรออกจากโลโก้ในรอบเดียว
หยิบเฉดสีจากรูปถ่ายมาใช้เป็นพื้นหลังหรือสีเน้น
อ่านสีจริงบนหน้าจอขององค์ประกอบกึ่งโปร่งใสจากภาพหน้าจอ
คัดลอกสีเป็น HSL เพื่อปรับให้สว่างขึ้นหรือหม่นลงสำหรับสถานะ hover หรือ variant
เมื่อคุณต้องการสีเป๊ะ ไม่ใช่สีที่ใกล้เคียง
คุณกำลังสร้างแบรนด์ใหม่และมีเพียงอ้างอิงเดียวคือโลโก้เก่า คุณกำลังจับคู่ปุ่มกับภาพหน้าจอของเว็บที่คุณชอบ คุณเห็นเฉดสีในภาพและอยากใช้มันในดีไซน์ของตัวเอง ทุกกรณีปัญหาเหมือนกัน คือตาของคุณอ่านรหัส hex จากหน้าจอไม่ได้ "สีเขียวน้ำทะเลนั้น" จริง ๆ แล้วคือสีเขียวน้ำทะเลที่ต่างกันเล็กน้อยเป็นสิบ ๆ สี และจอก็เลื่อนมันไปอีก คุณต้องการตัวเลขที่พิกเซลนั้นถืออยู่จริง
นั่นคือสิ่งที่เครื่องมือนี้ทำ โหลดภาพ เลื่อนไปเหนือมัน แล้วแว่นขยายจะตามเคอร์เซอร์ของคุณแสดงพิกเซลข้างใต้ ขยายขึ้นเพื่อให้คุณลงตรงพิกเซลที่ต้องการเป๊ะ คลิก แล้วสีนั้นถูกบันทึกเป็นช่องสี แต่ละช่องสีแสดงค่า HEX, RGB และ HSL พร้อมปุ่มคัดลอกข้าง ๆ แต่ละค่า คุณจึงไปจากพิกเซลในภาพสู่รหัสในคลิปบอร์ดได้ตรง ๆ
ภาพไม่เคยออกจากเครื่องของคุณ พิกเซลถูกอ่านในเครื่องในเบราว์เซอร์จากแคนวาส ไม่มีการอัปโหลด ไม่มีบัญชี และเมื่อหน้าเว็บโหลดแล้ว มันทำงานต่อได้ตอนปิดเครือข่าย นั่นคือประเด็นเมื่อ "ภาพ" เป็นภาพจำลองที่ยังไม่เปิดตัว แอสเซตแบรนด์ของลูกค้า หรือภาพหน้าจอภายในที่คุณไม่ควรส่งให้เครื่องมือเว็บสุ่ม ๆ
มันทำงานอย่างไรในทางปฏิบัติ
- แว่นขยายมีไว้เพื่อความแม่นยำ โลโก้และ UI มีขอบคมที่สีเปลี่ยนภายในพิกเซลเดียว การลบรอยหยัก (anti-aliasing) หมายความว่าพิกเซลข้างเคียงเป็นการผสมขุ่น ๆ มุมมองที่ขยายให้คุณเห็นเป๊ะว่าคุณอยู่บนพิกเซลไหนก่อนตัดสินใจ คุณจึงเลือกสีแบรนด์เรียบ ๆ ไม่ใช่ขอบ
- ทุกคลิกเก็บช่องสีไว้ การสุ่มไม่ใช่ทีละอันแล้วหายไป คลิกไปรอบ ๆ ภาพแล้วแต่ละสีซ้อนขึ้นในรายการ คุณจึงดึงสีหลักของโลโก้ สีเน้น และสีข้อความในรอบเดียวและเทียบเคียงกันได้
- สามฟอร์แมต หนึ่งการเลือก แต่ละช่องสีแสดง HEX, RGB และ HSL พร้อมกัน คุณไม่ต้องสุ่มใหม่เพื่อเปลี่ยนฟอร์แมต สีเดียวกันนั่งอยู่แล้วในทั้งสามแบบ แต่ละแบบมีปุ่มคัดลอกของตัวเอง
HEX, RGB, HSL อันไหนควรคัดลอก
มันคือสามวิธีในการเขียนสีเดียวกัน และอันที่ถูกต้องขึ้นอยู่กับว่ามันจะไปที่ไหน
- HEX (
#3A7BD5) เป็นค่าเริ่มต้นสำหรับเว็บ CSS เครื่องมือออกแบบส่วนใหญ่ เอกสารแบรนด์ กระชับและวางได้ทุกที่ คัดลอกอันนี้เว้นแต่คุณมีเหตุผลอื่น - RGB (
rgb(58, 123, 213)) สะกดช่องแดง เขียว และน้ำเงินออกมา มีประโยชน์เมื่อเครื่องมือต้องการค่าช่อง เมื่อคุณต้องการอัลฟา (rgba) หรือเมื่อคุณกำลังคิดว่าสีถูกผสมอย่างไร - HSL (
hsl(215, 65%, 53%)) อธิบายเฉดสี ความอิ่มสี และความสว่าง อันนี้คือตัวที่เอื้อมไปหยิบเมื่อคุณอยาก ปรับ สีมากกว่าแค่ใช้ซ้ำ ขยับความสว่างสำหรับสถานะ hover ลดความอิ่มสีสำหรับแบบหม่น คงเฉดสีและสร้างสเกล
ข้อจำกัดตรงไปตรงมาหนึ่งอย่าง และเครื่องมือพี่น้อง
นี่คือตัวสุ่มแบบจุด แต่ละคลิกอ่านพิกเซลเดียว บนโลโก้สะอาดหรือ UI เรียบ นั่นคือสิ่งที่คุณต้องการพอดี บนภาพที่มีสัญญาณรบกวน เกรน ไล่เฉดสี ร่องรอย JPEG พิกเซลข้างเคียงสองตัวอาจต่างกัน ให้เลือกจากพื้นที่เรียบและใช้แว่นขยายเพื่อเลี่ยงการลงบนพิกเซลผิดปกติ ไม่มีแปรงเฉลี่ยทั้งบริเวณที่นี่
และหากคุณไม่อยากเลือกด้วยมือเลย img.diy มีเครื่องมือพาเลตต์แยกต่างหากที่สแกนทั้งภาพและส่งสีเด่นของมันให้คุณอัตโนมัติ ทั้งสองตอบคำถามต่างกัน เครื่องมือพาเลตต์บอกคุณ ว่าภาพนี้ประกอบด้วยสีอะไร ตัวเลือกสีให้คุณชี้ไปที่พิกเซล เฉพาะ หนึ่งจุด จุดนี้เป๊ะ ๆ บนโลโก้ ปุ่มนั้น และเอาค่าของมัน เอื้อมไปหาเครื่องมือพาเลตต์เพื่อสรุปภาพ และตัวนี้เมื่อคุณรู้จุดที่ต้องการอยู่แล้ว
โหลดภาพ เลื่อนเพื่อหาพิกเซล คลิกเพื่อเก็บ คัดลอกฟอร์แมตที่คุณต้องการ
ทำไมต้อง IMG.DIY
แว่นขยาย
ซูมเข้าเพื่อให้คุณคลิกพิกเซลที่แน่นอน
HEX / RGB / HSL
ทุกสีที่บันทึกในสามฟอร์แมต
คัดลอกคลิกเดียว
คัดลอกค่าใด ๆ ไปที่คลิปบอร์ดได้เลย
เป็นส่วนตัว
พิกเซลถูกอ่านในเครื่อง — ไม่มีการอัปโหลด