Softonic

เครื่องมือสร้างชุดสีไตรแอด (Triadic Color Generator)

ขั้นตอน 1 / 2
ถัดไป

ชุดสีไตรแอดใช้สามสีที่อยู่ห่างกัน 120° บนวงล้อสี โดยแดง เหลือง น้ำเงิน คือตัวอย่างที่เราเรียนกันมาตั้งแต่เด็ก ผลลัพธ์ที่ได้สมดุลและมีชีวิตชีวาโดยธรรมชาติ โดยไม่ดูวุ่นวาย เลือกสีพื้นฐานด้วยตัวเลือกสี แล้วเครื่องมือนี้จะแปลงสีเป็น HSL หมุนเฉดสี (hue) ไป +120° และ +240° พอดี โดยคงความอิ่มตัวและความสว่างไว้เท่าเดิม จากนั้นแสดงตัวอย่างสีทั้งสามพร้อมโค้ด HEX คลิกที่ตัวอย่างสีเพื่อคัดลอกโค้ดได้ทันที

ขั้นตอนการสร้างพาเลตสี

  1. 1

    เลือกสีพื้นฐาน

    ใช้ตัวเลือกสีเพื่อกำหนดเฉดสีที่จะเป็นแกนของพาเลต

  2. 2

    ระบบคำนวณสีคู่อีกสองสี

    เครื่องมือหมุนเฉดสีไป +120° และ +240° ในปริภูมิ HSL โดยความอิ่มตัวและความสว่างคงเดิม ชุดสีจึงกลมกลืนกัน

  3. 3

    อ่านโค้ด HEX

    Base, Triadic +120° และ Triadic +240° แสดงเรียงกัน แต่ละช่องมีป้ายกำกับค่า HEX หกหลัก

  4. 4

    คลิกเพื่อคัดลอก

    คลิกที่ตัวอย่างสีหนึ่งครั้ง โค้ด HEX จะถูกคัดลอกไปยังคลิปบอร์ด พร้อมนำไปวางใน CSS, คอนฟิก Tailwind หรือโปรแกรมออกแบบของคุณ

ทำไมชุดสีไตรแอดจึงให้ความรู้สึกสมดุล

สามสีที่อยู่ห่างกันเท่า ๆ กันบนวงล้อสีไม่มีเฉดสีที่ใกล้เคียงกันเลย จึงตัดกันอย่างชัดเจน ขณะที่ระยะห่าง 120° ช่วยเลี่ยงการปะทะตรง ๆ แบบคู่สีตรงข้าม (ที่ห่างกัน 180°) สายตาจึงมองว่าสีเหล่านี้แตกต่างกันแต่กลมกลืน

คณิตศาสตร์เบื้องหลังตัวอย่างสี

เครื่องมือจะแปลงสี HEX ของคุณเป็น HSL บวกค่าเฉดสีเพิ่ม 120° และ 240° แล้วแปลงกลับ เนื่องจากมีเพียงเฉดสีที่เปลี่ยน สามสีจึงมีความอิ่มตัวและความสว่างเท่ากันเสมอ ผลพลอยได้ที่น่าสนใจคือ การหมุน 120° พอดีเทียบเท่ากับการหมุนเวียนค่าแชนเนลแดง เขียว น้ำเงิน ดังนั้นสีคู่ของ #6366F1 (สีเริ่มต้น) คือ #F16366 และ #66F163 ซึ่งเป็นคู่ไบต์สามคู่เดิมในลำดับใหม่

ตัวอย่างชุดสีไตรแอดจากเครื่องมือนี้:

สีพื้นฐาน Triadic +120° Triadic +240°
#FF0000 (แดง) #00FF00 #0000FF
#6366F1 (คราม) #F16366 #66F163
#E67E22 (ส้ม) #22E67E #7E22E6
#0EA5E9 (ฟ้าใส) #E90EA5 #A5E90E
#2ECC71 (เขียวมรกต) #712ECC #CC712E

ใช้ชุดสีไตรแอดอย่างพอดี

สามสีสดที่ความอิ่มตัวเต็มพิกัดนั้นแรงเกินไป แนวทางที่ใช้ได้ผลคือ:

  • สีหลักหนึ่งสี (60%) สำหรับหน้าตาอินเทอร์เฟซหลัก
  • สีรองหนึ่งสี (30%) สำหรับจุดเน้นและส่วนต่าง ๆ
  • สีเด่นหนึ่งสี (10%) สำหรับองค์ประกอบโต้ตอบสำคัญ

อีกวิธีคือเริ่มจากสีพื้นฐานโทนอ่อน เพราะสีคู่ทั้งสองจะรับความอิ่มตัวมาจากสีพื้นฐาน ชุดสีที่ได้จึงนุ่มนวลตามไปด้วย

ไตรแอดเทียบกับการจับคู่สีแบบอื่น

แบบแผนสี โครงสร้าง ความรู้สึก
คู่สีตรงข้าม 2 สี ห่างกัน 180° คอนทราสต์สูง โดดเด่น
สีข้างเคียง 3 สี ติดกัน สงบ กลมกลืน
ไตรแอด 3 สี ห่างกัน 120° สมดุล มีชีวิตชีวา
เททราด 4 สี รูปสี่เหลี่ยมผืนผ้า หลากหลาย แต่คุมสมดุลยากกว่า
ตรงข้ามแบบแยก สีหลัก + สีเกือบตรงข้าม 2 สี หนักแน่นโดยไม่ปะทะกัน

เคล็ดลับสำหรับการออกแบบ UI

  • ตรวจคอนทราสต์ทุกคู่สี ชุดสีไตรแอดไม่ได้รับประกันคอนทราสต์ตามเกณฑ์ WCAG AA เมื่อวางข้อความทับสี ควรตรวจสอบเป็นรายคู่
  • เลือกสีเดียวสำหรับปุ่มเรียกให้ทำ (CTA) และใช้ให้สม่ำเสมอ ปุ่มที่สลับไปมาระหว่างสีในชุดจะทำให้ผู้ใช้สับสน
  • ใช้เฉดอ่อนและเฉดเข้ม เพื่อขยายพาเลตโดยไม่ต้องเพิ่มเฉดสีที่สี่
  • ทดสอบในโหมดมืด ชุดสีที่ดูดีบนพื้นขาวอาจแยกจากกันได้ยากบนพื้นหลังเข้ม ให้ปรับความสว่างตามเหมาะสม

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

การแบ่งวงล้อสี 360° ออกเป็นสามส่วนเท่ากันทำให้แต่ละเฉดสีอยู่ห่างกันมากที่สุดโดยไม่มีสีใดข่มสีอื่น ระยะที่แคบกว่านี้จะกลายเป็นชุดสีข้างเคียง ส่วนระยะที่กว้างกว่าจะทำลายความห่างเท่ากันและมักกลายเป็นชุดสีตรงข้ามแบบแยก (split-complementary) แทน

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

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

สีเทาล้วนมีความอิ่มตัวเป็นศูนย์ จึงไม่มีเฉดสีให้หมุน ตัวอย่างสีทั้งสามจึงออกมาเหมือนกัน ลองขยับสีพื้นฐานเข้าหาเฉดสีใดก็ได้ แล้วทั้งสามช่องจะแยกสีทันที

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

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

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น