จับคู่สี & วงล้อสี ทฤษฎีสีตรงข้าม สีข้างเคียง พาสเทล (Color Palette & Harmony)

คำนวณสีคู่ตรงข้าม สีข้างเคียง ไตรแอด และเฉดสีพาสเทล พร้อมจำลอง UI Mockup และคัดลอกโค้ดสีทันที

จับคู่สี & วงล้อสี (Color Harmony)

คำนวณสีคู่ตรงข้าม สีข้างเคียง และชุดสีตามทฤษฎีวงล้อสี โทนพาสเทลมินิมอล

360° Color Wheel

เลือกสีหลัก (Base Color):

โทนพาสเทลยอดนิยม:

ทฤษฎีการจับคู่สี (Color Harmony):

💡 สีตรงข้าม (Complementary): 2 สีที่อยู่ตรงข้ามกัน 180° บนวงล้อสี ให้ความตัดกันเด่นชัด ช่วยให้ปุ่มหรือข้อความสำคัญโดดเด่นขึ้นมาทันที

เฉดสีอ่อน - เข้มของสีหลัก (Shades & Tints):

ชุดสีที่จับคู่ได้ (4 สี)

Complementary Harmony

✨ จำลองการนำไปใช้งานจริง (Live UI Mockup) Card / Button / Tag Preview

NEW COLLECTION AnyKit Studio

จับคู่สีที่ลงตัว ยกระดับงานดีไซน์ของคุณ

ตัวอย่างการผสมผสานสีหลักและสีคู่ตรงข้ามสำหรับพื้นหลัง ปุ่มกด และองค์ประกอบกราฟิก

💡 คลิกที่การ์ดสีเพื่อคัดลอกรหัส HEX รายตัว ✓ WCAG Contrast Ready

คู่มือการจับคู่สีและทฤษฎีวงล้อสี (Color Harmony & Color Wheel Guide)

คลิกอ่านคู่มือ & สาระน่ารู้

ทฤษฎีการจับคู่สีหลักบนวงล้อสี 360 องศา (Color Harmonies):

สีคู่ตรงข้าม (Complementary): ทำมุม 180° ตรงข้ามกัน ให้ความคมชัด ตัดกันอย่างโดดเด่น ดึงดูดสายตาสูงสุด

สีข้างเคียง (Analogous): ทำมุมติดกัน ±30° ถึง ±45° ให้ความกลมกลืน สบายตา นุ่มนวล สมูท

สีตรงข้ามเยื้อง (Split-Complementary): ทำมุม 150° และ 210° เด่นสะดุดตาแต่ไม่ตัดกันแข็งกร้าวเกินไป

สามเหลี่ยมสมดุล (Triadic): ทำมุมเท่ากัน 120° ให้ความมีชีวิตชีวา สมดุล มีพลัง และน่าตื่นตาตื่นใจ

สี่เหลี่ยมสมดุล (Tetradic / Square): ทำมุม 90° คู่สีตัดกัน 2 คู่ เพิ่มความหลากหลายและมิติของชิ้นงาน

สีโทนเดียวไล่เฉด (Monochromatic): เฉดสีเดิมแต่ปรับความสว่าง (Lightness) ให้ความรู้สึกเรียบหรู มินิมอล

ตัวอย่างการทำงาน / การคำนวณ: ตัวอย่างการประยุกต์ใช้งานคู่สีจริงในงานออกแบบ:
• การออกแบบเว็บไซต์ / แอพ (UI/UX): ใช้สีหลัก 60% (เช่น ม่วงพาสเทล), สีรอง 30% (ขาว/เทาอ่อน), และสีคู่ตรงข้าม 10% สำหรับปุ่ม Call to Action (CTA) เพื่อให้ปุ่มคลิกเด่นชัดที่สุด
• การจัดโทนชุดเสื้อผ้า (Fashion Styling): เลือกจับคู่สไตล์ Analogous (เช่น โทนเบจ-ชานม-น้ำตาล) เพื่อความมินิมอล หรือใช้สไตล์ Complementary เพื่อความชิคสะดุดตา
• งานกราฟิกและสื่อโซเชียล: ใช้พาเลตสีพาสเทลช่วยให้ฟีดดูละมุนตา น่าอ่าน และสร้าง Mood & Tone ที่เป็นเอกลักษณ์

ตารางข้อมูลและเกณฑ์มาตรฐาน

ทฤษฎีการจับคู่สี	องศาบนวงล้อสี	อารมณ์ความรู้สึก / จุดเด่น	กรณีการใช้งานที่เหมาะสม
สีคู่ตรงข้าม (Complementary)	180°	โดดเด่น สะดุดตา คมชัดสูง	ปุ่ม Call to Action, ป้ายโปรโมชั่น, โลโก้
สีข้างเคียง (Analogous)	±30°	กลมกลืน สบายตา นุ่มนวล	ภาพประกอบ, พื้นหลังเว็บไซต์, คอนเทนต์ทั่วไป
สามเหลี่ยมสมดุล (Triadic)	120°	มีพลัง มีชีวิตชีวา หลากหลาย	แบรนดิ้ง, สินค้าแฟชั่น, สื่อโฆษณา
สีโทนเดียว (Monochromatic)	0° (ไล่ระดับ)	เรียบหรู มินิมอล สะอาดตา	พอร์ตโฟลิโอ, แบรนด์มินิมอล, สกินแคร์

คำถามที่พบบ่อยเกี่ยวกับจับคู่สี & วงล้อสี (FAQ)

สีคู่ตรงข้าม (Complementary) ควรนำไปใช้ในงานดีไซน์อย่างไรให้ไม่แสบตา?

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

ทำไมสีโทนพาสเทล (Pastel Colors) ถึงได้รับความนิยมสูง?

เพราะสีพาสเทลมีค่าความสว่าง (Lightness) สูงและลดความอิ่มตัว (Saturation) ลง ทำให้ดูนุ่มนวล สบายตา ลดความรู้สึกล้าของสายตาเมื่อมองหน้าจอนานๆ และสื่อถึงความโมเดิร์น มินิมอล อบอุ่น และเป็นมิตร

ค่า Contrast Ratio (WCAG) มีความสำคัญอย่างไรกับการเลือกคู่สี?

มาตรฐาน Web Content Accessibility Guidelines (WCAG) กำหนดว่าตัวหนังสือและพื้นหลังต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 (ระดับ AA) เพื่อให้ผู้ใช้ทุกคนรวมถึงผู้ที่มีความบกพร่องทางสายตาสามารถอ่านเนื้อหาได้อย่างชัดเจน

สามารถคัดลอกโค้ดสีไปใช้งานในโปรแกรมอื่น เช่น Figma, Canva หรือเขียนโค้ดได้หรือไม่?

ได้ทันที ระบบมีปุ่ม One-Click Copy รหัสสีทั้งรูปแบบ HEX (`#6C5CE7`), RGB, และปุ่มคัดลอกเป็น CSS Variables สำหรับนักพัฒนาเว็บไซต์ได้ในคลิกเดียว