วิธีระบุสีเฉพาะบนแอพหรือเว็บไซต์
เบ็ดเตล็ด / / October 04, 2023
ไม่ว่าจะเป็นการออกแบบเว็บและแอป การถ่ายทอดอารมณ์ การสร้างแบรนด์ หรือการยกระดับประสบการณ์ผู้ใช้ สีมีบทบาทสำคัญอย่างแน่นอน อย่างไรก็ตาม การค้นหาสีหรือการผสมสีที่เหมาะสมนั้นพูดง่ายกว่าทำ โชคดีที่มีเครื่องมือบางอย่างเพื่อระบุสีเฉพาะบนแอปหรือเว็บไซต์ ดังนั้นเราจึงสามารถเลือกและบันทึกสีที่ดึงดูดความสนใจของเราได้
ลองนึกภาพการเลื่อนดูเว็บไซต์และค้นหาสีที่สมบูรณ์แบบ ซึ่งเป็นเฉดสีที่คุณต้องการสำหรับโปรเจ็กต์ต่อไปของคุณ ถ้าอย่างนั้น ให้เราช่วยคุณค้นหาสีที่แน่นอนของพื้นหลังหรือองค์ประกอบอื่นๆ บนเว็บไซต์หรือแอป
วิธีที่ง่ายที่สุดวิธีหนึ่งในการรับรหัสสีจากเว็บไซต์คือการใช้เครื่องมือเว็บเฉพาะและเว็บไซต์ตัวเลือกสี ไม่ว่าคุณจะใช้เบราว์เซอร์ตัวไหน ไม่ว่าจะเป็น ที่ใช้โครเมียม, กับ ความเข้ากันได้ของเว็บระดับลึกหรือ Safari เริ่มต้นของ Apple สามารถใช้วิธีนี้ได้
ยิ่งไปกว่านั้น ไม่ว่าคุณจะใช้ Mac, แล็ปท็อป Windows, iPhone, iPad หรืออุปกรณ์ Android เครื่องมือเว็บระบุสีเหล่านี้จะเป็นส่วนเสริมที่มีประโยชน์ในคลังแสงของคุณ เราได้ทดสอบตัวเลือกมาสองสามตัวแล้ว และนี่คือตัวเลือกที่เหมาะกับเราที่สุด
ขั้นตอนที่ 1: เปิดเบราว์เซอร์ของคุณแล้วไปที่ ImageColorPicker.com
ImageColorPicker
ขั้นตอนที่ 2: คลิก/แตะใช้รูปภาพของคุณเพื่อระบุเว็บไซต์/URL รูปภาพหรืออัปโหลดรูปภาพ
ขั้นตอนที่ 3: ตอนนี้คุณสามารถทำอย่างใดอย่างหนึ่ง
- คัดลอกที่อยู่เว็บไซต์
- คัดลอกรูปภาพหรือ URL
- ถ่ายภาพหน้าจอของเพจ
ขั้นตอนที่ 4: เมื่อภาพได้รับการประมวลผลแล้ว คุณสามารถเลื่อนเคอร์เซอร์เพื่อเลือกสีได้
ขั้นตอนที่ 5: ตามลำดับ คุณจะเห็นโค้ด HEX หรือ RGB คัดลอก/วางและใช้งานตามต้องการ
หากคุณไม่ชอบ ImageColorPicker.com หรือต้องการตัวเลือกเพิ่มเติม คุณสามารถลองใช้เว็บไซต์ต่อไปนี้
ตัวเลือกสีซอสมะเขือเทศสีแดง
รหัสสี HTML
เครื่องมือไพน์
อย่างไรก็ตาม ต่างจาก ImageColorPicker ตรงที่เว็บไซต์เหล่านี้ไม่รองรับเว็บไซต์หรือ URL รูปภาพ พวกเขาพึ่งพาคุณในการอัปโหลดภาพ ดังนั้น คุณจะต้องถ่ายภาพหน้าจอ อัปโหลด จากนั้นค้นหาสี
2. เลือกสีจากเว็บไซต์ผ่านซอฟต์แวร์แก้ไขภาพ
หากคุณใช้เครื่องมือแก้ไขภาพ คุณไม่จำเป็นต้องค้นหาเพิ่มเติมอีกต่อไป ไม่ว่าจะเป็นซอฟต์แวร์แก้ไขภาพขั้นสูง เช่น Photoshop หรือเครื่องมือออนไลน์ เช่น Canva ซอฟต์แวร์แก้ไขภาพส่วนใหญ่มีเครื่องมือเลือกสี/ยาหยอดตาที่ใช้งานง่าย ซึ่งรวมถึง ดูอย่างรวดเร็วของ Mac, และ โปรแกรมแก้ไขภาพหน้าจอของ iPhone.
อย่างไรก็ตาม ไม่ใช่ทั้งหมดที่อาจช่วยให้คุณรับรหัสสีจากเว็บไซต์หรือแอปได้ พวกเขาจะอนุญาตให้คุณเลือกและใช้สีภายในหน้าต่างได้ ถ้ามันเจ๋งสำหรับคุณ ใช้เครื่องมือแก้ไขภาพที่คุณเลือกเพื่อระบุสีที่ต้องการได้เลย เรากำลังดำเนินการ แคนวา ตัวอย่างเช่น.
ขั้นตอนที่ 1: ถ่ายภาพหน้าจอของเว็บไซต์หรือแอป
ขั้นตอนที่ 2: เปิด Canva บนเบราว์เซอร์ (หรือแอปบนอุปกรณ์เคลื่อนที่ของคุณ)
ขั้นตอนที่ 3: เลือกผืนผ้าใบและอัพโหลดภาพ
ขั้นตอนที่ 4: จากนั้น เปิดเครื่องมือที่เกี่ยวข้องกับสี ข้อความ การวาด องค์ประกอบ ฯลฯ
ขั้นตอนที่ 5: เลือกกล่องสีแล้วคลิกไอคอน '+ เพิ่มสีใหม่'
ขั้นตอนที่ 6: เลื่อนไปที่สีแล้วคลิก/แตะเพื่อเลือกสีที่ต้องการ
3. ใช้ตัวเลือกสีใน Firefox เพื่อค้นหาสีจากเว็บไซต์ใด ๆ
นอกจากซอฟต์แวร์แก้ไขภาพแล้ว เบราว์เซอร์ Firefox ยังมีเครื่องมือดูดสีในตัวอีกด้วย แม้ว่าจะซ่อนเร้นอยู่บ้าง แต่เรามาเปิดเผยการแฮ็กกันดีกว่า
ขั้นตอนที่ 1: เปิด Firefox และเปิดเว็บไซต์ที่คุณต้องการเลือกสี
ขั้นตอนที่ 2: แตะไอคอนสามบรรทัดจากมุมขวาบน
ขั้นตอนที่ 3: เลือกเครื่องมือเพิ่มเติม จากนั้นเลือก Eyedropper
ขั้นตอนที่ 4: ตอนนี้ เพียงเลื่อนเคอร์เซอร์ไปที่สีที่คุณต้องการระบุ Firefox จะค้นหารหัสสีฐานสิบหกทันทีและนำเสนอให้คุณเห็น
ขั้นตอนที่ 5: โดยเฉพาะอย่างยิ่ง Eyedropper จะทำการตรวจสอบและส่งรหัสสีต่อไปจนกว่าคุณจะออก หากต้องการปิดเครื่องมือ เพียงคลิกที่ใดก็ได้บนหน้าจอ
เช่นเดียวกับ Firefox แม้แต่ Chrome ก็มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่สามารถช่วยคุณระบุสีเฉพาะบนเว็บไซต์ได้ อย่างไรก็ตามยังมีสิ่งที่จับได้ มาหาคำตอบกันดีกว่า
เครื่องมือเลือกสีของ Google Chrome ค่อนข้างจำกัด เคล็ดลับนี้สามารถบอกได้เฉพาะสีขององค์ประกอบที่เข้ารหัสลงในเว็บไซต์เท่านั้น เช่น สีที่กล่าวถึงในโค้ด ดังนั้น คุณจะไม่ได้รับข้อมูลที่เกี่ยวข้องกับสีเกี่ยวกับองค์ประกอบที่นำเข้า เช่น โลโก้ รูปภาพ ฯลฯ
ขั้นตอนที่ 1: เปิด Chrome และเปิดเว็บไซต์ที่คุณต้องการเลือกสี
ขั้นตอนที่ 2: จากนั้นคลิกไอคอนสามจุดจากมุมบนขวา
ขั้นตอนที่ 3: เลือกเครื่องมือเพิ่มเติม จากนั้นเลือกเครื่องมือสำหรับนักพัฒนา
บันทึก: หน้าจอของคุณจะถูกแบ่งออกเป็นสองหน้าด้วยสายตา คุณจะเห็นเว็บไซต์ทางด้านซ้ายและโค้ดของเว็บไซต์ทางด้านขวา
ขั้นตอนที่ 4: หากต้องการเลือกสีจากเว็บไซต์ ให้พิมพ์ Ctrl + Shift + C แล้วเลื่อนเคอร์เซอร์ไปที่สีที่คุณต้องการเลือก
ขั้นตอนที่ 5: ตอนนี้คุณสามารถดูรหัสสีพื้นหลัง ข้อความ หรือองค์ประกอบได้
5. ใช้ส่วนขยายเบราว์เซอร์เพื่อค้นหารหัสฐานสิบหกของสีบนเว็บไซต์
ส่วนขยายเบราว์เซอร์ ไม่เพียงแต่สามารถเพิ่มประสิทธิภาพการทำงานของคุณ แต่ยังทำให้การระบุสีสะดวกยิ่งขึ้นอีกด้วย โชคดีที่เบราว์เซอร์ทั่วไปส่วนใหญ่รวมถึง Chrome และ Firefox มีส่วนขยายดังกล่าวอยู่ในคลังแสง
ส่วนขยายของ Chrome เพื่อระบุสี
ตัวเลือกสี Hex
ยาหยอดตา
หยดสี
ส่วนขยาย Firefox เพื่อระบุสี
คัลเลอร์ซิลล่า
น้ำยาหยอดตา Colorpick
เมื่อคุณเพิ่มส่วนขยายที่ต้องการลงในเบราว์เซอร์ของคุณแล้ว ส่วนที่เหลือก็เป็นการเล่นของเด็ก เปิดเว็บไซต์ → เลือกส่วนขยายจากแถบเมนู → นำเคอร์เซอร์ไปที่สี → รับรหัสสี
เลือกสีของคุณ
ไม่ว่าคุณจะเป็นนักออกแบบ นักพัฒนา หรือผู้ที่สงสัยเกี่ยวกับสีที่คุณพบ การระบุสีเฉพาะบนแอปหรือเว็บไซต์ถือเป็นทักษะที่มีประโยชน์ ดังนั้นเราจึงได้กล่าวถึงวิธีการและเครื่องมือต่างๆ มากมายเพื่อช่วยคุณค้นหารหัสสีหรือชื่อสีที่เข้าใจยาก
หวังว่าเราจะสามารถให้บริการคุณได้ หากคุณต้องการแฮ็กหรือคำแนะนำดังกล่าวเพิ่มเติม หรือต้องการคำตอบสำหรับคำถามที่น่าสงสัยเกี่ยวกับเทคโนโลยี ส่วนความคิดเห็นจะเปิดอยู่เสมอ