สร้างชุดสี

เลือกสีพื้นฐานแล้วรับพาเลตเต็ม, คอมพลีเมนทารี แอนาโลกัส ไทรแอดิก เตตระแอดิก หรือโมโนโครมาติก คัดลอกสีใดก็ได้เป็น HEX, RGB หรือ HSL ไม่มีข้อมูลออกจากเบราว์เซอร์

สร้างชุดสี ทำงานอย่างไร

Color Scheme Generator สร้าง color palettes ที่สมบูรณ์จากสีพื้นฐานเดียวที่คุณเลือก: complementary (ตรงข้ามบน hue wheel), analogous (hues ที่อยู่ติดกัน), triadic (สาม hues ที่เว้นระยะเท่ากัน), tetradic (สี่ hues ในสอง complementary pairs) และ monochromatic (lightness และ saturation ที่แตกต่างกันของ hue เดียวกัน) Logic ของ palette ทั้งหมดทำงานในเบราว์เซอร์ ไม่มีสิ่งใดที่คุณป้อนออกจากอุปกรณ์

แต่ละ palette ที่สร้างขึ้นแสดง swatches พร้อมค่า HEX และ RGB ที่พร้อมคัดลอก ให้นักออกแบบมีจุดเริ่มต้นที่อิงทฤษฎีสีแทนการเดา เนื่องจาก generator ทำงานออฟไลน์ได้หลังจากโหลดหน้าครั้งแรก คุณสามารถทดลองอย่างอิสระกับสีแบรนด์ระหว่างการประชุมกับลูกค้าโดยไม่ต้องการการเชื่อมต่อเครือข่าย ป้อนสีพื้นฐานของคุณในสัญกรณ์ใดก็ได้ที่คุณมี ไม่ว่าจะเป็น HEX, RGB หรือ HSL และทุก swatch ที่สร้างขึ้นจะแสดงกลับมาในทั้งสามรูปแบบ เพื่อให้คุณคัดลอกรูปแบบที่เครื่องมือออกแบบของคุณต้องการได้

เขียนโดย Bastien Sulyan

วิธีใช้ สร้างชุดสี ทีละขั้นตอน

เลือกสีพื้นฐานโดยใช้ color picker หรือพิมพ์ค่า HEX
เลือกประเภท harmony จากแท็บ: complementary, analogous, triadic, tetradic หรือ monochromatic
Palette swatches ปรากฏทันทีพร้อมค่า HEX และ RGB
คลิก swatch ใด ๆ เพื่อคัดลอกค่า HEX ไปยัง clipboard
ปรับสีพื้นฐานเพื่อสำรวจ variations และดู palette ทั้งหมดอัปเดต

กรณีการใช้งานที่พบบ่อย

นักออกแบบที่เริ่มต้น brand identity ใหม่เลือกสีหลักและสร้าง triadic palette เพื่อเสนอการรวมสามสีให้ลูกค้า
นักพัฒนาที่สร้าง dark-mode theme ใช้ monochromatic palette เพื่อสร้าง tints และ shades จากสีแบรนด์เดียว
นักสร้างเนื้อหาเลือก analogous palette เพื่อเลือกสี accent สำหรับการนำเสนอที่ดูกลมกลืนโดยไม่มีความคมชัดที่รุนแรง
นักออกแบบ UI ใช้ complementary palette เพื่อระบุสี accent ที่มีความคมชัดสูงที่โดดเด่นกับสีแบรนด์หลัก

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

Complementary palette ทำงานอย่างไร?

สี complementary คือ hue ที่อยู่ตรงข้ามกับสีพื้นฐานบน HSL color wheel ห่างออกไป 180 องศา การวางสี complementary ข้าง ๆ กันสร้างความคมชัดสูงสุด เครื่องมือแสดงสีพื้นฐานและ complement พร้อม variants ที่สว่างและมืดกว่าของแต่ละตัว

ความแตกต่างระหว่าง triadic และ tetradic palettes คืออะไร?

Triadic palette ใช้สาม hues ที่เว้นระยะเท่ากัน 120 องศาบน color wheel Tetradic palette ใช้สี่ hues ที่ 90 องศา ก่อตัวเป็นสอง complementary pairs (เรียกอีกอย่างว่า double complementary หรือ square palette) Tetradic palettes ซับซ้อนกว่าและต้องการการสร้างสมดุลสัดส่วนอย่างระมัดระวังเพื่อหลีกเลี่ยงสัญญาณรบกวนทางสายตา

สีที่ฉันเลือกถูกจัดเก็บหรือส่งที่ใดหรือไม่?

ไม่ การสร้าง palette เป็นเลขคณิตบน HSL representation ของสีพื้นฐาน: หมุนมุม hue ด้วยปริมาณคงที่ เลื่อน lightness และ saturation ทุกการคำนวณทำงานในเครื่องในเบราว์เซอร์ ไม่มีสิ่งใดถูกส่งไปยังเซิร์ฟเวอร์ใด

ฉันสามารถส่งออก palette เป็นไฟล์ CSS หรือไฟล์ design token ได้หรือไม่?

เครื่องมือปัจจุบันแสดง swatches พร้อมค่า HEX และ RGB ที่คัดลอกได้ สำหรับการส่งออก CSS custom properties เต็มรูปแบบหรือ design token JSON ให้คัดลอกค่าด้วยตนเองลงในไฟล์ token หรือ CSS ของโปรเจกต์ ปุ่มส่งออกอาจเพิ่มใน update ในอนาคต

Generator นี้ปฏิบัติตามมาตรฐานทฤษฎีสีอย่างเป็นทางการหรือไม่?

การคำนวณ palette ใช้สูตร hue-rotation มาตรฐานใน HSL color space ซึ่งเป็นแนวทางในเครื่องมือออกแบบเว็บส่วนใหญ่ ความสม่ำเสมอในการรับรู้ที่แน่นอนของ HSL มีข้อจำกัดเมื่อเทียบกับ LAB หรือ OKLCH แต่การหมุน HSL สร้าง palettes ที่ตรงกับแนวทาง color wheel ที่นักออกแบบมักคาดหวัง

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

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือนักพัฒนาทั้งหมด

สร้างชุดสี