<div><span style="font-size: 15px; font-weight: 300;">เวลาเพื่อนๆ เจอสีที่ถูกใจตามเว็บ หรือ รูปภาพต่างๆ บนคอมพิวเตอร์ แต่ไม่รู้ว่าจะหาโค้ดสี (Color Code) ได้อย่างไร วันนี้เราจะมาแนะนำเครื่องมือเช็คโค้ดสี ได้ทั้งรูปแบบ Hex Color และ RGB Color บันทึกรายชื่อสี เก็บไปใช้งานต่อได้สบายๆ ทั้งบนระบบ Windows และ macOS ได้เลย ส่วนวิธีทำจะเป็นยังไงนั้น มาดูกันเลย</span></div>
<div>
<div class="detail">

<hr />

สำหรับคนที่ใช้ระบบปฏิบัติการ Windows สามารถดาวน์โหลดโปรแกรม Digital Color Meter ได้ที่ปุ่มดาวน์โหลดด้านล่างนี้เลยครับ ใช้งานได้ทันทีโดยไม่ต้องติดตั้ง

*โปรแกรมนี้เป็นโปรแกรม Alternative บน Windows ที่ออกแบบมาให้ใช้งานได้คล้ายๆ Digital Color Meter บนระบบ macOS ครับ

<a class="simple-button-plugin" href="https://software.thaiware.com/13598-Digital-Color-Meter-Download.html" target="_blank" rel="noopener">ดาวน์โหลด</a>
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slides">
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072817u4_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="1363x856" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072817u4_67.png" /></div>
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072821JC_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="2880x1800" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072821JC_67.png" /></div>
</div>
<div class="thumbwrapper">
<div>
<div class="jssort01">
<div>
<div class="jssort01">
<div></div>
<div>
<div></div>
<div>
<div class="p pav">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072817u4_67.png" /></div>
</div>
</div>
<div>
<div class="p">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072821JC_67.png" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
<div></div>
หลังจากดาวน์โหลดเสร็จแล้ว ก็เปิดโปรแกรมขึ้นมา หากต้องการดูดโค้ดสีตรงส่วนไหน ก็สามารถลากเมาส์ไปส่วนที่เราต้องการบนหน้าจอได้เลยทันที ถ้าต้องการบันทึกโค้ดที่แสดงตรงจุดนั้นให้กดปุ่ม Spacebar เพื่อบันทึกลงโปรแกรม

<a class="image-zoomable" href="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_1712220859174s_67.png" target="_blank" rel="noopener" data-size="836x648"><img title="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220859174s_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" /></a>

เราสามารถเลือกได้ว่าจะคัดลอกสีที่เราเลือกจากโปรแกรมในรูปแบบ RGB หรือ HEX ก็เลือกตามช่องได้เลย
<ul>
 	<li>สามารถกดปุ่ม "Ctrl+C" เพื่อคัดลอกสีที่เลือกไว้</li>
</ul>
ถ้าใครอยากบันทึกรายชื่อโค้ดสีทั้งหมดภายในครั้งเดียว
<ul>
 	<li>ก็สามารถกดปุ่ม "Ctrl+L" เพื่อคัดลอกสีทั้งหมดที่บันทึกในโปรแกรม</li>
</ul>
เสร็จแล้วก็กดปุ่ม "Ctrl+V" วางในโน้ตต่างๆ เพื่อบันทึกไว้ใช้งานภายหลัง

<hr />

ในส่วนของผู้ใช้งานระบบปฏิบัติการ macOS จะมีโปรแกรม Digital Color Meter ติดมากับตัวเครื่องอยู่แล้ว สามารถเข้าผ่าน Application รวม หรือ พิมพ์ค้นหาผ่านทาง Spotlight โดยพิมพ์คำว่า "Digital Color Meter" และเปิดโปรแกรมได้ทันที
<div></div>
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slide-page"></div>
<div class="slides"></div>
<div class="slides">
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072737HA_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="1360x860" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072737HA_67.png" /></div>
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220728050V_67.jpg" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="2880x1800" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_1712220728050V_67.jpg" /></div>
</div>
<div class="thumbwrapper">
<div>
<div class="jssort01">
<div>
<div class="jssort01">
<div></div>
<div>
<div></div>
<div>
<div class="p pav">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072737HA_67.png" /></div>
</div>
</div>
<div>
<div class="p">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220728050V_67.jpg" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
<div></div>
การใช้งานก็เหมือนกันทั้งใน Windows และ macOS โดยลากเมาส์ไปตามจุดต่างๆ ที่ต้องการ ก็จะแสดงโค้ดสีให้เห็นภายในโปรแกรม

<a class="image-zoomable" href="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222090123m3_67.png" target="_blank" rel="noopener" data-size="740x406"><img title="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222090123m3_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" /></a>

ในส่วนของ macOS นี้จะสามารถคัดลอกออกมาในรูปแบบ ข้อความ หรือ รูปภาพ ได้ โดย
<ul>
 	<li>กดปุ่ม "Command + Shift + C" จะเป็นการคัดลอกสีในจุดที่เมาส์ชี้เอาไว้ ในรูปแบบ ข้อความ</li>
 	<li>กดปุ่ม "Command + Option + C" จะเป็นการคัดลอกสีในจุดที่เมาส์ชี้เอาไว้ ในรูปแบบ รูปภาพ</li>
</ul>
เสร็จแล้วก็กดปุ่ม "Ctrl+V" วางในโน้ตต่างๆ บันทึกเก็บไว้ใช้งาน หรือ จะรวบรวมรายชื่อสีที่ชื่นชอบไว้ก็ได้

เพียงเท่านี้ เราก็สามารถบันทึกสีไว้ใช้งานร่วมกับงานอื่นๆ หรือ นำโค้ดสีไปใช้กับงานออกแบบ งานทำเว็บ CSS HTML ได้ง่ายมากยิ่งขึ้น ถือเป็นอีกหนึ่งเครื่องมือที่ช่วยเช็คโค้ดสีในระบบ Windows และ macOS ได้สะดวกจริงๆ

ที่มา :
<div>
<div>
<div>เขียนโดย : <img title="ระดับผู้ดูแล : Moderator" src="https://images.thaiware.com/member/mod_small.gif" alt="" /> <a title="nearikii" href="https://member.thaiware.com/?id=196123"><img title="nearikii" src="https://member.thaiware.com/upload_misc/member/thumb/196123_151002133410Ty.jpg" alt="" /></a> <a title="nearikii" href="https://member.thaiware.com/?id=196123">nearikii</a></div>
<div></div>
</div>
<div></div>
</div>
<div>
<div></div>
<div class="spacer"></div>
<div class="detail">

เวลาเพื่อนๆ เจอสีที่ถูกใจตามเว็บ หรือ รูปภาพต่างๆ บนคอมพิวเตอร์ แต่ไม่รู้ว่าจะหาโค้ดสี (Color Code) ได้อย่างไร วันนี้เราจะมาแนะนำเครื่องมือเช็คโค้ดสี ได้ทั้งรูปแบบ Hex Color และ RGB Color บันทึกรายชื่อสี เก็บไปใช้งานต่อได้สบายๆ ทั้งบนระบบ Windows และ macOS ได้เลย ส่วนวิธีทำจะเป็นยังไงนั้น มาดูกันเลย

<hr />

สำหรับคนที่ใช้ระบบปฏิบัติการ Windows สามารถดาวน์โหลดโปรแกรม Digital Color Meter ได้ที่ปุ่มดาวน์โหลดด้านล่างนี้เลยครับ ใช้งานได้ทันทีโดยไม่ต้องติดตั้ง

*โปรแกรมนี้เป็นโปรแกรม Alternative บน Windows ที่ออกแบบมาให้ใช้งานได้คล้ายๆ Digital Color Meter บนระบบ macOS ครับ

<a class="simple-button-plugin" href="https://software.thaiware.com/13598-Digital-Color-Meter-Download.html" target="_blank" rel="noopener">ดาวน์โหลด</a>
<div></div>
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slide-page"></div>
<div class="slides"></div>
<div class="slides">
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072817u4_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="1363x856" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072817u4_67.png" /></div>
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072821JC_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="2880x1800" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072821JC_67.png" /></div>
</div>
<div class="thumbwrapper">
<div>
<div class="jssort01">
<div>
<div class="jssort01">
<div></div>
<div>
<div></div>
<div>
<div class="p pav">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072817u4_67.png" /></div>
</div>
</div>
<div>
<div class="p">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072821JC_67.png" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
<div></div>
หลังจากดาวน์โหลดเสร็จแล้ว ก็เปิดโปรแกรมขึ้นมา หากต้องการดูดโค้ดสีตรงส่วนไหน ก็สามารถลากเมาส์ไปส่วนที่เราต้องการบนหน้าจอได้เลยทันที ถ้าต้องการบันทึกโค้ดที่แสดงตรงจุดนั้นให้กดปุ่ม Spacebar เพื่อบันทึกลงโปรแกรม

<a class="image-zoomable" href="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_1712220859174s_67.png" target="_blank" rel="noopener" data-size="836x648"><img title="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220859174s_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" /></a>

เราสามารถเลือกได้ว่าจะคัดลอกสีที่เราเลือกจากโปรแกรมในรูปแบบ RGB หรือ HEX ก็เลือกตามช่องได้เลย
<ul>
 	<li>สามารถกดปุ่ม "Ctrl+C" เพื่อคัดลอกสีที่เลือกไว้</li>
</ul>
ถ้าใครอยากบันทึกรายชื่อโค้ดสีทั้งหมดภายในครั้งเดียว
<ul>
 	<li>ก็สามารถกดปุ่ม "Ctrl+L" เพื่อคัดลอกสีทั้งหมดที่บันทึกในโปรแกรม</li>
</ul>
เสร็จแล้วก็กดปุ่ม "Ctrl+V" วางในโน้ตต่างๆ เพื่อบันทึกไว้ใช้งานภายหลังได้

<hr />

ในส่วนของผู้ใช้งานระบบปฏิบัติการ macOS จะมีโปรแกรม Digital Color Meter ติดมากับตัวเครื่องอยู่แล้ว สามารถเข้าผ่าน Application รวม หรือ พิมพ์ค้นหาผ่านทาง Spotlight โดยพิมพ์คำว่า "Digital Color Meter" และเปิดโปรแกรมได้ทันที
<div>
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slider-container ckeditor-imageSlider slide-zoomable">
<div class="slide-page"></div>
<div class="slides"></div>
<div class="slides">
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072737HA_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="1360x860" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222072737HA_67.png" /></div>
<div><img src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220728050V_67.jpg" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" border="0" data-size-lg="2880x1800" data-src-lg="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_1712220728050V_67.jpg" /></div>
</div>
<div class="thumbwrapper">
<div>
<div class="jssort01">
<div>
<div class="jssort01">
<div></div>
<div>
<div></div>
<div>
<div class="p pav">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222072737HA_67.png" /></div>
</div>
</div>
<div>
<div class="p">
<div class="w"><img class="t" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_1712220728050V_67.jpg" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
<div></div>
การใช้งานก็เหมือนกันทั้งใน Windows และ macOS โดยลากเมาส์ไปตามจุดต่างๆ ที่ต้องการ ก็จะแสดงโค้ดสีให้เห็นภายในโปรแกรม

<a class="image-zoomable" href="https://tips.thaiware.com/upload_misc/tips/2017_12/images/973_171222090123m3_67.png" target="_blank" rel="noopener" data-size="740x406"><img title="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" src="https://tips.thaiware.com/upload_misc/tips/2017_12/728/973_171222090123m3_67.png" alt="เทคนิคเช็คสี ดูโค้ดสี บนหน้าจอ ด้วยโปรแกรม Digital Color Meter ทั้งใน Windows และ Mac" /></a>

ในส่วนของ macOS นี้จะสามารถคัดลอกออกมาในรูปแบบ ข้อความ หรือ รูปภาพ ได้ โดย
<ul>
 	<li>กดปุ่ม "Command + Shift + C" จะเป็นการคัดลอกสีในจุดที่เมาส์ชี้เอาไว้ ในรูปแบบ ข้อความ</li>
 	<li>กดปุ่ม "Command + Option + C" จะเป็นการคัดลอกสีในจุดที่เมาส์ชี้เอาไว้ ในรูปแบบ รูปภาพ</li>
</ul>
เสร็จแล้วก็กดปุ่ม "Ctrl+V" วางในโน้ตต่างๆ บันทึกเก็บไว้ใช้งาน หรือ จะรวบรวมรายชื่อสีที่ชื่นชอบไว้ก็ได้

เพียงเท่านี้ เราก็สามารถบันทึกสีไว้ใช้งานร่วมกับงานอื่นๆ หรือ นำโค้ดสีไปใช้กับงานออกแบบ งานทำเว็บ CSS HTML ได้ง่ายมากยิ่งขึ้น ถือเป็นอีกหนึ่งเครื่องมือที่ช่วยเช็คโค้ดสีในระบบ Windows และ macOS ได้สะดวกจริงๆ

<strong>ที่มา : </strong><a href="https://tips.thaiware.com/973.html">THAIWARE</a>

</div>
</div>
</div>
</div>