ตัวเลือกสีอย่างง่าย

เครื่องมือดูดสีฟรีสำหรับ Chrome

ดูดสีจากหน้าเว็บใดก็ได้ แล้วรับ #E8553D

ตัวเลือกสีอย่างง่ายเป็นเครื่องมือดูดสีฟรีสำหรับ Chrome กดปุ่มของส่วนขยายหรือ Alt+P เล็งพิกเซลใดก็ได้ผ่านแว่นขยายแล้วคลิก โค้ด HEX, RGB หรือ HSL จะอยู่ในคลิปบอร์ดทันที 50 สีล่าสุดรออยู่ในป๊อปอัป

เพิ่มลงใน Chrome — ฟรี

ผู้ใช้ 453 คนบน Chrome Web Store

ใช้ได้ใน Edge, Brave, Opera และเบราว์เซอร์ Chromium อื่นๆ ด้วย

แว่นขยายสี่เหลี่ยมเหนือโปสเตอร์บนหน้าเว็บ ล้อมพิกเซลเดียวพร้อมค่า HEX, RGB และ HSL ข้างป๊อปอัปของตัวเลือกสีอย่างง่ายที่แสดง #E8553D และประวัติสี

สรุปโดยย่อ

ทำอะไรได้
เครื่องมือดูดสี: เล็งพิกเซลใดก็ได้บนหน้าเว็บผ่านแว่นขยาย คลิก แล้วโค้ด HEX, RGB หรือ HSL ของพิกเซลนั้นจะถูกคัดลอก
เหมาะกับใคร
นักพัฒนาเว็บและดีไซเนอร์ที่ต้องดึงสีจากเว็บไซต์จริง งานออกแบบ และภาพหน้าจอที่เปิดในเบราว์เซอร์ รวมถึงทุกคนที่ต้องการโค้ดสี
ราคา
ฟรี ไม่ต้องมีบัญชี ไม่มีเวอร์ชันเสียเงิน
ข้อมูล
ประวัติและรูปแบบเริ่มต้นเก็บในที่เก็บข้อมูลในเครื่องของส่วนขยายบนอุปกรณ์ของคุณ ไม่มีการวิเคราะห์ ไม่มีคำขอเครือข่าย
ใช้งานได้ใน
Chrome และเบราว์เซอร์ Chromium อื่นที่ติดตั้งส่วนขยายจาก Chrome Web Store บนคอมพิวเตอร์ ใช้ไม่ได้บนหน้าของเบราว์เซอร์ เช่น หน้าแท็บใหม่ การตั้งค่า และ Chrome Web Store
ข้อจำกัด
เลือกสีจากส่วนที่มองเห็นของแท็บ โดยใช้ภาพที่แคปไว้ตอนคุณเริ่ม ไม่มี CMYK, Pantone หรือการตรวจคอนทราสต์ และเลือกสีนอกเบราว์เซอร์ไม่ได้
เวอร์ชัน
2.7.0 อัปเดต 23 ตุลาคม 2569

สามขั้นตอน คลิกเดียว

  1. 1

    เริ่มตัวเลือกสี

    คลิกไอคอนบนแถบเครื่องมือแล้วกด “เลือกสี” หรือกด Alt+P บนหน้าใดก็ได้

  2. 2

    เล็งด้วยแว่นขยาย

    แว่นขยายสี่เหลี่ยมซูมรอบเคอร์เซอร์และล้อมพิกเซลที่ตรงเป๊ะ ป้ายใต้แว่นแสดง HEX, RGB และ HSL แบบสด

  3. 3

    คลิกแล้ววาง

    โค้ดถูกคัดลอกในรูปแบบเริ่มต้น และมีข้อความสั้นๆ ยืนยัน วางลงใน CSS, Figma หรือข้อความได้เลย

ใครใช้บ้าง

CSS

งานฟรอนต์เอนด์

ดึงค่าที่แม่นยำจากเว็บไซต์จริงไปใช้กับ CSS, SCSS หรือคอนฟิก Tailwind โดยไม่ต้องเปิด DevTools

HEX

ตรวจงานดีไซน์และแบรนด์

เก็บพาเลตจากอินเทอร์เฟซ งานออกแบบ หรือภาพอ้างอิง และตรวจว่าหน้าเว็บใช้สีแบรนด์ถูกต้อง

HSL

ปรับสี

ใช้ HSL เพื่อปรับความสว่างและความอิ่มตัวด้วยมือ หรือ RGB สำหรับโค้ดที่ต้องการตัวเลข

ทำอะไรได้บ้าง

  • พิกเซล ล้อมกรอบชัด

    แว่นขยายขยาย 11 × 11 พิกเซลรอบเคอร์เซอร์ และเป้าเล็งล้อมพิกเซลที่คุณจะเลือก เล็งโดนทั้งขอบหนาหนึ่งพิกเซลหรือแค่ขั้นเดียวของการไล่เฉดสี

  • รูปแบบ

    HEX เช่น #2A6FDB, RGB เช่น rgb(42, 111, 219), HSL เช่น hsl(217, 71%, 51%) เลือกรูปแบบเริ่มต้นครั้งเดียวในป๊อปอัป

  • สีในประวัติ

    ทุกสีที่เลือกจะขึ้นมาอยู่หน้าสุดของตาราง 50 สีล่าสุด ไม่ซ้ำกัน คลิกช่องสีเพื่อดูและคัดลอกโค้ดทั้งสามแบบ

  • แป้นลัด Alt+P

    เริ่มเลือกสีได้โดยไม่ต้องเปิดป๊อปอัป ปุ่มแป้นในป๊อปอัปจะเปิดหน้าตั้งค่าแป้นพิมพ์ลัดของ Chrome หากคุณอยากใช้ปุ่มอื่น

  • คำขอเครือข่าย

    ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีบัญชี ไม่มีการวิเคราะห์ ไม่มีเทเลเมทรี

  • สว่างและมืด

    ป๊อปอัปและแว่นขยายตามธีมของระบบ ใช้โทนเทากลางที่ไม่ทำให้สีที่คุณกำลังตัดสินเพี้ยน

วิธีดูโค้ดสีของทุกอย่างบนหน้าเว็บ

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

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

เลื่อนไปยังส่วนของหน้าที่ต้องการก่อนเริ่ม เพราะแว่นขยายอ่านค่าจากภาพที่แคปไว้ หน้าของเบราว์เซอร์ เช่น แท็บใหม่ การตั้งค่า และ Chrome Web Store ปิดไม่ให้ส่วนขยายใดเข้าถึง

เป็นส่วนตัวตั้งแต่การออกแบบ

  • ไม่มีคำขอเครือข่าย

    ส่วนขยายไม่เคยคุยกับเซิร์ฟเวอร์ ไม่มีการวิเคราะห์ ไม่มีเทเลเมทรี

  • อยู่บนอุปกรณ์ของคุณ

    ประวัติและรูปแบบเริ่มต้นอยู่ในที่เก็บข้อมูลในเครื่องของส่วนขยาย

  • สี่สิทธิ์การเข้าถึง

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

เครื่องมือดูดสีของ DevTools กับตัวเลือกสีอย่างง่าย

เครื่องมือดูดสีของ DevTools กับตัวเลือกสีอย่างง่ายเครื่องมือดูดสีของ DevToolsตัวเลือกสีอย่างง่าย
วิธีเริ่มเปิด DevTools หาสีในแผงสไตล์ คลิกช่องสีของมัน แล้วคลิกเครื่องมือดูดสีปุ่มบนแถบเครื่องมือหรือ Alt+P
ผลลัพธ์ไปที่ไหนคุณสมบัติ CSS ที่เปิดอยู่ คุณต้องคัดลอกเองคลิปบอร์ดของคุณ ทันทีที่คลิก
รูปแบบสีHEX, RGB, HSL และอื่นๆHEX, RGB และ HSL
สีที่เลือกไว้ก่อนหน้าไม่เก็บไว้50 สีล่าสุด พร้อมคัดลอกซ้ำ
ราคามีใน Chrome อยู่แล้วฟรี

คำถามที่พบบ่อย

จะดูโค้ดสีจากเว็บไซต์ได้อย่างไร

ติดตั้งตัวเลือกสีอย่างง่าย กด Alt+P บนหน้าเว็บ เล็งแว่นขยายไปที่สีแล้วคลิก โค้ด HEX หรือ RGB, HSL หากคุณต้องการ จะถูกคัดลอกไปที่คลิปบอร์ด

จะดูดสีจากรูปภาพบนหน้าเว็บได้อย่างไร

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

คัดลอก HSL หรือ RGB แทน HEX ได้ไหม

ได้ เลือกรูปแบบเริ่มต้นในป๊อปอัป: HEX, RGB หรือ HSL ป๊อปอัปยังแสดงทั้งสามแบบสำหรับทุกสีในประวัติ โดยแต่ละแบบมีปุ่มคัดลอกของตัวเอง

สีที่เลือกไว้ก่อนหน้าอยู่ที่ไหน

เปิดป๊อปอัป 50 สีล่าสุดอยู่ที่นั่นเป็นช่องสี สีใหม่สุดอยู่หน้าสุด คลิกช่องหนึ่งเพื่อดูและคัดลอกโค้ด หรือล้างประวัติ

จะเปลี่ยนแป้นลัด Alt+P ได้อย่างไร

คลิกปุ่มแป้นลัดในป๊อปอัป จะเปิดหน้าแป้นพิมพ์ลัดของ Chrome ซึ่งคุณตั้งปุ่มอื่นได้

ทำไมบางหน้าใช้ไม่ได้

Chrome ปิดหน้าของตัวเอง เช่น แท็บใหม่ การตั้งค่า และ Chrome Web Store ไม่ให้ส่วนขยายใดเข้าถึง และตัวเลือกสีอ่านได้เฉพาะส่วนที่มองเห็นของแท็บ ให้เลื่อนไปที่สีก่อน

เลือกสีนอกเบราว์เซอร์ได้ไหม

ไม่ได้ เลือกได้เฉพาะจากแท็บเบราว์เซอร์ปัจจุบัน และไม่แปลงเป็น CMYK หรือ Pantone ไม่ตรวจคอนทราสต์ด้วย

ฟรีไหม เก็บข้อมูลหรือเปล่า

ฟรี และไม่มีคำขอเครือข่าย ประวัติและรูปแบบเริ่มต้นอยู่บนอุปกรณ์ของคุณ

ส่วนขยายฟรีอื่นๆ จาก PYROCTAL

เล็ง คลิก วาง

เพิ่มลงใน Chrome — ฟรี