เครื่องมือสร้างพาเลตสี

Share:

สร้างพาเลต 5 สีที่กลมกลืนได้ในแตะเดียว — สุ่ม สีคู่ตรงข้าม สีข้างเคียง สามเหลี่ยม หรือสีเดียว ล็อกสีที่ชอบแล้วสุ่มที่เหลือใหม่ คลิกเพื่อคัดลอกค่า HEX ใดก็ได้ และส่งออกการ์ดพาเลตสวย ๆ ทำงานในเบราว์เซอร์ล้วน สร้างทันที

RT-FUN-091 · Fun & Misc

เครื่องมือสร้างพาเลตสี

(หรือกด Space)

Advertisement
After tool · AD-W1 Responsive

วิธีใช้

เลือกโหมดพาเลต

เลือกจาก สุ่ม สีคู่ตรงข้าม สีข้างเคียง สามเหลี่ยม หรือสีเดียว แต่ละแบบคือกฎความกลมกลืนของสีที่กำหนดว่าทั้ง 5 สีสัมพันธ์กันอย่างไร

กดสร้าง หรือกด Space

ทุกครั้งที่กดจะได้พาเลตที่กลมกลืนชุดใหม่ ไม่ถูกใจ? กดอีกครั้ง หรือเคาะแป้น Space เพื่อสุ่มใหม่อย่างรวดเร็ว

ล็อกและคัดลอก

เจอสีที่ชอบใช่ไหม? แตะ 🔓 ของสีนั้นเพื่อล็อกไว้ พอสร้างครั้งต่อไปสีนั้นก็จะคงเดิม คลิกค่า HEX ใดก็ได้ (เช่น #E8622A) เพื่อคัดลอกไปใช้ในงานออกแบบได้ทันที

ดาวน์โหลดหรือแชร์การ์ด

แตะ “ดาวน์โหลดพาเลต” เพื่อบันทึกทั้งชุดเป็นรูปภาพ (พร้อมค่า HEX), “แชร์” เพื่อส่งให้เพื่อนร่วมงาน หรือส่งออกเป็น PDF

เครื่องมือสร้างพาเลตสี: ได้สีสวยในไม่กี่วินาที ด้วยทฤษฎีสี

การเลือกสีมักเป็นขั้นตอนที่ทำให้คนติดขัดในงานออกแบบ สีเดียวดูดี แต่พอเอา 5 สีมารวมกันแบบไม่คิดมันกลับ "ตีกัน" เครื่องมือนี้เปลี่ยนกฎเบื้องหลังความกลมกลืนของสีให้เป็นปุ่มเดียว — มันไม่ได้ยื่นสีสุ่ม 5 สีให้คุณ แต่ประกอบชุดสีที่ "เข้ากันโดยธรรมชาติ" ตามเรขาคณิตของวงล้อสี คุณเพียงเลือก ล็อก และคัดลอกสีที่ชอบไปใส่ในงานออกแบบได้ทันที

ห้าโหมด ห้าความสัมพันธ์

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

"พาเลตที่ดีไม่ได้เกิดจากการเอามารวมกันมั่ว ๆ แต่เรียงร้อยตามความสัมพันธ์"

HEX คืออะไร และทำไมมีอยู่ทุกที่

ชุดอักขระใต้แต่ละสี เช่น #E8622A คือ รหัส HEX ของสีนั้น — "บัตรประจำตัว" สากลของสีบนเว็บ ซอฟต์แวร์ออกแบบ และเครื่องมือดิจิทัลแทบทุกอย่าง ขึ้นต้นด้วย # ตามด้วยเลขฐานสิบหกหกหลัก แทนความเข้มของช่องสีแดง เขียว และน้ำเงิน คลิกหนึ่งครั้งเพื่อคัดลอก แล้ววางลงใน CSS, Figma หรือสไลด์ สีจะตรงกันเป๊ะ ทุกสีที่เครื่องมือนี้สร้างมาพร้อมรหัส HEX พร้อมนำไปใช้

ขอพูดถึงคอนทราสต์สักนิด

นอกจากสวยแล้ว พาเลตยังต้องใช้งานได้จริง: ข้อความต้องมีคอนทราสต์เพียงพอกับพื้นหลังจึงจะอ่านออก (มาตรฐานการเข้าถึง WCAG แนะนำอย่างน้อย 4.5:1 สำหรับเนื้อความ) ป้ายค่า HEX บนการ์ดจะสลับระหว่างตัวอักษรดำกับขาวโดยอัตโนมัติตามความสว่างของแต่ละช่องสี เพื่อให้อ่านง่ายอยู่เสมอ — เป็นตัวเตือนที่ดีให้ตรวจคอนทราสต์ทุกครั้งที่นำสีเหล่านี้ไปใช้กับข้อความและพื้นหลัง เครื่องมือทั้งหมดทำงานในเบราว์เซอร์ของคุณ สร้างทันที โดยไม่อัปโหลดสิ่งใด

Advertisement
After how-to · AD-W2 Responsive

นิวตันโค้งสเปกตรัมให้เป็นวงกลมในปี 1666

01

รหัส HEX เข้ารหัสสีแดง เขียว และน้ำเงินในเลขฐานสิบหก แต่ละช่องตั้งแต่ 00–FF (0–255) — ในทางทฤษฎีแสดงสีได้ราว 16.7 ล้านสี

02

วงล้อสีย้อนกลับไปถึงนิวตัน ผู้ในปี ค.ศ. 1666 ได้ดัดสเปกตรัมให้โค้งเป็นวงกลม — วงล้อสีวงแรก และเป็นรากฐานของ "เฉดสี" ในปัจจุบัน

03

สีคู่ตรงข้าม (อยู่ตรงข้ามกันบนวงล้อ) ให้คอนทราสต์แรงที่สุด — เหมาะกับทีมกีฬาและป้ายเตือน — แต่หากใช้พื้นที่กว้างก็แสบตาที่สุดเช่นกัน

04

นักออกแบบมักใช้กฎ "60-30-10": สีหลัก 60% สีรอง 30% สีเน้น 10% — ทำให้พาเลตเป็นอันหนึ่งอันเดียวกันแต่ยังมีจุดเด่น

05

ตามนุษย์ไวต่อสีเขียวมากที่สุด นั่นจึงเป็นเหตุผลที่สูตรความสว่างให้น้ำหนักสีเขียวสูงสุด (ราว 0.72) สูงกว่าสีแดง (0.21) และน้ำเงิน (0.07) มาก

06

พาเลตสีเดียว (สีเดียวกัน ต่างกันแค่ความสว่าง) แทบไม่มีพลาด จึงเป็นที่นิยมสำหรับแบรนด์และหน้าจอที่ต้องการความเรียบหรูและสำรวม

07

มาตรฐานการเข้าถึง WCAG กำหนดคอนทราสต์อย่างน้อย 4.5:1 ระหว่างเนื้อความกับพื้นหลัง (3:1 สำหรับตัวอักษรขนาดใหญ่) เพื่อรองรับผู้ใช้ที่สายตาเลือนราง

08

สีมีความหมายทางวัฒนธรรมและอารมณ์ที่รุนแรง: สีแดงเดียวกันคือความรื่นเริงในวัฒนธรรมหนึ่ง แต่เป็นคำเตือนในอีกวัฒนธรรม — พาเลตคือการสื่อสาร ไม่ใช่แค่ของประดับ

09

หน้าจอใช้ RGB (แสงแบบบวก) ส่วนงานพิมพ์ใช้ CMYK (หมึกแบบลบ) สี HEX เดียวกันอาจดูต่างกันเล็กน้อยบนหน้าจอกับบนกระดาษ

10

เครื่องมือนี้สร้างพาเลตด้วย HSL (เฉดสี-ความอิ่มตัว-ความสว่าง) เพราะการหมุนตาม "มุมเฉดสี" เป็นวิธีที่เข้าใจง่ายที่สุดในการแสดงความกลมกลืนอย่างสีคู่ตรงข้ามและสามเหลี่ยม

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

  • แต่ละช่องสีจะแสดงรหัส HEX (เช่น #E8622A) คลิกเพื่อคัดลอก แล้ววางลงใน CSS, Figma, Photoshop, สไลด์ หรือที่ใดก็ตามที่รับ HEX — สีจะตรงกันเป๊ะ คุณยังดาวน์โหลดการ์ดพาเลตไว้อ้างอิงได้ด้วย

  • แต่ละแบบอิงเรขาคณิตบนวงล้อสี: สีเดียว = สีเดียวกันแต่ความสว่างต่างกัน (ปลอดภัยที่สุด); สีข้างเคียง = สีที่อยู่ติดกัน (นุ่มนวล); สีคู่ตรงข้าม = สีตรงข้ามกัน (คอนทราสต์สูง); สามเหลี่ยม = สามสีระยะเท่ากัน (สดใส สมดุล); สุ่ม = ปล่อยสีอิสระแต่คุมช่วงความสว่างไว้ เปลี่ยนโหมดแล้วความสัมพันธ์ทั้งชุดก็เปลี่ยนไป

  • แตะ 🔓 บนสีใดสีหนึ่งเพื่อล็อก เมื่อคุณกดสร้างครั้งถัดไป สีที่ล็อกจะคงไว้ และเปลี่ยนเฉพาะสีที่ไม่ได้ล็อก ทำให้คุณเก็บสีที่ชอบไว้สักหนึ่งสองสี แล้วสุ่มสีที่เหลือใหม่จนได้ทั้งชุดที่ลงตัว

  • ใช่ — การกดสร้างแต่ละครั้งจะสุ่มสีเริ่มต้นหนึ่งสี แล้วต่อยอดเป็นชุดที่กลมกลืนตามโหมดที่คุณเลือก สุ่มเฉพาะจุดเริ่มต้นเท่านั้น ส่วนความสัมพันธ์ระหว่างสีจะยึดตามทฤษฎีสีเสมอ ผลลัพธ์จึงเข้ากันไม่ใช่มั่ว

  • เครื่องมือนี้ไม่ได้รับประกันการเข้าถึงโดยอัตโนมัติ มันจะเลือกตัวอักษรสีดำหรือขาวให้แต่ละป้ายอ่านออกตามความสว่างของสี แต่เมื่อคุณนำสีไปใช้กับข้อความและพื้นหลัง ควรตรวจคอนทราสต์ด้วยตนเอง (WCAG แนะนำอย่างน้อย 4.5:1 สำหรับเนื้อความ) โหมดคอนทราสต์สูงอย่างสีคู่ตรงข้ามมักปลอดภัยกว่า

  • ตอนนี้: กดสร้างไปเรื่อย ๆ พอได้สีที่ใกล้เคียงกับที่ต้องการก็ 🔒 ล็อกไว้ แล้วสุ่มสีที่เหลือใหม่ให้ล้อมรอบสีนั้น เรากำลังพิจารณาตัวเลือก “เริ่มจากสีตั้งต้นที่คุณกรอกเอง” ด้วย

  • เป็นภาพ JPEG ความละเอียดสูง แสดงสีทั้งห้าพร้อมค่า HEX ของแต่ละสี เหมาะสำหรับแชร์หรือเก็บไว้ และยังส่งออกเป็น PDF ได้ ภาพทั้งหมดสร้างขึ้นบนอุปกรณ์ของคุณ ไม่ผ่านเซิร์ฟเวอร์

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

  • ทั้งสามเป็นการเขียนสีเดียวกันคนละแบบ RGB ใช้ตัวเลขสามค่า 0–255 แทนแดง เขียว น้ำเงิน; HEX คือ RGB ที่เขียนเป็นฐานสิบหก (#RRGGBB); ส่วน HSL อธิบายด้วยเฉดสี ความอิ่มตัว และความสว่าง ซึ่งใกล้เคียงสัญชาตญาณคนมากกว่า เครื่องมือนี้คำนวณความกลมกลืนภายในด้วย HSL แล้วส่งออกเป็น HEX ที่ใช้ได้ทั่วไป

  • ไม่ พาเลตทุกชุดสร้างขึ้นทันทีในเบราว์เซอร์ของคุณ — ไม่อัปโหลด ไม่เขียนลง URL และไม่เก็บข้อมูลใด ๆ รีเฟรชหน้าแล้วก็เริ่มใหม่ RECATOOLS ยึดหลักไม่จัดเก็บ ไม่ติดตาม

Advertisement
Pre-footer · AD-W3 728 × 90