colorzilla-featured

อยากรู้ว่าสีแบบนี้ใช้โค๊ดอะไร ใช้ตัวดูดสี ColorZilla ดูสิ

by | posted in: All Posts, Tips & Trick | 5,135 views
Line

ColorZilla เป็น Add-ons ใน Firefox และ Chrome ตัวนี้ช่วยดูดสีตามหน้าเว็บที่เราชอบแล้ว copy โค๊ดสีออกมาได้เลย สะดวกมากสำหรับการออกแบบเว็บไซต์ และ banner ต่างๆ หรือเอาไปใส่ใน Inspect Element สำหรับ preview การเปลี่ยนสี font สี background และสีของ object อื่นๆ ได้สบายมาก

อยากรู้ว่ามันเจ๋งยังไง เรามาลองติดตั้งและใช้งานกันดู (บทความนี้ใช้ Firefox)

1. ที่ Firefox เปิด Add-ons Manager ขึ้นมา

colorzilla-02

 

2. ที่แท็บ Get Add-ons ให้พิมพ์คำว่า colorzilla ในช่อง search แล้วกด Enter จากนั้นเลือก Install ColorZilla

colorzilla-08


3. เสร็จแล้วมันจะมาอยู่ที่แท็บ Extensions เราต้อง restart browser ก่อนจึงจะใช้งานได้ โดยปิด Firefox แล้วเปิดใหม่

colorzilla-03

 

4. ทีนี้ก็พร้อมใช้งานแล้ว

colorzilla-04

 

5. กดรูป dropper แล้วเลือกบริเวณสีที่เราต้องการ

colorzilla-05

 

6. คลิก 1 ครั้ง ก็จะได้สีที่เราต้องการพร้อมกับ copy โค๊ดให้เรียบร้อย
นำไป paste หรือ Ctrl+V ได้เลย ตามตัวอย่างนี้ได้โค๊ด #26A9E1

colorzilla-06

 

colorzilla-07

 

 

 

นอกจากความสามารถในการดูดสีแล้ว ColorZilla ยังมีความสามารถอื่นอีก
ให้คลิกขวาที่ข้าง dropper ออกมาแล้วลองเล่นกันดู
น่าจะถูกใจพวกเราชาว web design นะคะ

 

 

 

 

 

 

บทความ/รูปภาพ : Webmonster Lab | Yui K Artist

 

SME Webinar แหล่งความรู้ชั้นดีและฟรี ที่อยากแนะนำ
ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ
Line
Follow Kanchita Varitthinanon (Yui K artist):

Founder of Webmonster Lab, Instructor and Creative Director

I am an artist/professional in digital platform (small to large scale). Passion for web solutions with smooth UX/UI and stunning organic SEO. 16+ years of experience in Web Design & Development, Digital Strategy, E-Commerce and Business Management. 9+ years of WordPress lover : )