Wiki

วิธีการ หา Hex Code ของสีในหน้าจอคอมพิวเตอร์


ขั้นตอน


1 ของ 4:

ใช้ Digital Color Meter ใน Mac

1
เปิด Digital Color Meter ใน Mac. เป็น tool ที่ติดมากับ macOS แต่แรก ใช้หาค่าสีของสีต่างๆ ในหน้าจอ ให้เปิด Finder ดับเบิลคลิกโฟลเดอร์ Applications ดับเบิลคลิกโฟลเดอร์ Utilities แล้วดับเบิลคลิก Digital Color Meter เพื่อเปิด

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 2

2
ย้ายเคอร์เซอร์ไปจ่อสีที่ต้องการโค้ด. พอขยับเมาส์ ค่าสีใน tool จะเปลี่ยนไปเดี๋ยวนั้นเลย ระวังอย่าขยับเมาส์ออกไปจากจุดนั้น จนกว่าจะล็อคค่าทั้ง aperture (รูรับแสง) แนวตั้งและแนวนอน

  • คุณใช้ tool นี้หาค่าสีในเว็บได้ด้วย แค่เปิด Safari (หรือเบราว์เซอร์ที่ถนัด) แล้วเข้าเว็บที่มีสีที่ต้องการ

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 3

3
กด ⌘ Command+L. เพื่อล็อค aperture ทั้งแนวตั้งและแนวนอน เท่านี้ค่าสีก็จะไม่เปลี่ยน แม้ขยับเมาส์

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 4

4
กด ⇧ Shift+⌘ Command+C เพื่อ copy hex code ลง clipboard. หรือ copy hex code โดยคลิกเมนู Color แล้วเลือก Copy Color as Text

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 5

5
กด ⌘ Command+V เพื่อ paste โค้ดที่ copy มา. คุณ paste ใส่โค้ด HTML ไฟล์ text หรือช่องสำหรับพิมพ์ได้โดยตรง

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 6

6
กด ⌘ Command+L เพื่อปลดล็อค aperture. ถ้าจะหาโค้ดสีอื่น ให้ปลดล็อคก่อน เวลาขยับเคอร์เซอร์ ค่าสีจะได้เปลี่ยนตามอีกครั้ง


2 ของ 4:

ใช้ Color Cop ใน Windows

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 7

1
ติดตั้ง Color Cop. Color Cop เป็น utility ฟรีขนาดเล็ก ใช้หา hex code ของสีในหน้าจอได้รวดเร็วทันใจ ต่อไปนี้เป็นขั้นตอนการดาวน์โหลดแอพ

  • เข้าเว็บ http://colorcop.net/download ในเบราว์เซอร์
  • คลิก colorcop-setup.exe ใน “self-installing” ถ้าไฟล์ไม่ดาวน์โหลดอัตโนมัติ ให้คลิก Save หรือ OK เพื่อเริ่มดาวน์โหลด
  • ดับเบิลคลิกไฟล์ที่ดาวน์โหลดมา (ในโฟลเดอร์ Downloads ส่วนใหญ่จะอยู่มุมซ้ายล่างของ tab เบราว์เซอร์)
  • ติดตั้งแอพไปตามขั้นตอนในหน้าจอ

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 8

2
เปิด Color Cop. ปกติจะอยู่ในเมนู Start

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 9

3
ลากไอคอน eyedropper (ที่หยดสี) ไปยังสีที่จะหาโค้ด. คุณหาโค้ดของสีในหน้าจอได้ทุกสี รวมถึงในแอพและเว็บไซต์ต่างๆ ด้วย

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 10

4
ปล่อยปุ่มที่เมาส์ แล้วจะเห็น hex code. โค้ดจะโผล่มาในช่องว่าง ตรงกลางแอพ

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 11

5
ดับเบิลคลิก hex code แล้วกด Ctrl+C. เพื่อ copy hex code ลง clipboard

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 12

6
paste โค้ดในตำแหน่งที่ต้องการ. คุณกด Ctrl + V เพื่อ paste hex code ตรงไหนก็ได้ตามต้องการ เช่น ในโค้ด HTML หรือ CSS


3 ของ 4:

ใช้เว็บ Imagecolorpicker.com

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 13

1
เข้าเว็บ https://imagecolorpicker.com ในคอม มือถือ หรือแท็บเล็ต. คุณใช้ tool ฟรีนี้ หา hex code ของสีไหนก็ได้ในรูปที่อัพโหลด วิธีนี้ใช้ได้กับทุกเบราว์เซอร์ รวมถึงใน Android, iPhone และ iPad

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 14

2
อัพโหลดรูปหรือใส่ 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

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 15

3
คลิกหรือแตะสีที่ต้องการ ในตัวอย่างรูป/เว็บ. จะเห็น hex code ของสี โผล่มามุมซ้ายล่างของหน้าจอ

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 16

4
คลิกหรือแตะไอคอน copy เพื่อ copy hex code ลง clipboard. ไอคอนจะเป็นสี่เหลี่ยม 2 อันซ้อนเหลื่อมกัน อยู่ทางขวาของ hex code พอ copy แล้วก็เอาโค้ดไป paste ในไฟล์ text หรือช่องพิมพ์ได้เลย


4 ของ 4:

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

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 17

1
เปิด Firefox ใน PC หรือ Mac. เบราว์เซอร์ Firefox จะมาพร้อม Eyedropper tool ฟรี ใช้ระบุ hex code ของสีต่างๆ ในเว็บ ถ้าคุณมี Firefox ปกติจะอยู่ในเมนู Start (Windows) หรือในโฟลเดอร์ Applications (macOS)

  • คุณดาวน์โหลด Firefox ได้ฟรีที่ https://www.mozilla.org/en-US/firefox
  • Firefox จะบอกแค่ค่าสีในเว็บ แต่ใช้นอกเบราว์เซอร์ไม่ได้

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 18

2
เข้าเว็บที่มีสีที่อยากได้โค้ด. เช็คว่าวัตถุที่อยากเช็คโค้ดสีนั้นอยู่ในหน้าจอ

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 19

3
คลิกเมนู . ที่เป็นเส้นนอน 3 เส้น มุมขวาบนของ Firefox

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 20

4
คลิกเมนู Web Developer. เพื่อขยายอีกเมนู

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 21

5
คลิก Eyedropper. เคอร์เซอร์ของเมาส์จะกลายเป็นวงกลมขนาดใหญ่

ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 22

6
คลิกสีที่อยากได้โค้ด. จะเห็นค่า hex ของสีที่เปลี่ยนไประหว่างขยับเมาส์ พอคลิกเมาส์ Firefox จะเซฟ hex code ลง clipboard

  • ตั้งชื่อภาพ Get the Hex Code of a Color on Your Computer Screen Step 23

    7
    paste โค้ดในตำแหน่งที่ต้องการ. ให้กด Control + V (PC) หรือ Command + V (Mac) เพื่อ paste hex code ใน HTML, CSS หรือไฟล์ text อื่นๆ


  • เคล็ดลับ

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

    Vozz

    บล็อกที่เชี่ยวชาญด้านข่าวการเงิน หลักทรัพย์ ฟอเร็กซ์ สกุลเงินเสมือน bitcoin

    Trả lời

    Email của bạn sẽ không được hiển thị công khai.

    Back to top button