สีจะถูกระบุใน HTML และ CSS ด้วยรหัสฐานสิบหก หากคุณกำลังสร้างหน้าเว็บหรือโครงการ HTML อื่นๆ และต้องการรวมองค์ประกอบที่ตรงกับสีเฉพาะในภาพ เว็บไซต์ หรือหน้าต่างบนหน้าจอคอมพิวเตอร์ของคุณ คุณจะต้องค้นหารหัสฐานสิบหกของสี บทความวิกิฮาวนี้จะแนะนำวิธีการใช้เครื่องมือฟรีต่างๆ เพื่อระบุรหัสฐานสิบหกของสีต่างๆ ได้อย่างรวดเร็ว
ขั้นตอน
วิธีที่ 1 จาก 4: การใช้ Digital Color Meter บน Mac
ขั้นตอนที่ 1. เปิด Digital Color Meter บน Mac ของคุณ
เครื่องมือนี้ซึ่งมาพร้อมกับ macOS สามารถระบุค่าสีของสีใดก็ได้บนหน้าจอ เปิด Finder ดับเบิลคลิกที่ แอปพลิเคชั่น โฟลเดอร์ ให้ดับเบิลคลิกที่ สาธารณูปโภค โฟลเดอร์ แล้วดับเบิลคลิก เครื่องวัดสีดิจิตอล เพื่อเปิด
ขั้นตอนที่ 2 เลื่อนเคอร์เซอร์ของเมาส์ไปที่สีที่คุณต้องการระบุ
เมื่อคุณเลื่อนเมาส์ ค่าในเครื่องมือจะอัปเดตตามเวลาจริง อย่าเลื่อนเมาส์ออกจากตำแหน่งนี้จนกว่าคุณจะล็อครูรับแสงทั้งแนวนอนและแนวตั้ง
คุณสามารถใช้เครื่องมือนี้เพื่อระบุสีบนเว็บได้เช่นกัน เพียงเปิด Safari (หรือเบราว์เซอร์ที่คุณต้องการ) และไปที่เว็บไซต์ที่มีสีที่คุณต้องการระบุ
ขั้นตอนที่ 3 กด ⌘ Command+L
ซึ่งจะล็อครูรับแสงทั้งแนวนอนและแนวตั้ง ซึ่งหมายความว่าค่าสีจะไม่เปลี่ยนแปลงเมื่อคุณเลื่อนเมาส์
ขั้นตอนที่ 4. กด ⇧ Shift+⌘ Command+C เพื่อคัดลอกรหัสฐานสิบหกไปยังคลิปบอร์ด
คุณยังสามารถคัดลอกรหัสฐานสิบหกได้โดยคลิกที่ สี เมนูและเลือก คัดลอกสีเป็นข้อความ.
ขั้นตอนที่ 5. กด ⌘ Command+V เพื่อวางโค้ดที่คัดลอก
คุณสามารถวางลงในโค้ด HTML ไฟล์ข้อความ หรือพื้นที่พิมพ์อื่นๆ ได้โดยตรง
ขั้นตอนที่ 6. กด ⌘ Command+L เพื่อปลดล็อกรูรับแสง
หากคุณต้องการระบุสีอื่น การดำเนินการนี้จะปลดล็อคเพื่อให้เคอร์เซอร์ทำหน้าที่เป็นตัวระบุค่าสีอีกครั้ง
วิธีที่ 2 จาก 4: การใช้ Color Cop สำหรับ Windows
ขั้นตอนที่ 1. ติดตั้ง Color Cop
Color Cop เป็นยูทิลิตี้ขนาดเล็กฟรีที่คุณสามารถใช้เพื่อระบุรหัสฐานสิบหกของสีใดๆ บนหน้าจอได้อย่างรวดเร็ว วิธีรับแอปมีดังนี้
- ไปที่ https://colorcop.net/download ในเว็บเบราว์เซอร์
- คลิก colorcop-setup.exe ภายใต้ "การติดตั้งด้วยตนเอง" หากไฟล์ไม่ดาวน์โหลดโดยอัตโนมัติ ให้คลิก บันทึก หรือ ตกลง เพื่อเริ่มการดาวน์โหลด
- ดับเบิลคลิกไฟล์ที่ดาวน์โหลดมา (อยู่ในไฟล์ ดาวน์โหลด โฟลเดอร์ และมักจะอยู่ที่มุมล่างซ้ายของแท็บเบราว์เซอร์)
- ทำตามคำแนะนำบนหน้าจอเพื่อติดตั้งแอปพลิเคชัน
ขั้นตอนที่ 2 เปิด Color Cop
คุณจะพบมันในเมนูเริ่มของคุณ
ขั้นตอนที่ 3 ลากไอคอน eyedropper ไปยังสีที่คุณต้องการระบุ
คุณสามารถระบุสีใดๆ บนหน้าจอ รวมทั้งสีในแอปพลิเคชันอื่นๆ และบนเว็บไซต์
ขั้นตอนที่ 4 ปล่อยปุ่มเมาส์เพื่อแสดงรหัสฐานสิบหก
รหัสจะปรากฏในช่องว่างตรงกลางของแอปพลิเคชัน
ขั้นตอนที่ 5. ดับเบิลคลิกที่รหัสฐานสิบหกแล้วกด Ctrl+C
สิ่งนี้จะคัดลอกรหัสฐานสิบหกไปยังคลิปบอร์ดของคุณ
ขั้นตอนที่ 6 วางรหัสในตำแหน่งที่คุณต้องการ
คุณสามารถใช้ได้ Ctrl + V เพื่อวางรหัสฐานสิบหกได้ทุกที่ที่คุณต้องการ เช่น ในโค้ด HTML หรือ CSS
วิธีที่ 3 จาก 4: การใช้ Imagecolorpicker.com
ขั้นตอนที่ 1. ไปที่ https://imagecolorpicker.com บนคอมพิวเตอร์ โทรศัพท์ หรือแท็บเล็ตของคุณ
คุณสามารถใช้เครื่องมือฟรีนี้เพื่อระบุรหัสฐานสิบหกของสีใดก็ได้ในรูปภาพที่อัปโหลด วิธีนี้จะใช้ได้กับทุกเว็บเบราว์เซอร์ รวมถึงใน Android, iPhone หรือ iPad
ขั้นตอนที่ 2 อัปโหลดรูปภาพหรือป้อน URL
คุณจะต้องตัดสินใจว่าคุณต้องการอัปโหลดภาพของคุณเองหรือใช้ภาพหรือเว็บไซต์ออนไลน์อยู่แล้ว ทั้งสองวิธีสามารถใช้เพื่อแสดงรูปภาพหรือหน้าเว็บเพื่อให้คุณเลือกสีที่ต้องการได้
- ในการอัปโหลดรูปภาพ ให้เลื่อนลงและเลือก อัพโหลดภาพของคุณ ไปที่รูปภาพในคอมพิวเตอร์ โทรศัพท์ หรือแท็บเล็ต แล้วเลือกตัวเลือกเพื่ออัปโหลด
- หากต้องการใช้เว็บไซต์ ให้เลื่อนลงไปที่ตัวเลือก "ใช้ช่องนี้เพื่อรับรหัสสี HTML จากเว็บไซต์" ป้อน URL แล้วคลิกหรือแตะ ทำเว็บไซต์.
- หากต้องการเลือกรูปภาพโดยตรงบนเว็บแทนที่จะเป็นทั้งเว็บไซต์ ให้ป้อน URL ของรูปภาพลงในช่อง "ใช้ช่องนี้เพื่อรับโค้ดสี HTML จากรูปภาพผ่าน URL นี้" จากนั้นคลิกหรือแตะ ถ่ายรูป.
ขั้นตอนที่ 3 คลิกหรือแตะสีที่คุณต้องการภายในภาพตัวอย่าง/ไซต์
ซึ่งจะแสดงรหัสฐานสิบหกสีที่มุมล่างซ้ายของหน้าจอ
ขั้นตอนที่ 4 คลิกหรือกดเลือกไอคอนคัดลอกเพื่อคัดลอกรหัสฐานสิบหกไปยังคลิปบอร์ดของคุณ
มันคือสี่เหลี่ยมสองช่องที่ทับซ้อนกันทางขวาของรหัสฐานสิบหก จากนั้นคุณสามารถวางลงในไฟล์ข้อความหรือพื้นที่พิมพ์ได้
วิธีที่ 4 จาก 4: การใช้ Firefox (สำหรับสีบนเว็บ)
ขั้นตอนที่ 1 เปิด Firefox บนพีซีหรือ Mac ของคุณ
เว็บเบราว์เซอร์ Firefox มาพร้อมกับเครื่องมือ Eyedropper ฟรีที่คุณสามารถใช้เพื่อระบุรหัสฐานสิบหกของสีใดก็ได้บนเว็บ หากคุณมี Firefox คุณจะพบได้ในเมนู Start (Windows) หรือในโฟลเดอร์ Applications (macOS)
- คุณสามารถดาวน์โหลด Firefox ได้ฟรีที่
- Firefox จะบอกคุณค่าของสีบนเว็บไซต์เท่านั้น คุณไม่สามารถใช้งานนอกเบราว์เซอร์ได้
ขั้นตอนที่ 2 ไปที่เว็บไซต์ที่มีสีที่คุณต้องการระบุ
ตรวจสอบให้แน่ใจว่าองค์ประกอบที่คุณต้องการสำหรับสีนั้นอยู่ในมุมมอง
ขั้นตอนที่ 3 คลิกเมนู ☰
ที่เป็นเส้นแนวนอน 3 เส้นตรงมุมขวาบนของ Firefox
ขั้นตอนที่ 4 คลิกเมนู Web Developer
เมนูอื่นจะขยาย
ขั้นตอนที่ 5. คลิก Eyedropper
เคอร์เซอร์ของเมาส์จะเปลี่ยนเป็นวงกลมขนาดใหญ่
ขั้นตอนที่ 6. คลิกสีที่คุณต้องการระบุ
คุณจะสังเกตเห็นค่าฐานสิบหกของสีที่อัปเดตสดเมื่อคุณเลื่อนเมาส์ไปยังตำแหน่ง เมื่อคุณคลิกเมาส์ Firefox จะบันทึกรหัสฐานสิบหกลงในคลิปบอร์ดของคุณ
ขั้นตอนที่ 7 วางรหัสในตำแหน่งที่คุณต้องการ
คุณสามารถใช้ได้ ควบคุม + V (พีซี) หรือ คำสั่ง + V (Mac) เพื่อวางโค้ดฐานสิบหกลงใน HTML, CSS หรือไฟล์ข้อความประเภทอื่นๆ
เคล็ดลับ
- มีเว็บไซต์ ส่วนขยายของเบราว์เซอร์ และโปรแกรมแก้ไขรูปภาพอื่นๆ ที่จะช่วยให้คุณใช้เครื่องมือเลือกสีเพื่อแสดงรหัสฐานสิบหกของสีได้เช่นกัน
- หากคุณรู้ว่าใครเป็นผู้สร้างหน้าเว็บด้วยสีที่คุณพยายามจะจับคู่ คุณสามารถถามพวกเขาได้เสมอว่าพวกเขาใช้รหัสฐานสิบหกอะไร หรือคุณสามารถขุดในซอร์สโค้ดของเว็บไซต์เพื่อค้นหารหัสฐานสิบหกที่แสดงอยู่ที่นั่น