เลือกรหัสสีบนหน้าจอได้ง่าย ๆ ด้วย 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 ต่อไปนี้

LINE Store 500 Internal Server Error Sticker
สนับสนุน phattarachai.dev
หากบทความใน phattarachai.dev มีประโยชน์กับคุณ โปรดสนับสนุน Sticker และ Theme LINE ที่ผมทำขึ้นได้ทาง เพื่อเป็นกำลังใจให้ผมนำเนื้อหาสาระดี ๆ และ Open Source Library ให้แก่ Laravel Developer ชาวไทยมากขึ้นนะครับ

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

เคล็ดลับ HTML ที่คุณอาจไม่เคยรู้
6 มีนาคม 2564
เคล็ดลับ HTML ที่คุณอาจไม่เคยรู้
Validation Rule สำหรับตรวจสอบรหัสบัตรประชาชน
6 มีนาคม 2564
Validation Rule สำหรับตรวจสอบรหัสบัตรประชาชน
แปลงวันที่ภาษาไทย ด้วย thaidate() ใน PHP และ Laravel
6 มีนาคม 2564
แปลงวันที่ภาษาไทย ด้วย thaidate() ใน PHP และ Laravel