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

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

10 ข้อเท็จจริงเกี่ยวกับสีและพาเลต

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 สำหรับเนื้อความ) โหมดคอนทราสต์สูงอย่างสีคู่ตรงข้ามมักปลอดภัยกว่า

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

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

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

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

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

Related News

You may be interested in these recent stories from our newsroom.

No related news yet for this tool. Our editorial team publishes new pieces every week.

Browse all news →
Advertisement
Pre-footer · AD-W3 728 × 90