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