ลองนึกภาพว่าคุณกำลังเลื่อนดูภาพและพบสีที่สมบูรณ์แบบ ซึ่งเป็นเฉดสีที่คุณต้องการสำหรับโครงการออกแบบครั้งต่อไปของคุณ มีเครื่องมือที่ยอดเยี่ยมบนอินเทอร์เน็ตที่จะช่วยคุณระบุสีเฉพาะบนแอพหรือเว็บไซต์ มาดูตัวเลือกที่ดีที่สุดกันบ้าง
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
- คลิกที่ไอคอนส่วนขยาย Eye Dropper
- เลือก 'เลือกสีจากหน้าเว็บ' และเลื่อนเคอร์เซอร์ของเมาส์ไปที่องค์ประกอบต่างๆ ในแอปหรือเว็บไซต์
คุณจะพบรหัสสีขององค์ประกอบที่แสดงอยู่ที่ด้านล่างขวาของหน้าเว็บ
ตัวอย่าง
โอเค มาใช้เครื่องมือขยายหลอดหยดในตัวอย่างในชีวิตจริงกันเถอะ เราจะเริ่มต้นด้วยการเปิดเว็บไซต์และกดที่ไอคอนส่วนขยาย Eye Dropper
เมื่อคุณวางเคอร์เซอร์บนองค์ประกอบต่างๆ ของเว็บไซต์ คุณจะเห็นรหัสสีปรากฏขึ้นในส่วนที่ด้านล่างขวาของหน้าจอ
เมื่อฉันวางเคอร์เซอร์บนไอคอนรูปตัว V ฉันจะเห็นรหัสสีที่หน้าต่างด้านล่างตามที่กล่าวไว้ ข้อดีของเครื่องมือนี้คือ คุณสามารถค้นหาโค้ด RGB พร้อมกับรหัสสีฐานสิบหกขององค์ประกอบได้ วิธีนี้มีความยืดหยุ่นสำหรับผู้ที่ต้องการวิธีที่ง่ายและรวดเร็วในการคว้ารหัสสำหรับสีที่พวกเขาชื่นชอบ