เครื่องมือสร้างพาเลตสี
ความกลมกลืนของสี
Two colors opposite on the color wheel
พาเลตต์ที่สร้างแล้ว
ตัวอย่างพาเลตต์
ส่งออกพาเลตต์
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}รายละเอียดทางเทคนิค
เครื่องมือสร้างพาเลตสีทำงานอย่างไร
เครื่องมือนี้ทำอะไร
เครื่องมือสร้างพาเลตสีจะสร้างชุดสีที่กลมกลืนจากสีฐานใดๆ โดยใช้หลักทฤษฎีสีที่เป็นที่ยอมรับ เลือกสีฐานและเลือกประเภทความกลมกลืนได้ 6 แบบ — สีคู่ตรงข้าม, สีใกล้เคียง, สีสามเส้า, สีสี่เส้า, สีคู่ตรงข้ามแบบแยก, หรือสีเอกรงค์ — เพื่อสร้างพาเลตที่เข้าชุดกันได้ทันที สีที่สร้างขึ้นแต่ละสีจะแสดงค่า HEX, RGB และ HSL พร้อมให้คัดลอกไปใช้ใน CSS, เครื่องมือออกแบบ หรือคู่มือสไตล์ของคุณ
กรณีการใช้งานทั่วไปของนักพัฒนา
นักออกแบบและนักพัฒนาใช้เครื่องมือสร้างพาเลตเมื่อเริ่มโปรเจกต์ใหม่ สร้างระบบดีไซน์ หรือปรับโทนสีแบรนด์ สถานการณ์ที่พบบ่อย ได้แก่ การสร้างสีเน้นแบบคู่ตรงข้ามสำหรับสีแบรนด์หลัก การสร้างชุดสีใกล้เคียงสำหรับงานแสดงข้อมูล การสร้างพาเลตแบบสามเส้าสำหรับธีม UI ที่สดใส และการสำรวจความหลากหลายแบบเอกรงค์สำหรับดีไซน์มินิมอล เครื่องมือนี้ยังมีประโยชน์ในการสร้างชุด CSS custom property และ JSON color token สำหรับระบบดีไซน์
ประเภทความกลมกลืนของสี
ความกลมกลืนของสีอ้างอิงจากวงล้อสี สีคู่ตรงข้ามอยู่ตรงข้ามกัน (180°) และให้คอนทราสต์สูง สีใกล้เคียงอยู่ติดกัน (±30°) และให้ความรู้สึกกลมกลืน สีสามเส้ากระจายเท่าๆ กันที่ช่วง 120° เพื่อความสดใสที่สมดุล สีสี่เส้า (สี่เหลี่ยมผืนผ้า) ใช้สี่สีที่ช่วง 90° สีคู่ตรงข้ามแบบแยกจับคู่สีฐานกับสองสีที่อยู่ติดกับสีคู่ตรงข้ามของมัน สีเอกรงค์จะปรับความสว่างและความอิ่มสีของเฉดเดียวเพื่อให้ได้พาเลตที่นุ่มนวลและเป็นเอกภาพ
ข้อผิดพลาดที่พบบ่อยและกรณีขอบ
พาเลตที่สร้างขึ้นเป็นจุดเริ่มต้น ไม่ใช่ดีไซน์สุดท้าย ควรตรวจสอบอัตราส่วนคอนทราสต์ระหว่างสีที่สร้างขึ้นเสมอเพื่อให้เข้าถึงได้ สีฐานที่อิ่มสีมากหรือมืดมากอาจทำให้ได้พาเลตที่อ่านยาก โปรดจำไว้ว่าสีบนหน้าจอจะแสดงต่างจากงานพิมพ์ ทดสอบพาเลตกับเนื้อหาจริงและองค์ประกอบ UI แทนการพึ่งพาเพียงตัวอย่างสวอตช์
เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด
ใช้เครื่องมือบนเบราว์เซอร์นี้เพื่อสำรวจแบบโต้ตอบและสร้างพาเลตอย่างรวดเร็วระหว่างดีไซน์สปรินต์ สำหรับระบบดีไซน์ที่ใช้จริงในโปรดักชัน ให้ทำการสร้างพาเลตแบบโปรแกรมด้วยไลบรารีอย่าง chroma.js, culori หรือ polished ที่สามารถสร้างความกลมกลืน บังคับอัตราส่วนคอนทราสต์ และผสานเข้ากับ build pipeline ได้