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

มองหา Freelance Web Developer อยู่รึเปล่าครับ?
ทักเข้ามาพูดคุยกันได้เลย ผมพร้อมรับฟัง Requirement และช่วยสร้าง Solution ที่คุณนำไปต่อยอดใช้งานได้จริงในเวลาไม่นานครับ

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

วิธีการให้ git จดจำ password โดยไม่ต้องระบุใหม่ทุกครั้ง
6 มีนาคม 2564
วิธีการให้ git จดจำ password โดยไม่ต้องระบุใหม่ทุกครั้ง
วิธีการเช็ค Detect Browser ผู้ใช้จาก Laravel
6 มีนาคม 2564
วิธีการเช็ค Detect Browser ผู้ใช้จาก Laravel
ระบบแบบทดสอบประเมินบุคลิกภาพ
6 มีนาคม 2564
ระบบแบบทดสอบประเมินบุคลิกภาพ