ข้ามไปยังเนื้อหา
ไทยกราฟ English

ทฤษฎีสี

วงจรสี 12 สี: วิธีอ่านและจับคู่สีจากวงล้อสี

วงจรสีคือการนำสี 12 สี ได้แก่ แม่สี 3 สี สีขั้นที่ 2 อีก 3 สี และสีขั้นที่ 3 อีก 6 สี มาเรียงเป็นวงกลมตามลำดับการผสม เพื่อให้เห็นว่าสีไหนใกล้กัน สีไหนตรงข้ามกัน นักออกแบบใช้วงจรสีเป็นแผนที่สำหรับเลือกสีที่เข้ากัน ตั้งแต่สีข้างเคียงที่กลมกลืน ไปจนถึงสีคู่ตรงข้ามที่ตัดกันแรง หน้านี้มีวงจรสีแบบที่เรียนในโรงเรียน วงจรสีแบบจอคอมพิวเตอร์ และวิธีจับคู่สีทั้ง 7 แบบพร้อมโค้ดสี

Portrait of Ploypailin Srisuwan, Thai Design Researcher at ThaiGraph

โดย Ploypailin Srisuwan

Thai Design Researcher & Editor, ThaiGraph ·

ตรวจสอบข้อมูลเมื่อ November 2026

วงจรสี 12 สีแบบแม่สีวัตถุธาตุ (แดง เหลือง น้ำเงิน) เหลืองอยู่บนสุด แล้วเวียนตามเข็มนาฬิกา สีที่อยู่ตรงข้ามกันพอดีคือสีคู่ตรงข้าม

วงจรสี 12 สี มีสีอะไรบ้าง

วงจรสี 12 สีประกอบด้วยแม่สี แดง เหลือง น้ำเงิน สีขั้นที่ 2 ส้ม เขียว ม่วง และสีขั้นที่ 3 ส้มเหลือง ส้มแดง ม่วงแดง ม่วงน้ำเงิน เขียวน้ำเงิน เขียวเหลือง วิธีจำที่ง่ายที่สุดคือวาดสามเหลี่ยมของแม่สีก่อน เติมสีขั้นที่ 2 ตรงกึ่งกลางระหว่างแม่สีแต่ละคู่ แล้วเติมสีขั้นที่ 3 ในช่องที่เหลือ ตารางข้างล่างบอกขั้นของแต่ละสี สีคู่ตรงข้าม และโค้ดสีที่ใช้ทำสื่อหรือใบงานได้ทันที ที่มาของแต่ละขั้นอธิบายละเอียดไว้ในหน้า แม่สีและสีขั้นที่ 1, 2, 3

สีขั้นที่HEXRGBคู่ตรงข้าม
เหลือง 1 #FCE300 252, 227, 0 ม่วง
ส้มเหลือง 3 #FDB813 253, 184, 19 ม่วงน้ำเงิน
ส้ม 2 #F7941D 247, 148, 29 น้ำเงิน
ส้มแดง 3 #F15A24 241, 90, 36 เขียวน้ำเงิน
แดง 1 #E3171B 227, 23, 27 เขียว
ม่วงแดง 3 #B5197A 181, 25, 122 เขียวเหลือง
ม่วง 2 #6A2C8F 106, 44, 143 เหลือง
ม่วงน้ำเงิน 3 #3F3E99 63, 62, 153 ส้มเหลือง
น้ำเงิน 1 #1F4FA3 31, 79, 163 ส้ม
เขียวน้ำเงิน 3 #0E8A8A 14, 138, 138 ส้มแดง
เขียว 2 #2EA44B 46, 164, 75 แดง
เขียวเหลือง 3 #A6CE39 166, 206, 57 ม่วงแดง

สีระบายไม่มีค่า HEX ในตัวเอง ค่าในตารางคือค่าที่ ThaiGraph เลือกให้ดูใกล้สีโปสเตอร์บนจอ ส่วน RGB คำนวณจาก HEX

วงจรสีมาจากไหน

แนวคิดการเรียงสีเป็นวงกลมย้อนไปถึงไอแซก นิวตัน ซึ่งวาดวงกลมสีไว้ในหนังสือ Opticks เพื่อแสดงความสัมพันธ์ของสีในแสง ต่อมาเกอเธ่เสนอวงล้อสีแบบสมมาตรในปี 1810 วงกลมของนิวตันมีแต่สีจากสเปกตรัมและแบ่งช่องไม่เท่ากัน ส่วนวงจรสีของช่างเขียนที่ใช้แดง เหลือง น้ำเงินเป็นหลักคือแบบที่สื่อการเรียนศิลปะของไทย เช่น TruePlookpanya ใช้อธิบายสีขั้นที่ 1, 2, 3 จุดเด่นของวงแบบนี้คืออธิบายการผสมสีระบายได้ตรงกับที่เด็กเห็นในจานสีจริง

วงจรสีแบบ RGB บนจอต่างจากที่เรียนอย่างไร

วงจรสีบนจอคอมพิวเตอร์เรียงตามค่าฮิว (hue) 0–360 องศา โดย 0° คือแดง 120° คือเขียว และ 240° คือน้ำเงิน ตามมาตรฐาน CSS ของ W3C ทำให้สีคู่ตรงข้ามต่างจากวงแบบแม่สีวัตถุธาตุ บนวงแบบที่เรียน แดงคู่กับเขียว แต่บนวงแบบจอ แดงคู่กับไซแอน (ฟ้าอมเขียว) และน้ำเงินคู่กับเหลือง ตัวเลือกสีในโปรแกรมอย่าง Photoshop และ Figma ระบุสีด้วยค่าฮิวแบบนี้ และเครื่องมือหาสีคู่หลายตัวหาสีคู่ด้วยการหมุนฮิว 180° ถ้าเครื่องมือบอกว่าสีคู่ของแดงคือฟ้า ไม่ได้แปลว่าครูสอนผิด แค่เป็นวงคนละแบบ และเพราะเครื่องมือแต่ละตัวอาจใช้วงต่างกัน ควรดูก่อนว่าเครื่องมือที่ใช้อยู่คำนวณจากวงแบบไหน

วงจรสีแบบจอ ทุกช่องคือ hsl(ฮิว, 100%, 50%) ห่างกันช่องละ 30° สีตรงข้ามคือฮิว +180°

ฮิวสีHEXRGB
0° แดง #FF0000 255, 0, 0
30° ส้ม #FF8000 255, 128, 0
60° เหลือง #FFFF00 255, 255, 0
90° เขียวเหลือง #80FF00 128, 255, 0
120° เขียว #00FF00 0, 255, 0
150° เขียวมรกต #00FF80 0, 255, 128
180° ไซแอน #00FFFF 0, 255, 255
210° ฟ้า #0080FF 0, 128, 255
240° น้ำเงิน #0000FF 0, 0, 255
270° ม่วง #8000FF 128, 0, 255
300° แมเจนตา #FF00FF 255, 0, 255
330° ชมพูเข้ม #FF0080 255, 0, 128

วรรณะสี: ครึ่งร้อน ครึ่งเย็น

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

จับคู่สีจากวงจรสี 7 แบบ

การจับคู่สีจากวงจรสีมี 7 แบบที่ใช้กันมาก ได้แก่ สีเอกรงค์ สีข้างเคียง สีคู่ตรงข้าม คู่ตรงข้ามแยก สามเส้า สี่สีแบบสี่เหลี่ยมผืนผ้า และสี่สีแบบสี่เหลี่ยมจัตุรัส ทุกแบบคือการวางรูปทรงเรขาคณิตลงบนวงแล้วอ่านสีที่มุม คู่ตรงข้ามแยกใช้สีที่ห่างจากสีหลัก 150° และ 210° สามเส้าใช้ 120° และ 240° และสี่เหลี่ยมจัตุรัสใช้สีที่ห่างกันทีละ 90° แผนภาพแต่ละแบบข้างล่างแสดงรูปทรงบนวงจรสี 12 สี พร้อมโค้ดสีของชุดนั้น

  • สีเอกรงค์ Monochromatic

    ใช้สีเดียวในหลายระดับความอ่อนเข้ม เรียบ สะอาด และคุมง่ายที่สุด เหมาะกับงานองค์กรและอินโฟกราฟิกที่ต้องการให้ตัวเลขเด่น

    • #B2C9F0
    • #6593E2
    • #2660C5
    • #1A4389
    • #102A56

  • สีข้างเคียง Analogous

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

    • #FDB813
    • #F7941D
    • #F15A24

  • สีคู่ตรงข้าม Complementary

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

    • #E3171B
    • #2EA44B

  • คู่ตรงข้ามแยก Split-complementary

    สีหลักหนึ่งสี กับสองสีที่อยู่ข้างๆ สีตรงข้ามของมัน ยังตัดกันชัด แต่นุ่มกว่าคู่ตรงข้ามตรงๆ มือใหม่ใช้ได้ปลอดภัยกว่า

    • #1F4FA3
    • #FDB813
    • #F15A24

  • สามเส้า Triadic

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

    • #F7941D
    • #6A2C8F
    • #2EA44B

  • สี่สีแบบสี่เหลี่ยมผืนผ้า Tetradic

    สีคู่ตรงข้ามสองคู่ ได้สีให้เล่นมากที่สุด เหมาะกับงานที่ต้องแบ่งหมวดหมู่ เช่น แผนที่หรือตาราง แต่ต้องมีสีเดียวที่นำ

    • #FCE300
    • #F7941D
    • #6A2C8F
    • #1F4FA3

  • สี่สีแบบสี่เหลี่ยมจัตุรัส Square

    สี่สีที่ห่างกันทีละ 90 องศา สนุกและหลากหลาย เหมาะกับงานเด็ก งานเทศกาล หรือแบรนด์ที่ต้องการความเป็นกันเอง

    • #FDB813
    • #E3171B
    • #3F3E99
    • #2EA44B

อยากลองกับสีของตัวเอง ใช้ตัวช่วยหาสีคู่ในหน้า สีคู่ตรงข้ามและการจับคู่สี ใส่สีอะไรก็ได้ แล้วระบบจะคำนวณสีคู่ตรงข้าม สีข้างเคียง และสามเส้าให้ทันที

ใช้วงจรสีในงานจริงอย่างไร

วงจรสีบอกได้ว่าสีไหนเข้ากัน แต่ไม่ได้บอกว่าควรใช้แต่ละสีมากแค่ไหน งานส่วนใหญ่จึงต้องมีสีหลักหนึ่งสีที่กินพื้นที่มาก แล้วให้สีที่เหลือเป็นสีรองและสีเน้น คณะศิลปกรรมศาสตร์ มทร.ธัญบุรี แนะนำว่าเวลาใช้สีตัดกัน ให้สีหนึ่งมีพื้นที่ประมาณ 80% และอีกสีประมาณ 20% และพื้นที่ของสีที่ตัดกันไม่ควรเกิน 10% ของภาพทั้งหมด ลองทำตามลำดับนี้:

  1. เลือกสีหลักจากโลโก้หรือหัวข้องาน แล้วหาตำแหน่งบนวงจรสี
  2. เลือกรูปแบบการจับคู่ ถ้าต้องการความสงบใช้สีข้างเคียงหรือเอกรงค์ ถ้าต้องการจุดเด่นใช้คู่ตรงข้ามหรือคู่ตรงข้ามแยก
  3. ปรับความอ่อนเข้มของแต่ละสีให้ต่างกันชัด อ่านวิธีทำในหน้า เฉดสีและโทนสี
  4. เติมสีกลางอย่างขาว เทา หรือดำ ให้สายตาได้พัก แล้วเช็กว่าตัวหนังสืออ่านออกบนทุกพื้น
  5. ถ้างานต้องพิมพ์ แปลงสีและตั้งไฟล์ตามหน้า CMYK กับ RGB ก่อนส่งโรงพิมพ์

ถ้าต้องการโค้ดสีเพิ่มเติมนอกเหนือจาก 12 สีบนวง ดูได้ที่ รวมโค้ดสี HEX RGB CMYK ซึ่งแยกตามตระกูลสี เช่น โค้ดสีเขียว และ โค้ดสีม่วง

ตรวจสอบข้อมูลเมื่อ November 2026

แหล่งอ้างอิง

  1. วงล้อสีมี 12 สี ประกอบด้วยแม่สี สีขั้นที่ 2 และสีขั้นที่ 3 แบ่งเป็นวรรณะอุ่นและเย็น สีตรงข้ามกันเป็นคู่สี สีข้างเคียงคือสีที่อยู่เคียงกัน และแนวทางสัดส่วน 80:20 กับสีตัดกันไม่เกิน 10%—คณะศิลปกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี — ทฤษฎีการจับคู่สี (Color wheel) (accessed Nov 3, 2026)
  2. สีขั้นที่ 1 คือ แดง เหลือง น้ำเงิน สีขั้นที่ 2 และสีขั้นที่ 3 อีก 6 สี—TruePlookpanya — วงจรสี (Colour Circle) (accessed Nov 3, 2026)
  3. วงล้อสีย้อนไปถึงงานของนิวตัน ซึ่งเสนอวงกลมสีใน Opticks และเกอเธ่เสนอวงล้อแบบสมมาตรในปี 1810 วงล้อสีของสีวาดภาพใช้แม่สีแดง เหลือง น้ำเงิน แดงกับไซแอนเป็นสีคู่ตรงข้ามบนวงแบบ RGB—Wikipedia — Color wheel (accessed Nov 3, 2026)
  4. นิยามชุดสีเอกรงค์ ข้างเคียง (30° และ 330°) คู่ตรงข้าม คู่ตรงข้ามแยก (150° และ 210°) สามเส้า (120° และ 240°) สี่สี (คู่ตรงข้ามสองคู่) และสี่เหลี่ยมจัตุรัส (ห่างกัน 90°)—Wikipedia — Color scheme (accessed Nov 3, 2026)
  5. มุมฮิว 0° คือแดง 120° คือเขียว 240° คือน้ำเงิน ของ sRGB และนิยามความอิ่มตัวกับความสว่างของ hsl()—W3C — CSS Color Module Level 4 (accessed Nov 3, 2026)