ดาวน์โหลดบทความ ดาวน์โหลดบทความ

สีต่างๆ ในโค้ด HTML และ CSS นั้น จะระบุด้วยโค้ดเลขฐานสิบหก (hexadecimal code) ถ้าจะสร้างหน้าเว็บหรือโปรเจ็คต์ HTML อื่นๆ แล้วอยากใส่องค์ประกอบที่ตรงกับบางสีในรูปภาพ เว็บไซต์ หรือหน้าต่างไหนในคอม ก็ต้องหา hex code ของสีนั้นซะก่อน บทความวิกิฮาวนี้จะแนะนำวิธีการใช้ tools ฟรีต่างๆ ระบุ hex code ของสีให้คุณเอง

วิธีการ 1
วิธีการ 1 ของ 4:

ใช้ Digital Color Meter ใน Mac

ดาวน์โหลดบทความ
  1. เป็น tool ที่ติดมากับ macOS แต่แรก ใช้หาค่าสีของสีต่างๆ ในหน้าจอ [1] ให้เปิด Finder ดับเบิลคลิกโฟลเดอร์ Applications ดับเบิลคลิกโฟลเดอร์ Utilities แล้วดับเบิลคลิก Digital Color Meter เพื่อเปิด
  2. พอขยับเมาส์ ค่าสีใน tool จะเปลี่ยนไปเดี๋ยวนั้นเลย ระวังอย่าขยับเมาส์ออกไปจากจุดนั้น จนกว่าจะล็อคค่าทั้ง aperture (รูรับแสง) แนวตั้งและแนวนอน
    • คุณใช้ tool นี้หาค่าสีในเว็บได้ด้วย แค่เปิด Safari (หรือเบราว์เซอร์ที่ถนัด) แล้วเข้าเว็บที่มีสีที่ต้องการ
  3. เพื่อล็อค aperture ทั้งแนวตั้งและแนวนอน เท่านี้ค่าสีก็จะไม่เปลี่ยน แม้ขยับเมาส์
  4. หรือ copy hex code โดยคลิกเมนู Color แล้วเลือก Copy Color as Text
  5. คุณ paste ใส่โค้ด HTML ไฟล์ text หรือช่องสำหรับพิมพ์ได้โดยตรง
  6. ถ้าจะหาโค้ดสีอื่น ให้ปลดล็อคก่อน เวลาขยับเคอร์เซอร์ ค่าสีจะได้เปลี่ยนตามอีกครั้ง
    โฆษณา
วิธีการ 2
วิธีการ 2 ของ 4:

ใช้ Color Cop ใน Windows

ดาวน์โหลดบทความ
  1. Color Cop เป็น utility ฟรีขนาดเล็ก ใช้หา hex code ของสีในหน้าจอได้รวดเร็วทันใจ ต่อไปนี้เป็นขั้นตอนการดาวน์โหลดแอพ
    • เข้าเว็บ http://colorcop.net/download ในเบราว์เซอร์
    • คลิก colorcop-setup.exe ใน "self-installing" ถ้าไฟล์ไม่ดาวน์โหลดอัตโนมัติ ให้คลิก Save หรือ OK เพื่อเริ่มดาวน์โหลด
    • ดับเบิลคลิกไฟล์ที่ดาวน์โหลดมา (ในโฟลเดอร์ Downloads ส่วนใหญ่จะอยู่มุมซ้ายล่างของ tab เบราว์เซอร์)
    • ติดตั้งแอพไปตามขั้นตอนในหน้าจอ
  2. ปกติจะอยู่ในเมนู Start
  3. คุณหาโค้ดของสีในหน้าจอได้ทุกสี รวมถึงในแอพและเว็บไซต์ต่างๆ ด้วย
  4. โค้ดจะโผล่มาในช่องว่าง ตรงกลางแอพ
  5. เพื่อ copy hex code ลง clipboard
  6. คุณกด Ctrl + V เพื่อ paste hex code ตรงไหนก็ได้ตามต้องการ เช่น ในโค้ด HTML หรือ CSS
    โฆษณา
วิธีการ 3
วิธีการ 3 ของ 4:

ใช้เว็บ Imagecolorpicker.com

ดาวน์โหลดบทความ
  1. เข้าเว็บ https://imagecolorpicker.com ในคอม มือถือ หรือแท็บเล็ต. คุณใช้ tool ฟรีนี้ หา hex code ของสีไหนก็ได้ในรูปที่อัพโหลด วิธีนี้ใช้ได้กับทุกเบราว์เซอร์ รวมถึงใน Android, iPhone และ iPad
  2. ต้องเลือกว่าจะอัพโหลดรูปเอง หรือใช้รูป/เว็บที่มีในเน็ต ไม่ว่าวิธีไหน ก็จะแสดงรูปหรือเว็บนั้นขึ้นมา ให้คุณเลือกสีที่ต้องการ
    • ถ้าจะอัพโหลดรูป ให้เลื่อนลงไปเลือก Upload your image ไปยังรูปในคอม มือถือ หรือแท็บเล็ต แล้วเลือกตัวเลือกในการอัพโหลด
    • ถ้าจะใช้เว็บ ให้เลื่อนลงไปที่ตัวเลือก "Use this box to get the HTML color code from a website" ใส่ URL แล้วคลิกหรือแตะ Take website
    • ถ้าจะเลือกรูปในเว็บโดยตรง แทนทั้งเว็บ ให้ใส่ URL ของรูปนั้น ในช่อง "Use this box to get the HTML color code from a picture via this URL" แล้วคลิกหรือแตะ Take image
  3. จะเห็น hex code ของสี โผล่มามุมซ้ายล่างของหน้าจอ
  4. ไอคอนจะเป็นสี่เหลี่ยม 2 อันซ้อนเหลื่อมกัน อยู่ทางขวาของ hex code พอ copy แล้วก็เอาโค้ดไป paste ในไฟล์ text หรือช่องพิมพ์ได้เลย
    โฆษณา
วิธีการ 4
วิธีการ 4 ของ 4:

ใช้ Firefox (หาโค้ดของสีในเว็บ)

ดาวน์โหลดบทความ
  1. เบราว์เซอร์ Firefox จะมาพร้อม Eyedropper tool ฟรี ใช้ระบุ hex code ของสีต่างๆ ในเว็บ ถ้าคุณมี Firefox ปกติจะอยู่ในเมนู Start (Windows) หรือในโฟลเดอร์ Applications (macOS)
    • คุณดาวน์โหลด Firefox ได้ฟรีที่ https://www.mozilla.org/en-US/firefox
    • Firefox จะบอกแค่ค่าสีในเว็บ แต่ใช้นอกเบราว์เซอร์ไม่ได้
  2. เช็คว่าวัตถุที่อยากเช็คโค้ดสีนั้นอยู่ในหน้าจอ
  3. ที่เป็นเส้นนอน 3 เส้น มุมขวาบนของ Firefox
  4. เพื่อขยายอีกเมนู
  5. เคอร์เซอร์ของเมาส์จะกลายเป็นวงกลมขนาดใหญ่
  6. จะเห็นค่า hex ของสีที่เปลี่ยนไประหว่างขยับเมาส์ พอคลิกเมาส์ Firefox จะเซฟ hex code ลง clipboard
  7. ให้กด Control + V (PC) หรือ Command + V (Mac) เพื่อ paste hex code ใน HTML, CSS หรือไฟล์ text อื่นๆ
    โฆษณา

เคล็ดลับ

  • มีหลายเว็บ หลาย extensions ของเบราว์เซอร์ และหลายโปรแกรมตัดต่อรูป ที่มี color picker หรือที่ดูดสีให้ใช้เช็ค hex code ของเฉดสีนั้นได้เลย
  • ถ้าเจอเว็บไหนมีสีตรงตามต้องการ แล้วพอจะรู้จักกับผู้พัฒนาเว็บนั้น ก็สอบถาม hex code ที่เขาใช้ได้เลย หรือลงลึกไปดู source code ของเว็บ ก็จะเจอ hex code ที่ต้องการ
โฆษณา

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
แก้ปัญหาเข้าบางเว็บไม่ได้
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
ดูว่าใครแชร์โพสต์ของคุณบนเฟซบุ๊ก
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
เช็คตำแหน่งปัจจุบันใน Google Maps
รู้ความหมายของอีโมจิรูปหัวใจสีดำ
ตั้งชื่ออีเมลให้โดนใจ
เชื่อมต่ออินเทอร์เน็ตในคอมพิวเตอร์ Windows
เว้นวรรคห่างๆ ใน HTML
หาละติจูดกับลองจิจูดใน Google Maps
เปิดใช้งานคุกกี้ในเว็บเบราว์เซอร์อินเตอร์เน็ตของคุณ
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
หา URL ของเว็บไซต์
โฆษณา

เกี่ยวกับวิกิฮาวนี้

มีการเข้าถึงหน้านี้ 3,585 ครั้ง

บทความนี้เป็นประโยชน์กับคุณไหม

โฆษณา