ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
สีต่างๆ ในโค้ด HTML และ CSS นั้น จะระบุด้วยโค้ดเลขฐานสิบหก (hexadecimal code) ถ้าจะสร้างหน้าเว็บหรือโปรเจ็คต์ HTML อื่นๆ แล้วอยากใส่องค์ประกอบที่ตรงกับบางสีในรูปภาพ เว็บไซต์ หรือหน้าต่างไหนในคอม ก็ต้องหา hex code ของสีนั้นซะก่อน บทความวิกิฮาวนี้จะแนะนำวิธีการใช้ tools ฟรีต่างๆ ระบุ hex code ของสีให้คุณเอง
ขั้นตอน
-
เปิด Digital Color Meter ใน Mac. เป็น tool ที่ติดมากับ macOS แต่แรก ใช้หาค่าสีของสีต่างๆ ในหน้าจอ [1] X แหล่งข้อมูลอ้างอิง ให้เปิด 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 ที่ต้องการ
โฆษณา
โฆษณา