วิธีดูดสีจากรูปภาพให้ได้ค่าสีที่แม่นยำ: HEX, RGB และ HSL

หากต้องการค่าสีที่แม่นยำจากรูปภาพ ให้อ่านค่าของพิกเซลหนึ่งจุดแทนการประมาณด้วยสายตา เปิดรูปใน เครื่องดูดสีจากรูปภาพ เลื่อนเคอร์เซอร์ไปที่จุดที่ต้องการ คลิก แล้วคัดลอกรหัส HEX ค่าที่ได้คือค่าที่บันทึกไว้ของพิกเซลนั้น จึงคงเดิมทุกครั้งที่คุณดูดสีจุดเดิมในไฟล์เดิม

ดูดสีจากรูปภาพต้องการรหัสสีที่แม่นยำใช้ฟรี

พิกเซลเก็บอะไรไว้

พิกเซลแต่ละจุดคือสี่เหลี่ยมเล็ก ๆ ของสีหนึ่ง บนหน้าจอหรือในไฟล์ภาพ พิกเซลจะถูกเก็บเป็นตัวเลขสามค่า ได้แก่ แดง เขียว และน้ำเงิน แต่ละค่าอยู่ในช่วง 0 ถึง 255 สีแดงแท้คือ 255, 0, 0 ตัวเลขทั้งสามชุดนี้ให้ข้อมูลเดียวกันในทุกรูปแบบ สีเดียวกันจึงเขียนได้หลายวิธี

HEX, RGB และ HSL

• HEX เขียนแต่ละค่าเป็นเลขฐานสิบหก ใช้สองตัวอักษรต่อหนึ่งช่องสี #FF0000 คือสีแดงแท้ เว็บไซต์ CSS และเครื่องมือออกแบบส่วนใหญ่ใช้รูปแบบนี้
• RGB เขียนตัวเลขชุดเดียวกันในระบบฐานสิบ เช่น rgb(255, 0, 0) เป็นสีเดียวกับรหัส HEX
• HSL อธิบายสีตามวิธีที่คนพูดถึงสี ได้แก่ เฉดสี (ตำแหน่งบนวงล้อสี) ความอิ่มตัว (สีเข้มหรือจางแค่ไหน) และความสว่าง (อ่อนหรือเข้มแค่ไหน) hsl(0, 100%, 50%) คือสีแดงแท้

ใช้ HEX เมื่อวางสีลงในโค้ด ใช้ RGB เมื่อเครื่องมือขอค่านี้ และใช้ HSL เมื่อต้องการเวอร์ชันที่อ่อนลงหรือเข้มขึ้นของเฉดเดิม การปรับเฉพาะความสว่างใน HSL จะคงเฉดสีไว้ ซึ่งทำได้ยากกว่าเมื่อปรับด้วย HEX ด้วยมือ สำหรับการตรวจความคมชัดระหว่างสีสองสี ดู HEX, RGB, HSL, CMYK และความคมชัด

ตัวอย่างสีที่ใช้ในสไตล์ชีต:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

ทำไมรหัสสีอาจไม่ตรงกับที่เห็นบนจอ

• รูปถูกบีบอัด JPEG ประหยัดพื้นที่ด้วยการทำให้รายละเอียดเล็ก ๆ เรียบลง พิกเซลใกล้ขอบจึงอาจต่างจากสีที่เห็นตรงกลางพื้นที่เล็กน้อย
• ขอบผสมกัน ตรงจุดที่สองสีมาชนกัน พิกเซลระหว่างกลางเป็นสีผสม ไม่ใช่สีที่มีอยู่ในตัวเอง
• โปรไฟล์สีต่างกัน เครื่องดูดสีอ่านค่าที่เบราว์เซอร์ถอดรหัสออกมา ซึ่งอยู่ในระบบ sRGB ภาพถ่ายที่บันทึกด้วยโปรไฟล์ช่วงสีกว้างอาจดูต่างออกไปเมื่อเปิดในโปรแกรมอื่น
• การย่อขยายทำให้พิกเซลผสมกัน ภาพหน้าจอที่ถ่ายขณะจอแสดงผลถูกย่อขยายอาจมีพิกเซลที่ผสมกันแล้ว หากทำได้ ให้ถ่ายภาพหน้าจอขนาดเต็ม
• ภาพขนาดใหญ่มากจะอ่านจากสำเนา ภาพที่ด้านยาวที่สุดเกิน 6000 พิกเซลจะถูกอ่านจากสำเนาขนาด 6000 พิกเซล ดังนั้นค่าพิกเซลหนึ่งจุดอาจต่างจากไฟล์ขนาดเต็มเล็กน้อย

ดูดสีจากกลางพื้นที่สีเรียบ

หาพื้นที่ที่เป็นสีเดียวกัน แล้วเลื่อนไปยังจุดกึ่งกลาง แว่นขยายจะแสดงพิกเซล 11 คูณ 11 รอบตัวชี้ ทำให้เห็นว่าจุดนั้นเป็นสีผสมหรือเป็นสีเรียบ หากใช้คีย์บอร์ด ให้เลื่อนเส้นเล็งทีละหนึ่งพิกเซลด้วยปุ่มลูกศร หรือทีละสิบพิกเซลด้วยปุ่ม Shift แล้วกด Enter เพื่อดูด ตรวจค่าที่แสดงก่อนคัดลอกทุกครั้ง

ใช้จานสีเพื่อสร้างชุดสี

ภาพถ่ายมักมีสีที่คุณสนใจมากกว่าหนึ่งสี จานสีจะแสดงสีหลักของภาพได้สูงสุดหกสี วิธีทำงานคือปัดค่าแต่ละพิกเซลให้เหลือ 16 ระดับต่อช่องสี นับจำนวนแต่ละกลุ่ม แล้วเก็บกลุ่มที่พบบ่อยที่สุดซึ่งแตกต่างจากกันเอง แต่ละช่องสีแสดงค่าเฉลี่ยของกลุ่มนั้น แตะช่องสีเพื่อคัดลอกรหัส HEX ควรมองจานสีเป็นจุดเริ่มต้น เพราะเป็นค่าเฉลี่ย ไม่ใช่สีแบรนด์ที่วัดได้จริง

แปลงระหว่างรูปแบบสี

หากเครื่องมือออกแบบขอรูปแบบอื่น ให้วางรหัส HEX ลงใน เครื่องแปลงรหัสสี เครื่องนี้แปลงระหว่าง HEX, RGB และ HSL โดยไม่เปลี่ยนสี ผลลัพธ์จึงตรงกับรหัสที่คุณดูดมา

รายการที่เลือกล่าสุดและความเป็นส่วนตัว

เครื่องมือเก็บค่าที่คุณดูดล่าสุดไว้ในหน้า เพื่อให้เปรียบเทียบได้ ค่าเหล่านี้อยู่ในหน่วยความจำของแท็บนี้เท่านั้น และจะหายไปเมื่อคุณปิดแท็บ ตัวรูปภาพเองถูกอ่านในเบราว์เซอร์ของคุณ และจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้งานกับ fixmint

1. เปิด เครื่องดูดสีจากรูปภาพ แล้ววางรูปภาพที่ต้องการ
2. เลื่อนตัวชี้ไปยังจุดที่ต้องการ หรือคลิกที่รูปแล้วใช้ปุ่มลูกศรเลื่อนเส้นเล็งทีละหนึ่งพิกเซล และกด Shift ค้างไว้เพื่อเลื่อนทีละสิบพิกเซล
3. คลิก หรือกด Enter เพื่อดูดสี ตรวจค่าที่แสดงก่อนคัดลอก
4. ใช้ปุ่มคัดลอกข้าง HEX, RGB หรือ HSL เพื่อคัดลอกค่าที่ต้องการ
5. หากเครื่องมือออกแบบขอรูปแบบอื่น ให้วางค่านั้นลงใน เครื่องแปลงรหัสสี

คำตอบสั้น ๆ

ทำไมสีบนจอของฉันดูต่างออกไป? จอของคุณแสดงไฟล์ที่ผ่านการจัดการสีและถูกย่อขยายแล้ว ให้ดูสีจากกลางพื้นที่สีเรียบ แล้วเทียบรหัส HEX กับแถบสีที่รู้ค่าอยู่แล้ว

ควรคัดลอกรูปแบบไหน? HEX สำหรับเว็บไซต์และเครื่องมือออกแบบส่วนใหญ่ ใช้ RGB หรือ HSL เมื่อเครื่องมือขอรูปแบบนั้น

เครื่องมือนี้อัปโหลดรูปของฉันหรือไม่? ไม่ รูปภาพจะถูกถอดรหัสและอ่านอยู่ในเบราว์เซอร์ของคุณเท่านั้น