เครื่องสร้าง Color Palette (5

เลือกสีฐาน เลือกรูปแบบทฤษฎีสี และรับ palette ที่ประสานกัน คลิก swatch เพื่อคัดลอกค่า hex แต่ละค่า หรือคัดลอกทั้งหมดพร้อมกันเพื่อใช้ในเครื่องมือออกแบบและ CSS variable

สีฐาน

รูปแบบสี

Palette ที่สร้างขึ้น

#3BDFF6
#3B82F6
#513BF6

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

วิธีการทำงาน

รูปแบบทฤษฎีสีทั้งห้า

Complementary: สองสีที่ปลายตรงข้ามของ color wheel (ห่างกัน 180°) contrast สูง สดใส ใช้สำหรับ accent ปุ่ม call-to-action และการสร้าง focal point

Analogous: สามสีที่อยู่ติดกันบน wheel (ห่างกัน 30°) กลมกลืนและน่าพึงพอใจ contrast ต่ำ พบบ่อยในธรรมชาติ ยอดเยี่ยมสำหรับ background และพื้นผิว UI

Triadic: สามสีที่แบ่งระยะเท่ากัน (ห่างกัน 120°) สดใสและสมดุล ใช้ในงานออกแบบที่ดูสนุกสนานหรือมีพลัง

Tetradic (สี่เหลี่ยมผืนผ้า): สี่สีที่ประกอบเป็นสี่เหลี่ยมผืนผ้า (ห่างกัน 90°) palette ที่สมบูรณ์แต่สมดุลยากกว่า มักใช้หนึ่งสีเป็นหลักและอื่นๆ เป็น accent

Monochromatic: โทน tint และ shade ของ hue เดียว ดูซับซ้อนและเป็นหนึ่งเดียว พบบ่อยในการออกแบบแบบ minimalist และ corporate branding

การเลือกสีเริ่มต้น

สีแบรนด์: โครงการส่วนใหญ่เริ่มจากโลโก้หรือสีแบรนด์ที่มีอยู่ ทดสอบเป็นสีฐานในทั้ง 5 รูปแบบเพื่อหาแบบที่เหมาะกับงานออกแบบ

แรงบันดาลใจ: เลือกสีจากภาพถ่าย งานศิลปะ หรือธรรมชาติ สีสดใส (saturation สูง lightness ปานกลาง) ทำงานได้ดีที่สุดเป็นสีฐาน สีอ่อนมากหรือเข้มมากสร้าง palette ที่ดูซีดเซียว

Accessibility: ตรวจสอบให้แน่ใจว่า palette สุดท้ายมี contrast เพียงพอสำหรับข้อความ ใช้เครื่องมือ contrast checker เพื่อตรวจสอบว่าคู่ foreground/background ตรงตาม WCAG AA (4.5:1 สำหรับข้อความปกติ)

การใช้ palette

CSS variable: กำหนดสีใน palette เป็น :root variable (--color-primary, --color-accent ฯลฯ) เพื่อให้สามารถสลับ theme ได้โดยเปลี่ยนที่เดียว

เครื่องมือออกแบบ: วางค่า hex ลงใน color library ของ Figma, Sketch หรือ Adobe XD เครื่องมือส่วนใหญ่รับ hex โดยตรง บางเครื่องมือรับ HSL หรือ CSS color ที่มีชื่อได้ด้วย

จำกัดการใช้: แม้จะมี 5 สี การออกแบบจริงมักใช้ 2-3 สีอย่างเด่นชัดและส่วนที่เหลือประหยัดๆ กฎ 60-30-10 (60% dominant, 30% secondary, 10% accent) เป็นจุดสมดุลเริ่มต้นที่มีประโยชน์

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

›ควรใช้รูปแบบไหน?

Analogous เป็นตัวเลือกที่ปลอดภัยที่สุดสำหรับงานออกแบบส่วนใหญ่ สามสีใกล้เคียงสร้างความกลมกลืนโดยไม่น่าเบื่อ Complementary ใช้ได้ดีสำหรับการเน้น (ปุ่ม CTA) Monochromatic ดีที่สุดสำหรับแบรนด์ minimal/sophisticated Triadic สำหรับความรู้สึกสนุกสนาน/มีพลัง

›สามารถรับมากกว่า 5 สีได้หรือไม่?

ไม่ได้จากเครื่องมือนี้ เราสร้างรูปแบบ 2-5 สีแบบ canonical สำหรับ palette ที่ใหญ่กว่า ใช้ผลลัพธ์ analogous และสร้าง shade แบบ monochromatic ของแต่ละสี (รวมรูปแบบ)

›อัลกอริทึมใช้ color space แบบ perceptually uniform หรือไม่?

เราใช้คณิตศาสตร์ HSL ซึ่งเร็วและคาดเดาได้ สำหรับผลลัพธ์แบบ perceptually uniform (ดีกว่าสำหรับ palette ที่ปรับ accessibility) เครื่องมือขั้นสูงใช้ OKLCH หรือ CIELAB HSL เพียงพอสำหรับงานออกแบบส่วนใหญ่

›Palette ของฉันจะ accessible หรือไม่?

ไม่โดยอัตโนมัติ รูปแบบทฤษฎีสีรับประกันความกลมกลืนด้านสุนทรียภาพ ไม่ใช่ contrast สำหรับข้อความ ตรวจสอบการรวมข้อความบน background เสมอด้วย contrast checker ก่อนนำขึ้น

›สามารถบันทึก palette ที่ชื่นชอบได้หรือไม่?

ยังไม่ได้ คัดลอก hex code ไปยัง design system หรือบันทึกของคุณ URL palette แบบ bookmarkable อยู่ใน roadmap

›Material Design หรือ Tailwind palette ล่ะ?

นั่นคือระบบที่ได้รับการดูแลล่วงหน้า สร้างรูปแบบฐานที่นี่แล้วค้นหาสี Material/Tailwind ที่คล้ายกัน บางแอปส่ง hex code ที่ใช้ร่วมกับระบบเหล่านี้ได้โดยตรง

›ทำไม palette ของฉันจึงดู 'แบน'?

ถ้าสีฐานของคุณอ่อนมาก (lightness สูง) หรือเข้มมาก (lightness ต่ำ) palette ที่สร้างขึ้นมี dynamic range จำกัด เลือกสีฐานที่มี lightness ปานกลาง (40-60%) และ saturation สูง (70%+) สำหรับผลลัพธ์ที่สดใส

›ข้อมูลออกไปจากเบราว์เซอร์หรือไม่?

ไม่ การคำนวณทั้งหมดทำงานในเครื่อง ไม่มีอะไรถูกส่งไปยังเซิร์ฟเวอร์

การเปิดเผย

NordVPN
Sponsored
Strict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →
Cloudways
Sponsored
Managed cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →