ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 3,527 ครั้ง
สีต่างๆ ในโค้ด HTML และ CSS นั้น จะระบุด้วยโค้ดเลขฐานสิบหก (hexadecimal code) ถ้าจะสร้างหน้าเว็บหรือโปรเจ็คต์ HTML อื่นๆ แล้วอยากใส่องค์ประกอบที่ตรงกับบางสีในรูปภาพ เว็บไซต์ หรือหน้าต่างไหนในคอม ก็ต้องหา hex code ของสีนั้นซะก่อน บทความวิกิฮาวนี้จะแนะนำวิธีการใช้ tools ฟรีต่างๆ ระบุ hex code ของสีให้คุณเอง
ขั้นตอน
เปิด Digital Color Meter ใน Mac. เป็น tool ที่ติดมากับ macOS แต่แรก ใช้หาค่าสีของสีต่างๆ ในหน้าจอ[1] ให้เปิด Finder ดับเบิลคลิกโฟลเดอร์ Applications ดับเบิลคลิกโฟลเดอร์ Utilities แล้วดับเบิลคลิก Digital Color Meter เพื่อเปิด
ย้ายเคอร์เซอร์ไปจ่อสีที่ต้องการโค้ด. พอขยับเมาส์ ค่าสีใน tool จะเปลี่ยนไปเดี๋ยวนั้นเลย ระวังอย่าขยับเมาส์ออกไปจากจุดนั้น จนกว่าจะล็อคค่าทั้ง aperture (รูรับแสง) แนวตั้งและแนวนอน- คุณใช้ tool นี้หาค่าสีในเว็บได้ด้วย แค่เปิด Safari (หรือเบราว์เซอร์ที่ถนัด) แล้วเข้าเว็บที่มีสีที่ต้องการ
กด ⌘ Command+L. เพื่อล็อค aperture ทั้งแนวตั้งและแนวนอน เท่านี้ค่าสีก็จะไม่เปลี่ยน แม้ขยับเมาส์
กด ⇧ Shift+⌘ Command+C เพื่อ copy hex code ลง clipboard. หรือ copy hex code โดยคลิกเมนู Color แล้วเลือก Copy Color as Text
กด ⌘ Command+V เพื่อ paste โค้ดที่ copy มา. คุณ paste ใส่โค้ด HTML ไฟล์ text หรือช่องสำหรับพิมพ์ได้โดยตรง
กด ⌘ Command+L เพื่อปลดล็อค aperture. ถ้าจะหาโค้ดสีอื่น ให้ปลดล็อคก่อน เวลาขยับเคอร์เซอร์ ค่าสีจะได้เปลี่ยนตามอีกครั้งโฆษณา
ติดตั้ง Color Cop. Color Cop เป็น utility ฟรีขนาดเล็ก ใช้หา hex code ของสีในหน้าจอได้รวดเร็วทันใจ ต่อไปนี้เป็นขั้นตอนการดาวน์โหลดแอพ- เข้าเว็บ http://colorcop.net/download ในเบราว์เซอร์
- คลิก colorcop-setup.exe ใน "self-installing" ถ้าไฟล์ไม่ดาวน์โหลดอัตโนมัติ ให้คลิก Save หรือ OK เพื่อเริ่มดาวน์โหลด
- ดับเบิลคลิกไฟล์ที่ดาวน์โหลดมา (ในโฟลเดอร์ Downloads ส่วนใหญ่จะอยู่มุมซ้ายล่างของ tab เบราว์เซอร์)
- ติดตั้งแอพไปตามขั้นตอนในหน้าจอ
เปิด Color Cop. ปกติจะอยู่ในเมนู Start
ลากไอคอน eyedropper (ที่หยดสี) ไปยังสีที่จะหาโค้ด. คุณหาโค้ดของสีในหน้าจอได้ทุกสี รวมถึงในแอพและเว็บไซต์ต่างๆ ด้วย
ปล่อยปุ่มที่เมาส์ แล้วจะเห็น hex code. โค้ดจะโผล่มาในช่องว่าง ตรงกลางแอพ
ดับเบิลคลิก hex code แล้วกด Ctrl+C. เพื่อ copy hex code ลง clipboard
paste โค้ดในตำแหน่งที่ต้องการ. คุณกด Ctrl + V เพื่อ paste hex code ตรงไหนก็ได้ตามต้องการ เช่น ในโค้ด HTML หรือ CSSโฆษณา
เข้าเว็บ https://imagecolorpicker.com ในคอม มือถือ หรือแท็บเล็ต. คุณใช้ tool ฟรีนี้ หา hex code ของสีไหนก็ได้ในรูปที่อัพโหลด วิธีนี้ใช้ได้กับทุกเบราว์เซอร์ รวมถึงใน Android, iPhone และ iPad
อัพโหลดรูปหรือใส่ URL. ต้องเลือกว่าจะอัพโหลดรูปเอง หรือใช้รูป/เว็บที่มีในเน็ต ไม่ว่าวิธีไหน ก็จะแสดงรูปหรือเว็บนั้นขึ้นมา ให้คุณเลือกสีที่ต้องการ- ถ้าจะอัพโหลดรูป ให้เลื่อนลงไปเลือก 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
คลิกหรือแตะสีที่ต้องการ ในตัวอย่างรูป/เว็บ. จะเห็น hex code ของสี โผล่มามุมซ้ายล่างของหน้าจอ
คลิกหรือแตะไอคอน copy เพื่อ copy hex code ลง clipboard. ไอคอนจะเป็นสี่เหลี่ยม 2 อันซ้อนเหลื่อมกัน อยู่ทางขวาของ hex code พอ copy แล้วก็เอาโค้ดไป paste ในไฟล์ text หรือช่องพิมพ์ได้เลยโฆษณา
เปิด Firefox ใน PC หรือ Mac. เบราว์เซอร์ Firefox จะมาพร้อม Eyedropper tool ฟรี ใช้ระบุ hex code ของสีต่างๆ ในเว็บ ถ้าคุณมี Firefox ปกติจะอยู่ในเมนู Start (Windows) หรือในโฟลเดอร์ Applications (macOS)- คุณดาวน์โหลด Firefox ได้ฟรีที่ https://www.mozilla.org/en-US/firefox
- Firefox จะบอกแค่ค่าสีในเว็บ แต่ใช้นอกเบราว์เซอร์ไม่ได้
เข้าเว็บที่มีสีที่อยากได้โค้ด. เช็คว่าวัตถุที่อยากเช็คโค้ดสีนั้นอยู่ในหน้าจอ
คลิกเมนู ☰. ที่เป็นเส้นนอน 3 เส้น มุมขวาบนของ Firefox
คลิกเมนู Web Developer. เพื่อขยายอีกเมนู
คลิก Eyedropper. เคอร์เซอร์ของเมาส์จะกลายเป็นวงกลมขนาดใหญ่
คลิกสีที่อยากได้โค้ด. จะเห็นค่า hex ของสีที่เปลี่ยนไประหว่างขยับเมาส์ พอคลิกเมาส์ Firefox จะเซฟ hex code ลง clipboard
paste โค้ดในตำแหน่งที่ต้องการ. ให้กด Control + V (PC) หรือ Command + V (Mac) เพื่อ paste hex code ใน HTML, CSS หรือไฟล์ text อื่นๆโฆษณา
เคล็ดลับ
- มีหลายเว็บ หลาย extensions ของเบราว์เซอร์ และหลายโปรแกรมตัดต่อรูป ที่มี color picker หรือที่ดูดสีให้ใช้เช็ค hex code ของเฉดสีนั้นได้เลย
- ถ้าเจอเว็บไหนมีสีตรงตามต้องการ แล้วพอจะรู้จักกับผู้พัฒนาเว็บนั้น ก็สอบถาม hex code ที่เขาใช้ได้เลย หรือลงลึกไปดู source code ของเว็บ ก็จะเจอ hex code ที่ต้องการ
โฆษณา
เกี่ยวกับวิกิฮาวนี้
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 3,527 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 3,527 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 3,527 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
