ตัวเลือกสีจากรูปภาพ

เครื่องมือดูดสีทำงานอย่างไร

อัปโหลดรูปถ่าย ภาพหน้าจอ หรือโลโก้ แล้วคลิกตรงไหนก็ได้ เครื่องมือจะอ่าน พิกเซลตรงจุดนั้นพอดี และแสดงสีเป็น HEX (เช่น #1e88e5) และ RGB (rgb(30, 136, 229)) ปุ่ม คัดลอก จะคัดลอกรหัส HEX ไว้ในคลิปบอร์ด ทันทีที่โหลดรูป ระบบจะอ่านพิกเซลตรงกลางให้ก่อน คุณจึงเห็นค่าสีได้ทันที

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

HEX, RGB และ HSL แบบเข้าใจง่าย

ทั้งสามแบบอธิบายสีเดียวกันบนหน้าจอ ต่างกันแค่วิธีเขียน

• HEX — #RRGGBB คือเลขฐานสิบหกสามคู่ สำหรับแดง เขียว และน้ำเงิน ตั้งแต่ 00 ถึง ff เป็นรูปแบบที่ CSS, Figma, Canva, ธีม WordPress และช่อง "สีแบรนด์" ส่วนใหญ่ต้องการ
• RGB — สามช่องสีเดิม แต่เขียนเป็นเลขฐานสิบตั้งแต่ 0 ถึง 255 #1e88e5 กับ rgb(30, 136, 229) คือสีเดียวกัน ใช้สะดวกในโค้ด Office และโปรแกรมที่ปรับสีด้วยแถบเลื่อน
• HSL — เฉดสี (0–360° บนวงล้อสี) ความอิ่มตัว และความสว่างเป็นเปอร์เซ็นต์ เครื่องมือนี้ไม่แสดง HSL แต่โปรแกรมออกแบบหรือ CSS แปลงจาก HEX ได้ทันที HSL มีประโยชน์เมื่อต้องการสีเดิมในเวอร์ชันที่อ่อนหรือเข้มขึ้น เพียงคงเฉดสีไว้แล้วปรับความสว่าง

ดูดสีจากภาพหน้าจอ

ถ้าต้องการสีจากแอป เว็บไซต์ หรือเฟรมวิดีโอ ให้จับภาพหน้าจอ (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; มือถือ: ปุ่มเปิดปิด + ลดเสียง หรือบน iPhone ปุ่มด้านข้าง + เพิ่มเสียง) แล้วลากมาวางที่นี่

เคล็ดลับให้ได้สีแม่นยำ:

• คลิกบริเวณที่เป็นสีเรียบ เล็งที่กลางปุ่ม ไม่ใช่ขอบ เพราะขอบถูกเกลี่ยเข้ากับพื้นหลัง (แอนติเอเลียส) จึงได้สีกลาง ๆ
• ภาพถ่ายมีจุดรบกวน พิกเซลข้างเคียงในภาพถ่ายต่างกันเล็กน้อย ลองหลายจุดแล้วเลือกจุดที่เป็นตัวแทนได้ดีที่สุด
• ภาพหน้าจออาจทำให้สีเพี้ยน โหมดกลางคืน Night Shift HDR หรือจอที่มีการจัดการสีอาจทำให้ภาพที่จับได้มีสีเหลือบ ปิดสิ่งเหล่านี้ก่อนหากต้องการสีแบรนด์ที่ตรงเป๊ะ
• JPG ที่บีบอัดมากเกินไปจะเพี้ยน JPG ที่ถูกบันทึกซ้ำหลายครั้งจะมีรอยด่างใกล้ขอบ ถ้ามีไฟล์ PNG หรือ SVG ต้นฉบับของโลโก้ ให้ใช้ไฟล์นั้น
• บริเวณโปร่งใส ไม่มีสีจริง คลิกแล้วจะได้สีดำ (#000000) ให้คลิกที่ส่วนที่มองเห็นของโลโก้

ตรวจคอนทราสต์ก่อนนำสีไปใช้

สีที่ดูสวยอาจอ่านยากเมื่อใช้เป็นสีตัวอักษร แนวทางการเข้าถึง (WCAG) กำหนดอัตราคอนทราสต์อย่างน้อย 4.5:1 ระหว่างข้อความปกติกับพื้นหลัง และ 3:1 สำหรับข้อความขนาดใหญ่และไอคอน สีเทาอ่อนบนพื้นขาว หรือน้ำเงินกลางบนน้ำเงินเข้มมักไม่ผ่าน

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

การใช้งานที่พบบ่อย

• หาสีแบรนด์จากโลโก้ที่ได้รับมาเป็นไฟล์รูป
• สร้างสีปุ่มหรือสีพื้นหลังของเว็บไซต์ขึ้นใหม่ในงานออกแบบของคุณ
• ทำชุดสีจากรูปถ่ายสำหรับสไลด์ โพสต์โซเชียล หรือมู้ดบอร์ดแต่งบ้าน
• เลือกสีพื้นหลังของไอคอน Apple touch ใน เครื่องมือสร้าง Favicon

เครื่องมือที่เกี่ยวข้อง

• ไดคัตวัตถุก่อน แล้วค่อยดูดสีโดยไม่มีพื้นหลัง: ลบพื้นหลัง
• ตัดเฉพาะบริเวณเล็ก ๆ เพื่อคลิกได้แม่นขึ้น: ครอบตัดรูปภาพ
• ต้องการตัวรูปเป็นโค้ดสำหรับ CSS? รูปภาพเป็น Base64