เลือกรหัสสีบนหน้าจอได้ง่าย ๆ ด้วย Color Picker บน Windows

6 มีนาคม 2564
เลือกรหัสสีบนหน้าจอได้ง่าย ๆ ด้วย Color Picker บน Windows

เวลาที่เราออกแบบกราฟฟิกหรือพัฒนา User Interface ใด ๆ การเลือกสีให้ถูกตามที่ Design ออกมาก็เป็นเรื่องสำคัญอย่างยิ่ง บางครั้ง Designer ไม่ได้บอกรหัสสีมาให้เราหรือวิธีการไปดูรหัสสีอาจไม่สะดวกนัก จริง ๆ แล้วใน Windows มี PowerToys ที่มีเครื่องมือ Color Picker ให้เราเลือกรหัสสีจากตำแหน่งบนหน้าจอใด ๆ ด้วยคีย์ลัดและคลิกเดียว

ติดตั้ง PowerToys

ขั้นแรกทำการ Dowlonad PowerToys ได้จาก GitHub นี้ https://github.com/microsoft/PowerToys ใน PowerToys มีเครื่องมือ utilities ที่น่าสนใจหลาย ๆ ตัว เช่น

แน่นอนว่าในบทความนี้จะพามารู้จักกับ Color Picker กัน

หน้าจอ Setting Color ของ Color Picker ใน PowerToys

เลือกสีด้วย Color Picker

เมื่อติดตั้ง PowerToys แล้ว utilities Color Picker ให้เราเรียกใช้งานได้ด้วยคีย์ลัด Win + Shift + C

เมื่อเลื่อนเมาส์จะแสดง tooltip สีที่อยู่ใต้เมาส์เราทันที

นอกจากนี้เมื่อเรากำลังเลือกสีเราสามารถ scroll up เพื่อ zoom ให้เห็น pixel สีที่เราต้องการเลือกได้ชัดขึ้นด้วย

scroll up เพื่อ zoom

หน้าต่าง Editor

เมื่อเราคลิกตรงตำแหน่งนั้นจะขึ้นหน้าต่าง editor ขึ้นมาบอกรายละเอียดเกี่ยวกับสีที่เราเลือกมากขึ้น

เราสามารถ คลิก Copy to clipboard เพื่อนำรหัสสีที่ต้องการไปใช้ได้เลย

บนหน้าต่าง editor นี้ด้านซ้ายจะแสดงสีที่เราเคยคลิกเก็บเป็นประวัติให้เราด้วยทำให้เราย้อนดูสีที่เราเคยเลือกไว้ได้ง่าย ๆ

ด้านบนจะมีเฉดสีจากสีที่เราเลือก ตรงนี้ก็จะสะดวกเวลาที่เราต้องการเทียบสี เอาไปทำ UI ตอนที่เราต้องการให้สีทึบขึ้นหรือสีอ่อนลงได้สะดวกดีสำหรับ dev ได้เหมือนกัน

ตรงกลางจะมีเลขรหัสสีตาม format ต่าง ๆ ให้เรา copy ไปใช้งานได้เลย

ทีนี้ถ้า format รหัสสีที่เราใช้ประจำนอกเหนือจากที่แสดงใน editor ในหน้าต่าง setting ของ Color Picker เราสามารถ เลือกรหัสสีเพิ่มเติมที่ต้องการให้แสดงในหน้าต่าง Editor ได้เลย

ดูเพิ่มเติม

ถ้าสนใจสามารถลองดูเครื่องมือ utilities อื่น ๆ ที่มาพร้อมกับ PowerToys ได้จาก Website ของ Microsoft ต่อไปนี้

Phattarachai Chaimongkol
เกี่ยวกับ phattarachai.dev

สวัสดีครับ เป็น Full Stack Web Developer สามารถดูแลงานทั้งระบบได้ ทำงานสายนี้มากว่า 10 ปี ผ่านงานทางภาครัฐ เป็นที่ปรึกษาบริษัทเอกชน มีงาน Web App ทั้งเล็กและใหญ่ ระบบ Inventory, งาน ERP พร้อมใช้ประสบการณ์ที่มีแก้ไขปัญหาธุรกิจให้ลูกค้าครับ

เรื่องล่าสุด

งานพัฒนา Platform Video E-learning
6 มีนาคม 2564
งานพัฒนา Platform Video E-learning
รับงาน Web Scrapping อ่านข้อมูลเว็บไซต์ส่งแจ้งเตือน Line Notification
6 มีนาคม 2564
รับงาน Web Scrapping อ่านข้อมูลเว็บไซต์ส่งแจ้งเตือน Line Notification
รับงาน ดึงข้อมูลโพสต์ Facebook Group / รูปภาพ / เนื้อหา ลงไฟล์ ส่งเข้า Google Drive
6 มีนาคม 2564
รับงาน ดึงข้อมูลโพสต์ Facebook Group / รูปภาพ / เนื้อหา ลงไฟล์ ส่งเข้า Google Drive