EyeDropper Color Picker: เครื่องมือดูดสีจากหน้าจอ สำหรับนักออกแบบและนักพัฒนา
เรียนรู้วิธีใช้ EyeDropper Color Picker ดูดสีจาก pixel ใดก็ได้บนหน้าจอ รองรับ EyeDropper API แบบ native พร้อม fallback อัตโนมัติ แสดงสีในรูปแบบ HEX, RGB และ HSL ใช้งานฟรี ไม่ต้องติดตั้ง
Table of Contents
เคยไหมที่เจอสีสวยๆ บนเว็บไซต์ โปสเตอร์ หรือภาพดีไซน์ แล้วต้องมานั่งเดาค่า HEX เอาเอง หรือต้องเปิด Photoshop ขึ้นมาเพื่อใช้ eyedropper tool? ปัญหาเหล่านี้จะจบลงทันทีเมื่อคุณได้ลองใช้ EyeDropper Color Picker — เครื่องมือดูดสีที่ทำงานตรงในเบราว์เซอร์ เลือกสีจาก pixel ใดก็ได้บนหน้าจอ แล้วได้ค่า HEX, RGB และ HSL กลับมาทันที
เครื่องมือนี้ถูกออกแบบมาสำหรับ designer และ developer โดยเฉพาะ ใช้ EyeDropper API แบบ native บน Chromium browsers (Chrome, Edge, Opera) พร้อม screen-capture fallback อัตโนมัติสำหรับเบราว์เซอร์ที่ยังไม่รองรับ เช่น Firefox หรือ Safari ดังนั้นไม่ว่าคุณจะใช้เบราว์เซอร์อะไร ก็สามารถดูดสีจากหน้าจอได้เสมอ แถมยังทำงาน 100% ฝั่ง client ไม่มีการ tracking และไม่ต้องติดตั้งอะไรเพิ่มเติม
ในบทความนี้เราจะพาคุณไปรู้จักทุกฟีเจอร์ของ EyeDropper Color Picker ตั้งแต่วิธีใช้งานทีละขั้นตอน ไปจนถึงเทคนิคการนำสีไปใช้ในงานจริง เพื่อให้เวิร์กโฟลว์การทำงานกับสีของคุณเร็วขึ้นหลายเท่า
ทำไมต้องใช้ EyeDropper Color Picker?
- เลือกสีได้ทุกที่บนหน้าจอ — ไม่ใช่แค่ภายในหน้าเว็บ แต่วาง pointer ไปที่ pixel ไหนก็เลือกได้ทั้ง desktop, หน้าต่างแอปอื่น หรือแม้แต่รูปภาพที่เปิดอยู่
- รองรับทุกเบราว์เซอร์ด้วย smart fallback — บน Chromium ใช้ EyeDropper API ที่ลื่นไหลแบบ native ส่วนเบราว์เซอร์อื่นๆ ระบบจะสลับไปใช้ screen capture อัตโนมัติ ไม่ต้องตั้งค่าอะไร
- ได้ครบ 3 format ในครั้งเดียว — ทุกสีที่เลือกจะแสดงเป็น HEX, RGB และ HSL พร้อมกัน ไม่ต้องเสียเวลาแปลงค่าทีหลัง
- คลิกเดียว copy ได้ทันที — กดปุ่ม copy ตรง format ที่ต้องการ ค่าก็เข้าสู่ clipboard พร้อมวางลงใน code หรือ design tool ได้เลย
- มี color history เก็บไว้ให้ — สีที่เคยเลือกมากถึง 20 สีจะถูกบันทึกใน localStorage ทำให้กลับมาใช้สีเดิมซ้ำได้แม้ปิดหน้านั้นไปแล้ว
- ปลอดภัย ไม่มี tracking — ทุกอย่างประมวลผลในเครื่องคุณ 100% ไม่มีการส่งข้อมูลออกไปที่ไหน ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้ง extension
ฟีเจอร์เด่น
| ฟีเจอร์ | คำอธิบาย |
|---|---|
| EyeDropper API native | ใช้ API ของเบราว์เซอร์โดยตรงบน Chromium ให้ประสบการณ์ดูดสีที่ลื่นไหลและแม่นยำระดับ pixel |
| Screen-capture fallback | เบราว์เซอร์ที่ไม่รองรับ EyeDropper API จะถูกเปลี่ยนไปใช้การ capture หน้าจอแทนโดยอัตโนมัติ ยังดูดสีได้เหมือนเดิม |
| แสดงผล 3 รูปแบบพร้อมกัน | HEX (#3B82F6), RGB (rgb(59, 130, 246)) และ HSL (hsl(217, 91%, 60%)) แสดงพร้อมกันทุกครั้งที่เลือกสี |
| Copy หนึ่งคลิก | ปุ่ม copy แยกสำหรับแต่ละ format กดปุ๊บได้ค่าปุ๊บ เหมาะกับ workflow ที่ต้องสลับไปวางในโค้ดหรือโปรแกรมดีไซน์ |
| Color history 20 สี | ประวัติสีล่าสุดถูกบันทึกใน localStorage ของเบราว์เซอร์ ไม่หายเมื่อรีเฟรชหน้า หรือกลับมาใช้งานในครั้งหน้า |
| Keyboard shortcut | กด Escape เพื่อยกเลิกการเลือกสีได้ทันทีในโหมด fallback ไม่ต้องคลิกหาเมนูปิด |
รายละเอียดเพิ่มเติมของฟีเจอร์หลัก:
- โหมด native (EyeDropper API): เมื่อเปิดใช้งานบน Chrome หรือ Edge เบราว์เซอร์จะแสดง crosshair ให้คุณ hover ไปที่ pixel ต่างๆ และขยายมุมมองบริเวณที่ชี้ให้เห็นชัดเจน เลือกได้ละเอียดระดับ sub-pixel
- โหมด fallback (screen capture): บน Firefox, Safari หรือเบราว์เซอร์อื่นๆ ระบบจะขอสิทธิ์ capture หน้าจอ แล้วแสดงภาพหน้าจอแบบ live ให้คุณคลิกเลือกสีจากจุดใดก็ได้ กด Escape เพื่อยกเลิกได้ทุกเมื่อ
- ประวัติสีอัจฉริยะ: คลิกที่สีใดก็ได้ใน history เพื่อเรียกค่ากลับมาแสดงอีกครั้ง หรือจะคัดลอก format ใดก็ได้จากตรงนั้นโดยตรง
วิธีใช้งาน EyeDropper Color Picker
การใช้งานง่ายมาก ใช้เวลาไม่ถึง 10 วินาที ตามขั้นตอนนี้เลย:
- เปิดเครื่องมือ — เข้าไปที่ EyeDropper Color Picker ในเบราว์เซอร์ของคุณ (แนะนำ Chrome หรือ Edge เพื่อประสบการณ์ที่ดีที่สุด)
- เริ่มโหมดดูดสี — คลิกปุ่ม "Pick Color" หรือปุ่มเริ่มต้นตามที่แสดงบนหน้า เครื่องมือจะเข้าสู่โหมดเลือกสี
- เลื่อน pointer ไปยังสีที่ต้องการ — ย้ายเมาส์ไปที่ pixel เป้าหมายบนหน้าจอ จะเห็นตัวอย่างสีแบบ live พร้อมค่า HEX, RGB, HSL อัปเดตตลอดเวลา
- คลิกเพื่อเลือก — เมื่อได้สีที่ถูกใจแล้วคลิก ระบบจะล็อกสีนั้นและแสดงค่าทั้ง 3 format พร้อมตัวอย่างสีขนาดใหญ่ให้ตรวจทาน
- คัดลอกค่าและใช้งาน — คลิกปุ่ม copy ข้าง format ที่ต้องการ (เช่น HEX สำหรับใช้ใน CSS หรือ RGB สำหรับใช้ใน design tool) ค่าจะเข้าสู่ clipboard ทันที พร้อม notification ยืนยันการคัดลอก
ในโหมด fallback หากต้องการยกเลิกระหว่างทาง แค่กด Escape บนคีย์บอร์ด ระบบจะออกจากโหมดเลือกสีโดยไม่มีการเปลี่ยนแปลงใดๆ
เข้าใจ Color Formats
สีเดียวกันสามารถเขียนแทนได้หลายรูปแบบ แต่ละแบบเหมาะกับบริบทการใช้งานที่ต่างกัน:
- HEX (#3B82F6) — รูปแบบที่นิยมที่สุดในงานเว็บ ประกอบด้วยเครื่องหมาย # ตามด้วยเลขฐาน 16 จำนวน 6 หลัก (หรือ 3 หลักแบบ shorthand) ใช้ใน CSS, HTML และเครื่องมือดีไซน์ส่วนใหญ่ เช่น Figma หรือ Adobe XD อ่านง่าย กระชับ เหมาะกับการกำหนดสีในโค้ดโดยตรง
- RGB (rgb(59, 130, 246)) — แสดงสีจากค่าความเข้มของแสงแดง เขียว น้ำเงิน แต่ละค่าอยู่ระหว่าง 0–255 ใช้ใน CSS, JavaScript (canvas, SVG) และการเขียนโปรแกรมทั่วไป เข้าใจง่ายว่าแต่ละ channel มีค่ามากน้อยแค่ไหน และยังต่อยอดไปเป็น rgba() ที่เพิ่มค่า alpha สำหรับความโปร่งใสได้
- HSL (hsl(217, 91%, 60%)) — แสดงสีในมุมมองของมนุษย์มากที่สุด ประกอบด้วย Hue (มุมสี 0–360°), Saturation (ความอิ่มตัว %) และ Lightness (ความสว่าง %) เหมาะกับงานที่ต้องปรับโทนสี เช่น อยากได้สีเดียวกันแต่จางลง ก็แค่ลด saturation หรือเพิ่ม lightness — ปรับได้เป็นธรรมชาติมากกว่าการเดาเลข HEX
เคล็ดลับ: ถ้าจะใช้สีใน CSS ให้เลือก HEX หรือ HSL (HSL ปรับธีมสีได้ง่ายกว่า), ถ้าจะใช้กับ canvas, WebGL หรือฟังก์ชัน JavaScript ให้เลือก RGB และถ้าจะส่งค่าสีให้เพื่อนร่วมทีมที่ใช้เครื่องมือดีไซน์ HEX คือตัวเลือกที่ปลอดภัยที่สุด
กรณีใช้งานจริง
จับสี brand จากเว็บไซต์อ้างอิง
เจอเว็บไซต์ของคู่แข่งหรือเว็บแรงบันดาลใจที่มีชุดสีสวยๆ อยากรู้ว่าใช้สีอะไรบ้าง? เปิด EyeDropper Color Picker แล้วดูดสีจาก logo, ปุ่ม CTA หรือพื้นหลังทีละจุด ประวัติสี 20 รายการจะช่วยรวบรวมทุกสีที่เก็บได้ไว้ในที่เดียว จากนั้นคัดลอกทั้งหมดไปสร้างเป็นเอกสารอ้างอิงสำหรับทีมได้ทันที
สร้าง design system ของตัวเอง
ตอนเริ่มโปรเจกต์ใหม่ การมี color tokens ที่สอดคล้องกันเป็นเรื่องสำคัญ ใช้เครื่องมือนี้เก็บสีหลัก (primary), สีรอง (secondary), สี neutral และสี semantic ต่างๆ จากแหล่งอ้างอิง แล้วนำค่า HSL มาปรับ lightness เพื่อสร้างเฉด darker/lighter อย่างเป็นระบบ — ได้ design system ที่เป็นระเบียบโดยไม่ต้องเดาสี
ก๊อปปี้สีจาก screenshot หรือรูปภาพ
เปิด screenshot ของดีไซน์เก่า รูปภาพจาก Pinterest หรือแม้แต่ภาพถ่ายที่ชอบ ดูดสีจากจุดที่ต้องการโดยไม่ต้องอัปโหลดไฟล์เข้าสู่เครื่องมือใดๆ สะดวกเป็นพิเศษเวลาทำ mood board หรือดึงสีจากภาพถ่ายมาทำ palette ให้แคมเปญ
งาน accessibility และคอนทราสต์
ดูดสีพื้นหลังและสีตัวอักษรจากหน้าจอจริง แล้วนำค่าที่ได้ไปตรวจสอบอัตราส่วนคอนทราสต์กับมาตรฐาน WCAG — เครื่องมือนี้ช่วยให้คุณรู้ค่าสีที่แม่นยำจากสิ่งที่ผู้ใช้เห็นจริง ไม่ใช่ค่าในไฟล์ดีไซน์ที่อาจเพี้ยนไปตอน render
Best Practices
- เลือก format ให้ตรงกับงานปลายทาง — ใช้ HEX สำหรับ CSS และ design tools, RGB สำหรับ canvas/JavaScript และ HSL สำหรับการปรับโทนสีอย่างเป็นระบบ
- ใช้ color history เป็น temporary swatch board — เก็บสีทั้งหมดของโปรเจกต์ไว้ใน history ระหว่างทำงาน แล้วค่อยย้ายไปยังเครื่องมือ palette ที่ถาวรกว่าเมื่อจบ
- ตรวจสอบสีบนจอที่ calibrated — ค่าที่ดูดได้คือค่าที่จอแสดงจริง ถ้าจอของคุณเพี้ยน ค่าก็เพี้ยนตาม ควรทำงานบนจอที่ปรับสีมาอย่างถูกต้อง
- คู่กับ contrast checker เสมอ — สีสวยไม่ได้แปลว่าอ่านง่าย ทุกครั้งที่เลือกสีสำหรับ text ควรตรวจคอนทราสต์ตามมาตรฐาน WCAG ก่อนตัดสินใจ
- ปิดโหมด fallback เมื่อไม่ใช้ — ในเบราว์เซอร์ที่ใช้ screen capture ควรกด Escape หรือจบการใช้งานทุกครั้ง เพื่อไม่ให้มีการ capture หน้าจอค้างอยู่
- ใช้ชื่อสีในโค้ดแทนค่าดิบ — เมื่อได้ค่าสีที่ต้องการแล้ว ควรนิยามเป็น CSS custom properties (เช่น --brand-primary: #3B82F6;) เพื่อให้แก้ไขทีเดียวจบทั้งโปรเจกต์
เริ่มเลือกสีกันวันนี้
การทำงานกับสีไม่ควรเป็นอุปสรรคอีกต่อไป ไม่ว่าคุณจะเป็น designer ที่กำลังหา brand color ที่ลงตัว, developer ที่ต้องก๊อปปี้สีจาก mockup ไปใส่ในโค้ด หรือใครก็ตามที่ชอบเก็บสีสวยๆ จากรอบตัว — EyeDropper Color Picker พร้อมให้คุณใช้ฟรี ไม่ต้องติดตั้ง ไม่ต้องสมัครสมาชิก เปิดเบราว์เซอร์แล้วเริ่มดูดสีได้เลย
ลองดูสิ สีที่คุณกำลังมองหาอาจซ่อนอยู่ที่มุมไหนสักมุมของหน้าจอคุณก็ได้ และด้วยเครื่องมือนี้ คุณจะ capture มันไว้ได้ในคลิกเดียว
เครื่องมือที่เกี่ยวข้อง
- Color Converter — แปลงระหว่าง HEX, RGB, HSL และอื่นๆ
- Color Palette Generator — สร้าง palette ที่กลมกลืนจากสีฐานใดๆ
- Color Contrast Checker — ตรวจสอบอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG
ขอให้สนุกกับการเลือกสี!