ตัวสร้างพาเลท – พาเลทสีกลมกลืน

สร้างพาเลทสีกลมกลืนได้ทันที

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

ตัวสร้างพาเลทนี้รับสีฐานใดก็ได้และใช้กฎความกลมกลืนมาตรฐานเพื่อสร้างชุดสีเสริม ป้อนสีในรูปแบบ HEX, RGB หรือ HSL และสลับระหว่างประเภทความกลมกลืนเพื่อสำรวจการผสมผสานที่แตกต่างกัน

ประเภทความกลมกลืนสีอธิบาย

• เสริม — สองสีที่อยู่ตรงข้ามกันบนวงล้อสี (ห่างกัน 180°) คอนทราสต์สูง การผสมผสานที่โดดเด่น
• คล้ายกัน — สามสีที่อยู่ติดกันบนวงล้อสี (ห่างกัน 30°) กลมกลืนตามธรรมชาติและคอนทราสต์ต่ำ
• สามสี — สามสีที่เว้นระยะเท่ากันรอบวงล้อ (ห่างกัน 120°) สดใสและสมดุล
• แยกเสริม — สีฐานบวกสองสีที่อยู่ติดกับสีเสริมของมัน (150° และ 210°) นุ่มนวลกว่าสีเสริมบริสุทธิ์
• สี่สี (สี่เหลี่ยม) — สี่สีที่เว้นระยะเท่ากันรอบวงล้อ (ห่างกัน 90°) พาเลทที่หลากหลายและซับซ้อน

วิธีใช้ตัวสร้างพาเลท

1. ป้อนสีฐาน — พิมพ์ค่า HEX, RGB หรือ HSL หรือใช้ตัวเลือกสีในตัว
2. เลือกประเภทความกลมกลืนจากตัวเลือก
3. ลากจุดที่เชื่อมกันบนวงล้อเพื่อเปลี่ยนเฉดสีและความอิ่มตัว จากนั้นปรับความสว่าง
4. ดูพาเลทที่สร้างแสดงเป็นสวอตช์สี
5. คัดลอกค่า HEX หรือ RGB สำหรับสวอตช์ใดก็ได้ด้วยคลิกเดียว
6. สลับระหว่างประเภทความกลมกลืนเพื่อเปรียบเทียบพาเลทที่แตกต่างกัน

เมื่อใดที่ควรใช้ตัวสร้างพาเลท

• เริ่มโครงการออกแบบใหม่และต้องการโทนสีที่สมดุล
• สร้างอัตลักษณ์แบรนด์รอบสีหลักเฉพาะ
• สร้างธีม UI ด้วยสีเน้นที่กลมกลืน
• สำรวจความสัมพันธ์ของสีสำหรับภาพประกอบหรือศิลปะ
• สร้างพาเลทอย่างรวดเร็วสำหรับการนำเสนอหรือต้นแบบ

ความกลมกลืนหลักและรูปแบบเสริม

ความกลมกลืนทุกแบบสร้างตัวอย่างสี 5 สี แบบสีคู่ตรงข้ามมีสีหลัก 2 สี แบบสีคล้าย สามสี และแยกเสริมมี 3 สี ส่วนแบบสี่สีมี 4 สี ที่เหลือเป็นรูปแบบเสริมซึ่งปรับความอิ่มสีหรือความสว่าง

สร้าง 5 สีจากสีฐานหนึ่งสี

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

ใช้ HEX, RGB, HSL และ OKLCH

ช่องข้อมูลรองรับ HEX, RGB, HSL และ OKLCH คัดลอกสีแต่ละสีเป็น HEX หรือ RGB หรือคัดลอกทั้ง 5 สีเป็นรหัส HEX ตัวพิมพ์ใหญ่คั่นด้วยจุลภาค

รวดเร็ว ฟรี และเป็นส่วนตัว

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

วงล้อแสดงความสัมพันธ์ของสีตามทฤษฎี แต่ไม่รับประกันความอ่านง่าย ใช้ เครื่องมือตรวจสอบคอนทราสต์ เพื่อวัดตาม WCAG และใช้ เครื่องมือแปลงสี เพื่อเปลี่ยนรูปแบบ

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

ความกลมกลืนสีคืออะไร?

ความกลมกลืนสีหมายถึงการผสมผสานของสีที่ดูสบายตาพร้อมกัน การผสมผสานเหล่านี้อิงจากความสัมพันธ์ทางเรขาคณิตระหว่างโทนสีบนวงล้อสี

ควรใช้ประเภทความกลมกลืนใด?

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

สามารถป้อนรูปแบบสีใดได้บ้าง?

คุณป้อน HEX, RGB, HSL หรือ OKLCH ได้ โดยเครื่องมือจะตรวจจับรูปแบบอัตโนมัติ

สีพาเลทคำนวณอย่างไร?

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

สามารถคัดลอกสีที่สร้างได้หรือไม่?

ได้ คัดลอกสีแต่ละสีเป็น HEX หรือ RGB หรือคัดลอกทั้งพาเลทเป็นรหัส HEX ตัวพิมพ์ใหญ่ 5 ค่าที่คั่นด้วยจุลภาค

เครื่องมือนี้ทำงานบนมือถือหรือไม่?

ได้ วงล้อแบบตอบสนองใช้งานด้วยการสัมผัสบนมือถือ และใช้เมาส์หรือแป้นพิมพ์บนคอมพิวเตอร์ได้

เครื่องมือนี้ฟรีหรือไม่?

ได้ ColourPicker.app ใช้งานได้ฟรีโดยสมบูรณ์ ไม่ต้องสมัครสมาชิก

สามารถบันทึกพาเลทที่สร้างได้หรือไม่?

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

วงล้อสีแสดงอะไร?

วงล้อจัดสีตามวงกลม โดยมุมแทนเฉดสี ระยะจากจุดศูนย์กลางแทนความอิ่มสี และแถบเลื่อนแยกใช้ปรับความสว่าง

ทำไมทุกพาเลทจึงมี 5 สี?

ตัวอย่าง 5 สีให้ชุดใช้งานที่สม่ำเสมอ ประกอบด้วยสีหลัก 2–4 สีและรูปแบบเสริมที่จำเป็น

สีหลักและรูปแบบเสริมคืออะไร?

สีหลักสร้างรูปทรงความสัมพันธ์ที่เลือก ส่วนรูปแบบเสริมใช้เฉดสีเดิมโดยปรับความอิ่มสีหรือความสว่าง

ความกลมกลืนของสีรับประกันคอนทราสต์ที่เพียงพอหรือไม่?

ไม่ ความกลมกลืนอธิบายความสัมพันธ์ของเฉดสี ควรวัดคอนทราสต์ WCAG ระหว่างสีพื้นหน้าและพื้นหลังแยกต่างหาก