วิธีระบุสีเฉพาะบนแอพหรือเว็บไซต์

ลองนึกภาพว่าคุณกำลังเลื่อนดูภาพและพบสีที่สมบูรณ์แบบ ซึ่งเป็นเฉดสีที่คุณต้องการสำหรับโครงการออกแบบครั้งต่อไปของคุณ มีเครื่องมือที่ยอดเยี่ยมบนอินเทอร์เน็ตที่จะช่วยคุณระบุสีเฉพาะบนแอพหรือเว็บไซต์ใดๆ ลองมาดูตัวเลือกที่ดีที่สุดกันบ้าง

1. การใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์บนเว็บเบราว์เซอร์ Chrome

ตัวเลือกหนึ่งที่คุณสามารถลองใช้ได้คือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome Chrome มาพร้อมกับคุณลักษณะที่เป็นประโยชน์มากมายสำหรับนักพัฒนา ทำให้งานง่ายขึ้นมาก คุณสามารถใช้ขั้นตอนต่อไปนี้เพื่อระบุสีเฉพาะบนแอพหรือเว็บไซต์ใดก็ได้

• เปิดเว็บไซต์ที่คุณต้องการระบุสีบนเว็บเบราว์เซอร์ Chrome
• คลิกที่ไอคอนสามจุดที่ด้านบนขวาของ Chrome ป๊อปอัปพร้อมตัวเลือกมากมายจะปรากฏขึ้น
• คลิกที่ 'เครื่องมือเพิ่มเติม' จากนั้นเลือก 'เครื่องมือสำหรับนักพัฒนา' จากป๊อปอัปผลลัพธ์
• ใช้ Ctrl + Shift + I หากคุณต้องการข้ามขั้นตอนข้างต้น
• ตอนนี้หน้าต่างแบ่งออกเป็นสองหน้าจอ – เว็บไซต์ทางด้านซ้ายและรหัสของเว็บไซต์ทางด้านขวา
• พิมพ์ Ctrl + Shift + C บนแป้นพิมพ์ของคุณ ข้อมูลนี้จะแสดงรายละเอียดทั้งหมดขององค์ประกอบเฉพาะบนเว็บไซต์เมื่อเราวางเคอร์เซอร์เมาส์ไว้ที่องค์ประกอบ
• คุณสามารถค้นหารหัสสีขององค์ประกอบพร้อมกับข้อมูลที่เป็นประโยชน์อื่นๆ

ตัวอย่าง

สมมติว่าคุณสนใจรหัสสีเฉพาะสำหรับองค์ประกอบบางอย่างในเว็บไซต์ต่อไปนี้:

คุณสามารถเลือกเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้โดยคลิกที่จุดสามจุดที่มุมของหน้าจอ ในเมนูแบบเลื่อนลง ให้เลือก เครื่องมือเพิ่มเติม จากนั้นเลือก เครื่องมือสำหรับนักพัฒนา

หน้าจอจะถูกแบ่งออกเป็นสองหน้าด้วยสายตา คุณจะเห็นเว็บไซต์ทางด้านซ้ายและรหัสของเว็บไซต์ทางด้านขวา

พิมพ์คำสั่งและทางลัด "Ctrl + Shift + C" แล้ววางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบของเว็บไซต์ ซึ่งจะแสดงสีขององค์ประกอบนั้นพร้อมกับข้อมูลที่เป็นประโยชน์อื่นๆ ด้านล่างนี้คือตัวอย่างสองตัวอย่างที่เราพบสีของแถบนำทางและแดชบอร์ดใต้เครื่องมือค้นหา

ที่นี่ เราจะพบรหัสสีบนป๊อปอัปของแถบนำทาง รหัสสีคือ #333333

สีของแดชบอร์ดสามารถพบได้พร้อมกับรายละเอียดที่เป็นประโยชน์อื่นๆ สี: #333333, สีพื้นหลัง: #5D4A8E. แม้ว่าในตอนเริ่มต้นอาจดูน่ากลัวเล็กน้อย แต่โปรแกรมก็ใช้งานได้ง่ายกว่ามากด้วยการฝึกฝนเล็กน้อย

2. ส่วนขยาย Eye Dropper Chrome

Eye Dropper เป็นส่วนขยาย Chrome ที่ได้รับความนิยมและใช้กันอย่างแพร่หลายเพื่อช่วยคุณค้นหาสีต่างๆ บนเว็บไซต์หรือแอปใดๆ

ทำตามขั้นตอนด้านล่างเพื่อระบุสีเฉพาะบนเว็บไซต์หรือแอพโดยใช้เครื่องมือขยาย Eye Dropper

• เปิดเว็บไซต์หรือแอปใดๆ บนเว็บเบราว์เซอร์ Chrome Chrome
• คลิกที่ไอคอนส่วนขยาย Eye Dropper
• เลือก 'เลือกสีจากหน้าเว็บ' และเลื่อนเคอร์เซอร์ของเมาส์ไปที่องค์ประกอบต่างๆ ในแอปหรือเว็บไซต์

คุณสามารถค้นหารหัสสีขององค์ประกอบที่แสดงไว้ที่ด้านล่างขวาของหน้าเว็บ

ตัวอย่าง

โอเค มาใช้เครื่องมือขยายหลอดหยดในตัวอย่างในชีวิตจริงกันเถอะ เราจะเริ่มต้นด้วยการเปิดเว็บไซต์และกดที่ไอคอนส่วนขยาย Eye Dropper

เมื่อคุณวางเคอร์เซอร์บนองค์ประกอบต่างๆ ของเว็บไซต์ คุณจะเห็นรหัสสีปรากฏในส่วนที่ด้านล่างขวาของหน้าจอ

เมื่อฉันวางเคอร์เซอร์บนไอคอนรูปตัว V ฉันจะเห็นรหัสสีที่หน้าต่างด้านล่างตามที่กล่าวไว้ ข้อดีของเครื่องมือนี้คือ คุณสามารถค้นหาโค้ด RGB พร้อมกับรหัสสีฐานสิบหกขององค์ประกอบได้ วิธีนี้มีความยืดหยุ่นสำหรับผู้ที่ต้องการวิธีที่ง่ายและรวดเร็วในการคว้ารหัสสำหรับสีที่พวกเขาชื่นชอบ