Google Chrome มาพร้อมกับ Chrome DevTools ซึ่งเป็นชุดเครื่องมือสำหรับนักพัฒนาเว็บ ในบรรดาเครื่องมือทั้งหมดที่สามารถเข้าถึงได้ เครื่องมือเลือกสีที่มีใน Chrome นั้นมีประโยชน์มาก
แต่คุณจะเข้าถึงได้อย่างไร คุณใช้มันอย่างไร? คุณสมบัติที่นำเสนอพร้อมกับเครื่องมือคืออะไร?
ในบทความนี้ เราจะสำรวจเครื่องมือนี้และคุณลักษณะต่างๆ
จะเปิดตัวตัวเลือกสีของ Chrome ได้อย่างไร
คุณสามารถเข้าถึงเครื่องมือ Chrome ตัวเลือกสีได้โดยใช้แป้นพิมพ์ลัดหรือ GUI (Graphical User Interface)
กด Ctrl + Shift + I เมื่อใช้แป้นพิมพ์เพื่อรับ DevTools จากนั้นไปที่ตัวเลือกสี หากคุณใช้ mac คุณต้องกด Command + Option + I
คุณต้องทำการคลิกขวาโดยใช้เมาส์ แล้วคลิก “ตรวจสอบ” เพื่อนำทางผ่าน DevTools
คุณยังสามารถตั้งค่า Chrome DevTools ให้เปิดอัตโนมัติพร้อมกับแท็บใหม่ทุกแท็บ คุณจึงสามารถเข้าถึงตัวเลือกสีสำหรับทุกแท็บบนเบราว์เซอร์ของคุณได้อย่างรวดเร็ว
เพื่อให้บรรลุผลดังกล่าว คุณต้องเปิดใช้ Chrome ใหม่โดยใช้บรรทัดคำสั่งในขณะที่ส่งแฟล็กต่อไปนี้:
--auto-open-devtools-for-tabs
นี่คือลักษณะที่ปรากฏเมื่อเปิดใช้ chrome ด้วย DevTools ที่เปิดอัตโนมัติผ่านเทอร์มินัลบน Linux:
google-chrome-stable --auto-open-devtools-for-tabs
จะใช้ตัวเลือกสีบน Chrome ได้อย่างไร
เมื่อคุณเปิด DevTools คุณจะต้องนำทางเพื่อเข้าถึงเครื่องมือที่จำเป็นในการระบุสีบนหน้าเว็บหรือการออกแบบที่คุณต้องการทำงาน
ตามค่าเริ่มต้น คุณควรเห็นส่วน “สไตล์” ทำงานอยู่ที่ด้านล่างของ DevTools ดังที่แสดงในภาพหน้าจอ
หากคุณเลือกอย่างอื่นไว้ อย่าลืมคลิก “สไตล์” เพื่อเข้าถึงโค้ด CSS ของหน้าเว็บ
ที่นี่ คุณต้องเลื่อนลงไปตามรหัส CSS ที่มีและมองหากล่องสีที่มีป้ายกำกับเป็นพื้นหลังหรือสีใต้ส่วนเนื้อหา นี่คือตัวเลือกสีที่คุณกำลังมองหา
เพียงคลิกที่กล่องสี ควรให้ตัวเลือกเพิ่มเติมแก่คุณดังที่แสดงในภาพหน้าจอด้านล่าง
แค่นั้นแหละ! แท้จริงแล้ว คุณมีตัวเลือกสีบนเบราว์เซอร์ของคุณพร้อมที่จะช่วยเหลือคุณ
ที่นี่ คุณควรหารหัสฐานสิบหกหรือค่า RGB ของสี และรับความสามารถในการเลือกองค์ประกอบ CSS อื่นๆ เพื่อสำรวจและตรวจสอบการออกแบบบนหน้าเว็บ
ฟีเจอร์ใน Color Picker บน Chrome
เครื่องมือเลือกสีในตัวของ Chrome ให้ข้อมูลที่หลากหลายนอกเหนือจากรหัสฐานสิบหกเพื่อระบุสี
นี่คือสิ่งที่คุณคาดหวังได้จากมัน คุณสมบัติหลักบางประการ ได้แก่ :
จานสี: แทนที่จะหมุนวนไปหลายๆ เฉดสี คุณจะได้รับจานสีที่กำหนดไว้ล่วงหน้าเพื่อใช้การเลือกบางอย่างอย่างรวดเร็ว
รูปแบบสี: คุณสามารถเปลี่ยนจากรหัสฐานสิบหกเป็นค่า RGBA และค่าสี HSLA ได้เช่นกัน
Eyedropper: เมื่อคุณเข้าถึงตัวเลือกสี คุณสามารถเรียกดูหน้าเว็บและเลือกองค์ประกอบใดก็ได้เพื่อรับรหัสฐานสิบหกของสีนั้น คุณสามารถคลิกที่สลับตัวเลือกสีเพื่อเปิด/ปิด
คุณจะได้รับตัวเลือกเพิ่มเติมในการปรับแต่งสีและได้สีที่ถูกต้องตามที่คุณต้องการ พวกเขาอยู่ที่นี่:
- คัดลอกไปยังคลิปบอร์ด: คุณสามารถคัดลอกรหัสของสีที่ระบุไปยังคลิปบอร์ดของคุณได้อย่างรวดเร็ว
- การไล่ระดับสี: คุณสามารถปรับแต่งเฉดสีและวนรอบความเป็นไปได้ของการผสมสีที่คุณชอบ
- การควบคุมความทึบ: คุณสามารถปรับระดับความโปร่งใสเพื่อให้ดูทึบหรือน้อยที่สุดได้
- ตัวเลือกสีพื้นหลัง: เพื่อเลือกสีพื้นหลังที่เหมาะสมสำหรับคอนทราสต์ที่สมบูรณ์แบบ
- อัตราส่วนคอนทราสต์: ปรับคอนทราสต์หรือแก้ไขเพื่อทำให้ข้อความ/องค์ประกอบมองเห็นได้
หมายเหตุ: เครื่องมือเลือกสีไม่จำกัดเฉพาะ Google Chrome แต่สามารถใช้ได้บนเว็บเบราว์เซอร์ที่ใช้ Chrome เช่น Brave
วิธีใช้ Chrome Color Picker กับ Google Slides
คุณสามารถนำทางเพื่อเข้าถึงเครื่องมือตัวเลือกสีได้ หากคุณทำการคลิกขวาที่ส่วนหัวของหน้าเว็บ Google Slides แม้ว่า Google Slides จะไม่มีเครื่องมือเลือกสีในตัว แต่ก็น่าจะเพียงพอแล้ว
หากคุณไม่สะดวกใจที่จะใช้ DevTools กับ Google Slides คุณสามารถลองใช้ส่วนขยายของ Chrome สำหรับงานได้เช่นกัน
ส่วนขยายของ Chrome เป็นทางเลือกแทนตัวเลือกสี
แม้ว่าส่วนขยายจะมีประโยชน์ แต่ควรสังเกตว่าส่วนขยายเหล่านี้ไม่ได้รับการอัปเดตหรือบำรุงรักษา เนื่องจากจำเป็นต้องเข้าถึงข้อมูลเบราว์เซอร์ของคุณ คุณจึงควรระมัดระวังเมื่อติดตั้งส่วนขยายใดๆ แม้แต่ส่วนขยายที่แนะนำที่นี่
อย่างไรก็ตาม มีส่วนขยายยอดนิยมสองรายการที่คุณอาจสนใจลองใช้:
#1. คัลเลอร์ซิลล่า
คัลเลอร์ซิลล่า ส่วนขยายมีฟังก์ชันที่จำเป็นทั้งหมดที่คุณได้รับจากตัวเลือกสีในตัวของ Chrome เป็นโบนัส คุณยังสามารถตรวจสอบประวัติของสีล่าสุดที่เลือกได้
ดังนั้น สิ่งนี้ควรมีประโยชน์สำหรับทุกกรณีการใช้งาน ไม่ใช่แค่กับ Google สไลด์
#2. น้ำยาหยอดตา ColorPick
หากคุณพบปัญหาเกี่ยวกับเครื่องมือ eyedropper โดยใช้ DevTools คุณสามารถลองได้ น้ำยาหยอดตา ColorPick เพื่อรับ eyedropper โดยไม่ต้องเข้าถึงเครื่องมือเว็บ
เมื่อคุณเลือกสี ระบบจะแสดงค่า RGB และตัวเลือกในการสร้างจานสี เช่นเดียวกับส่วนขยายข้างต้น คุณยังสามารถตรวจสอบประวัติของสีที่คุณเลือกได้อีกด้วย
คำสุดท้าย 🎨
Chrome DevTools Color Picker เป็นเครื่องมือที่มีประโยชน์ คุณไม่จำเป็นต้องใช้เครื่องมือระดับมืออาชีพเพื่อช่วยระบุสีและรหัสหรือค่าที่เกี่ยวข้อง เครื่องมือในตัวของ Chrome ทำให้ง่ายโดยไม่ต้องใช้ส่วนขยายของบุคคลที่สาม
เริ่มต้นจากนักออกแบบกราฟิกไปจนถึงนักพัฒนาเว็บที่สร้างเทมเพลตเว็บไซต์ ทุกคนควรพบว่าสิ่งนี้มีประโยชน์
แน่นอน คุณสามารถเลือกใช้ส่วนขยายของบุคคลที่สามได้เช่นกัน แต่หากคุณไม่ต้องการ เราขอแนะนำให้คุณสำรวจคุณลักษณะทั้งหมดด้วย DevTools
