CanDoYa
TH

เครื่องมือสร้างจานสีฟรี

ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก

รูปแบบสี
CSS variable
แชร์เครื่องมือนี้

เครื่องมือสร้างจานสีคืออะไร?

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

วิธีใช้งาน

  1. 1ตั้งค่าสีตั้งต้น. คลิกที่กล่องเลือกสีเพื่อเลือกด้วยตา พิมพ์รหัส hex เช่น #6366f1 หรือกดสุ่มเพื่อเริ่มต้นด้วยสีใหม่
  2. 2เลือกรูปแบบการจับคู่สี. สลับได้ระหว่างคู่ตรงข้าม คู่ตรงข้ามแบบแยกส่วน ข้างเคียง สามเส้า สี่เส้า โทนสีเดียว เฉดเข้ม และเฉดอ่อน จานสีจะคำนวณใหม่ทันที
  3. 3คัดลอกสี. คลิกที่สีใดก็ได้เพื่อคัดลอกรหัส hex ของสีนั้น หรือใช้ปุ่มคัดลอกเพื่อดึงจานสีทั้งหมดเป็น CSS variable

เหมาะกับใคร

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

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

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

ใช่ ฟรี 100% ไม่ต้องสมัครสมาชิก ไม่มีลายน้ำ และไม่จำกัดจำนวนครั้ง สร้างและคัดลอกจานสีได้มากเท่าที่ต้องการ ใช้ได้ทั้งงานส่วนตัวและงานเชิงพาณิชย์

ข้อมูลสีของฉันถูกอัปโหลดไปที่ไหนหรือไม่?

ไม่ การคำนวณจานสีทั้งหมดทำงานอยู่ในเบราว์เซอร์ของคุณด้วย JavaScript ล้วน ๆ สีแบรนด์ ข้อมูลที่พิมพ์ และการคลิกของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใด ๆ

สีคู่ตรงข้ามคืออะไร?

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

จานสีข้างเคียงกับจานสีสามเส้าต่างกันอย่างไร?

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

เฉดเข้มและเฉดอ่อนคืออะไร?

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

จานสีของเว็บไซต์ควรมีกี่สี?

กฎที่นิยมใช้กันคือ 60-30-10 คือสีหลักประมาณ 60% ของหน้าจอ สีรอง 30% และสีเน้น 10% เริ่มต้นด้วยจานสี 3-5 สีจากที่นี่ แล้วเพิ่มเฉดเข้มและเฉดอ่อนของแต่ละสีสำหรับสถานะและพื้นผิวต่าง ๆ

ทำไมจานสีแทบไม่เปลี่ยนสำหรับสีเทาหรือสีดำ?

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