การสกัดสีจากรูปภาพ: วิธีสร้าง Color Palette ที่สมบูรณ์แบบ

ปรับปรุงล่าสุด: June 28, 2026

การดึงชุดสี (color palette) ออกมาจากภาพถ่ายเป็นวิธีที่เร็วที่สุดในการสร้างชุดสีที่รู้สึกว่าเข้ากันได้อยู่แล้ว ภาพถ่ายทำหน้าที่เลือกเฉดสีที่กลมกลืนไว้ให้แล้ว ส่วนการสกัด (extraction) เป็นเพียงการวัดค่าเหล่านั้นเท่านั้น คู่มือนี้จะครอบคลุมว่าการสกัดทำงานอย่างไร วิธีการที่ใช้สร้างชุดสีที่คุณสามารถนำไปใช้ในระบบออกแบบ (design system) และกฎความเปรียบต่าง (contrast rules) ที่ช่วยให้สีเหล่านั้นเข้าถึงได้

คำตอบสั้นๆ: วิธีดึงสีจากรูปภาพคืออะไร?

เปิดรูปภาพในเครื่องมือเลือกสี (color picker tool) สุ่มตัวอย่าง 5 ถึง 7 สีที่พบบ่อยที่สุด และให้น้ำหนักตามพื้นที่ที่แต่ละสีครอบคลุม ทิ้งสีที่ใกล้เคียงกันมากเกินไป เก็บสีหลัก (dominant) ไว้หนึ่งสี สีรอง (secondary) หนึ่งถึงสองสี และสีเน้น (accent) หนึ่งสี จากนั้นใช้กฎ 60-30-10: 60% สีหลัก, 30% สีรอง, และ 10% สีเน้น ตรวจสอบการจับคู่ข้อความกับพื้นหลังทุกชุดด้วย WCAG contrast checker ก่อนเผยแพร่ — พาเลทที่ดูดีแต่ผ่านเกณฑ์คอนทราสต์ไม่ได้จะไม่สามารถใช้สำหรับข้อความจริงได้

เหตุใดจึงควรดึงสีจากภาพถ่าย?

ภาพถ่ายที่ดีมักจะมีพาเลทสีที่กลมกลืนอยู่แล้ว เนื่องจากช่างภาพหรือฉากนั้นๆ ได้จัดองค์ประกอบไว้เช่นนั้น เมื่อคุณดึงสีเหล่านั้นออกมา คุณจะได้รับความกลมกลืนนั้นโดยไม่ต้องเลือก hex codes ตั้งแต่เริ่มต้น นี่คือสาเหตุที่นักออกแบบแบรนด์มักจะเริ่มจากภาพฮีโร่ (hero image) ภาพทิวทัศน์โปรดของผู้ก่อตั้ง หรือภาพถ่ายผลิตภัณฑ์

ทางเลือกอื่น—คือการเลือกสีจากวงล้อ (color wheel)—ก็ใช้ได้ผล แต่มีแนวโน้มที่จะสร้างพาเลทที่ถูกต้องทางเทคนิคแต่ขาดความรู้สึกทางอารมณ์ สีที่ดึงมาจากภาพจริงจะมาพร้อมกับบริบทที่ทำให้พวกมันดูตั้งใจ

การดึงสีทำงานอย่างไร?

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

Method	How it works	Best for
Frequency counting	Counts pixel colors, returns the most common	Quick palettes, simple images
Median cut	Splits color space into boxes recursively	Photos with clear color regions
K-means clustering	Groups pixels into k color centroids	Complex images, gradients

Frequency counting ทำงานได้รวดเร็ว แต่จะให้น้ำหนักกับพื้นหลังขนาดใหญ่ เช่น ท้องฟ้ามากเกินไป
Median cut สร้างความสมดุลระหว่างความเร็วและคุณภาพ และเป็นสิ่งที่โปรแกรมแก้ไขส่วนใหญ่ใช้
K-means ให้ผลลัพธ์ที่ดู "ออกแบบ" ที่สุด แต่ทำงานช้ากว่า

รายละเอียดทางปฏิบัติ: ควรลดขนาดภาพให้เหลือประมาณ 100×100 pixels เสมอ ก่อนทำการสกัดสี ภาพถ่ายความละเอียดเต็มจะมีพิกเซลหลายล้านรายการ และรายละเอียดที่เพิ่มมาไม่ได้เปลี่ยนสีหลัก แต่เพียงแค่ทำให้การนับช้าลง เอกสาร Mozilla canvas pixel manipulation reference บันทึกขั้นตอนการอ่านพิกเซลที่เป็นรากฐานของเครื่องมือสกัดสีที่ทำงานบนเบราว์เซอร์

มือที่ถือพัดตัวอย่างผ้าหลากสี แสดงให้เห็นว่าการสกัดสีจัดกลุ่มเฉดสีที่คล้ายกันได้อย่างไร

สีใดที่คุณควรเก็บไว้บ้าง?

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

เก็บสีหลักที่โดดเด่นเพียงสีเดียว — คือสีที่ครอบคลุมพื้นที่มากที่สุด มักจะเป็นโทนกลางหรือโทนท้องฟ้า
เก็บสีรองหนึ่งถึงสองสีที่สนับสนุนสีหลักนั้น
เก็บสีเน้น (accent color) เพียงสีเดียวสำหรับปุ่มเรียกร้องให้ดำเนินการ (calls to action) และส่วนไฮไลต์
ทิ้งสีที่ใกล้เคียงกันมากเกินไป; สีเขียวสองสีที่ห่างกันสามเฉด อาจถูกมองว่าเป็นสีโคลนเพียงสีเดียว
ทิ้งสีดำบริสุทธิ์และสีขาวบริสุทธิ์ เว้นแต่การออกแบบนั้นต้องการใช้เป็นโทนกลาง

พาเลทสีรุ้งที่สดใสแสดงช่วงเฉดสีทั้งหมดที่การดึงสีจำกัดให้เหลือเพียงสีตัวแทนไม่กี่สี

กฎ 60-30-10 สำหรับการใช้พาเลตต์สี

เมื่อคุณได้สีของคุณแล้ว กฎ 60-30-10 จะบอกคุณว่าควรใช้แต่ละสีในสัดส่วนเท่าใด นี่คือแนวทางจากงานออกแบบภายในที่สามารถนำมาปรับใช้กับอินเทอร์เฟซได้อย่างลงตัว

บทบาท	สัดส่วน	ตำแหน่งที่ใช้
Dominant	60%	Backgrounds, large surfaces
Secondary	30%	Cards, sidebars, supporting areas
Accent	10%	Buttons, links, highlights

ตัวอย่างการใช้งาน: หากคุณดึงสีจากภาพถ่ายป่า คุณอาจได้สีเขียวหลัก (dominant green), สีเขียวรองที่อ่อนกว่า, และสีน้ำตาลสำหรับเน้น (accent) สีเขียวจะกลายเป็นพื้นหลังของหน้าเว็บในสัดส่วน 60%, สีเขียวที่อ่อนลงใช้เติมเต็มการ์ดในสัดส่วน 30%, และสีน้ำตาลใช้ขับเคลื่อนปุ่ม call-to-action ในสัดส่วน 10% ผลลัพธ์ที่ได้จึงให้ความรู้สึกเหมือนอยู่ในป่าโดยที่ไม่ใช่ภาพป่าจริง

การตรวจสอบสีเพื่อการเข้าถึง ทำได้อย่างไร?

พาเลทที่ผ่านการทดสอบความเปรียบต่าง (contrast) ไม่ได้หมายความว่าเป็นพาเลทที่สมบูรณ์ ข้อความจำเป็นต้องมีอัตราส่วนความเปรียบต่างขั้นต่ำเมื่อเทียบกับพื้นหลังเพื่อให้สามารถอ่านได้ และมาตรฐานคือ WCAG 2.1

ข้อความปกติจำเป็นต้องมีอัตราส่วนความเปรียบต่างอย่างน้อย 4.5:1 เมื่อเทียบกับพื้นหลัง
ข้อความขนาดใหญ่ (18pt หรือ 14pt bold) ต้องการ 3:1
ควรตั้งเป้าที่ 7:1 สำหรับข้อความเนื้อหาเมื่อทำได้ เพราะจะช่วยผู้อ่านที่มีสายตาไม่ดี

ทดสอบทุกคู่สีที่คุณวางแผนจะใช้จริง — เช่น สีเน้นบนพื้นหลังหลัก ข้อความบนพื้นหลังรอง และอื่น ๆ WebAIM contrast checker เป็นเครื่องมือฟรีมาตรฐาน และ W3C WCAG 2.1 contrast guidance กำหนดสูตรทางคณิตศาสตร์ หากสีเน้นไม่ผ่านเมื่ออยู่บนพื้นหลังของคุณ ให้ทำการทำให้สีเน้นเข้มขึ้น หรือทำให้พื้นหลังสว่างขึ้นจนกว่าจะผ่านเกณฑ์

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

การเปลี่ยนพาเลทให้เป็นระบบการออกแบบ

ชุดของ hex code ไม่ถือเป็นระบบจนกว่าคุณจะกำหนดบทบาทและสร้างรูปแบบที่หลากหลาย นี่คือขั้นตอนที่แยก Mood Board ออกจากสิ่งที่นักพัฒนาสามารถนำไปใช้ได้จริง

ตั้งชื่อแต่ละสีตามบทบาท (primary, secondary, accent, surface, text) ไม่ใช่ตามเฉดสี
สร้างรูปแบบที่สว่างและมืดสำหรับแต่ละสี เพื่อให้รองรับทั้งสองโหมด
กำหนดสถานะ hover และ active โดยการปรับค่าความอิ่มตัว หรือความสว่างเล็กน้อย
ล็อกพาเลทไว้ในตัวแปรของเครื่องมือของคุณเพื่อให้คงที่

เมื่อกำหนดพาเลทเรียบร้อยแล้ว ส่วนอื่น ๆ ของการสร้างก็จะเร็วขึ้น ปุ่มส่วนหัว และการ์ดทั้งหมดจะดึงข้อมูลจากโทเค็นที่มีชื่อเดียวกัน สำหรับรูปภาพที่จะอยู่ในระบบนี้ ให้รันผ่าน image compressor และ image resizer เพื่อให้ตรงกับงบประมาณด้านประสิทธิภาพของระบบ คู่มือ image optimization guide จะครอบคลุมการตัดสินใจเกี่ยวกับรูปแบบและขนาดที่ช่วยให้งานออกแบบที่มีสีสันยังคงรวดเร็ว

เมื่อการดึงสีออกมาให้พาเลทที่ผิดพลาด

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

ท้องฟ้าที่สว่างจ้าครอบงำจำนวนสี ทำให้คุณได้สีน้ำเงินถึงห้าเฉด
สีเน้น (accent color) ที่เล็กแต่สำคัญอาจถูกละเลยเนื่องจากพื้นที่ที่ปกคลุมมีน้อย
สิ่งแปลกปลอมจากการบีบอัด (Compression artifacts) นำมาซึ่งสีรบกวนที่ดูเหมือนเป็นสีตัวอย่างจริง
ภาพถ่ายที่มีแสงสว่างผสมกันจะทำให้เกิดโทนกลางที่ขุ่นมัว

เมื่อพาเลทที่ดึงออกมาดูไม่ถูกต้อง ให้ถ่วงน้ำหนักการดึงสีโดยใช้ผลกระทบทางสายตา — luminance, saturation, และ edge contrast — แทนที่จะเป็นความถี่ดิบ หรือเลือกภาพต้นฉบับอื่น ภาพต้นฉบับเป็นปัจจัยที่ใหญ่ที่สุดว่าพาเลทที่ได้จะใช้งานได้หรือไม่ ดังนั้นให้เลือกภาพที่มีอารมณ์ที่คุณต้องการอยู่แล้ว สำหรับงานแบรนด์สไตล์ลิสต์ที่คุณต้องการพาเลทสองโทนแบบควบคุมแทนการสุ่มตัวอย่าง duotone effect guide จะแนะนำวิธีการแมปภาพไปยังสีสองสีโดยเจตนา หากสีที่ดึงออกมาจะใช้สำหรับโลโก้หรือชุดไอคอนด้วย SVG to PNG converter จะช่วยให้เครื่องหมายเวกเตอร์ยังคงคมชัดในทุกขนาดที่พาเลทสัมผัส

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

คุณจะดึงสีจากรูปภาพได้อย่างไร?

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

ฉันควรเก็บสีที่ดึงออกมาสีไหนบ้าง?

ให้เลือกสีหลัก (dominant color) ซึ่งเป็นสีที่พบมากที่สุด, สีเน้น (accent) หนึ่งถึงสองสี, และสีกลาง (neutral) ลบสีที่ใกล้เคียงกันเกินไป หรือสีที่ปรากฏในพื้นที่เล็ก ๆ เท่านั้น โดยทั่วไปห้าสีก็เพียงพอแล้ว เพราะการมีชิ้นส่วนของสีมากเกินไปจะทำให้พาเลทดูยุ่งเหยิง ใช้กฎ 60-30-10 ในการนำไปใช้

กฎ 60-30-10 คืออะไร?

เป็นแนวทางการกำหนดสัดส่วน: 60 เปอร์เซ็นต์ของงานออกแบบด้วยสีหลัก, 30 เปอร์เซ็นต์ด้วยสีรอง, และ 10 เปอร์เซ็นต์ด้วยสีเน้น สิ่งนี้ช่วยให้พาเลทดูสมดุลแทนที่จะดูขุ่นมัว สีที่ดึงออกมาจะถูกนำไปใช้ในบทบาทเหล่านี้โดยตรง

ฉันจะตรวจสอบการเข้าถึง (accessibility) ของสีได้อย่างไร?

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

พาเลทควรมีกี่สี?

โดยทั่วไปคือห้าสี: สีหลัก, สีรองหนึ่งถึงสองสี, สีเน้น, และสีกลาง การมีชิ้นส่วนของสีมากเกินไปจะทำให้การใช้งานอย่างสม่ำเสมอทำได้ยาก ห้าสีสามารถนำไปใช้กับกฎสัดส่วน 60-30-10 ได้อย่างชัดเจน

ฉันจะนำพาเลทที่ดึงออกมาไปใช้ในการออกแบบได้อย่างไร?

ใช้กฎ 60-30-10: สีหลักครอบคลุม 60 เปอร์เซ็นต์ของการออกแบบ (โดยปกติคือพื้นหลัง), สีรอง 30 เปอร์เซ็นต์ (พื้นผิว, องค์ประกอบรอง), และสีเน้น 10 เปอร์เซ็นต์ (ปุ่มกระตุ้นการดำเนินการ, ส่วนที่ต้องการเน้น) สัดส่วนนี้ช่วยให้พาเลทดูสมดุลแทนที่จะดูขุ่นมัว ให้ลบสีที่ดึงออกมาใด ๆ ที่ไม่เข้ากับบทบาททั้งสามนี้ แม้ว่าสีเหล่านั้นจะปรากฏอยู่ในภาพต้นฉบับก็ตาม