5 เว็บไซต์โค้ดสีและพาเลทสีที่เราเปิดใช้บ่อย พร้อมวิธีเลือกสีให้สวย

เผยแพร่ 2026-05-20 · โดย ทีมงานแตงโมโม.คอม

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

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

พื้นฐานเรื่องโค้ดสีที่ควรรู้ก่อน

เวลาเลือกสีในโปรแกรมหรือเขียนเว็บ เราจะเจอสีในรูปแบบรหัสหลายแบบ แต่ละแบบเป็นเพียงวิธีเขียนสีเดียวกันคนละภาษา

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

ทุกครั้งที่เราต้องการแปลงค่าระหว่างรูปแบบ เรามักใช้ เครื่องมือเลือกสีของเว็บเรา ซึ่งแสดงทั้ง HEX และ RGB ให้คัดลอกได้ทันที

5 เว็บไซต์ที่เราแนะนำ

แต่ละเว็บเหมาะกับงานไม่เหมือนกัน เราจึงบอกว่าเหมาะกับอะไร แทนที่จะจัดอันดับ

1. Adobe Color

เครื่องมือสร้างพาเลทสีที่ใช้วงล้อสี ให้เลือกกฎการจับคู่สี เช่น สีใกล้เคียง สีตรงข้าม หรือสามสีที่เว้นระยะเท่ากัน เหมาะกับคนที่อยากเข้าใจทฤษฎีสีไปพร้อมกับการเลือกสี และมีฟีเจอร์ดึงสีจากรูปภาพที่เราอัปโหลด ดูข้อมูลได้ที่ color.adobe.com

2. Coolors

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

3. Color Hunt

รวมพาเลทสี 4 สีที่ผู้ใช้เผยแพร่ไว้ ดูเป็นแกลเลอรี เลือกตามหมวด เช่น พาสเทล วินเทจ หรือโทนมืด เหมาะกับคนที่อยากเห็นตัวอย่างพร้อมใช้ แล้วหยิบไปปรับใช้ ดูข้อมูลได้ที่ colorhunt.co

4. Happy Hues

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

5. WebAIM Contrast Checker

เว็บนี้ไม่ได้ช่วยเลือกสีให้สวย แต่ช่วยตรวจว่าสีตัวอักษรกับสีพื้นหลังอ่านออกชัดเจนพอหรือไม่ ตามเกณฑ์การเข้าถึงสำหรับคนที่สายตาไม่ดี เราใช้ทุกครั้งก่อนปล่อยหน้าเว็บ ดูข้อมูลได้ที่ webaim.org

หลักเลือกสีง่ายๆ ที่เราใช้เอง

ไม่ต้องจำทฤษฎีสีทั้งหมด หลักไม่กี่ข้อด้านล่างนี้ก็ทำให้งานดูดีขึ้นมาก

1. เลือกสีหลักหนึ่งสี ให้สะท้อนอารมณ์ของงาน เช่น น้ำเงินให้ความรู้สึกน่าเชื่อถือ เขียวให้ความรู้สึกสดชื่น ทองให้ความรู้สึกอบอุ่นและพิเศษ
2. ใช้กฎ 60-30-10 สีพื้นหลังหรือสีกลาง 60 เปอร์เซ็นต์ สีรอง 30 เปอร์เซ็นต์ และสีเน้น 10 เปอร์เซ็นต์ จะดูสมดุล
3. จำกัดจำนวนสี งานส่วนใหญ่ใช้ 3 ถึง 5 สีก็เพียงพอ ยิ่งเยอะยิ่งควบคุมยาก
4. เช็กความคมชัดของตัวอักษรเสมอ ตัวอักษรสีอ่อนบนพื้นสีอ่อนอ่านยากมาก โดยเฉพาะบนมือถือกลางแดด
5. ดูในสภาพจริง สีบนหน้าจอคอมพิวเตอร์กับบนมือถือหรือบนกระดาษพิมพ์อาจดูไม่เหมือนกัน

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

ตัวอย่างการจับคู่สีสำหรับงานแต่ละแบบ

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

ข้อผิดพลาดที่เจอบ่อย

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

วิธีใช้เว็บเหล่านี้ให้ได้ผลใน 10 นาที

เวลาเริ่มงานใหม่ เราใช้ขั้นตอนสั้นๆ นี้เสมอ ซึ่งช่วยให้ตัดสินใจได้เร็วและไม่วนอยู่กับการเปลี่ยนสี

1. เปิด Coolors หรือ Color Hunt เพื่อหาแรงบันดาลใจ เลือกพาเลทที่ชอบมาสองถึงสามชุด
2. ใช้ Adobe Color ปรับเฉดและดูว่าสีเข้ากันตามหลักวงล้อสีหรือไม่
3. เปิด Happy Hues ดูว่าสีที่ชอบถ้าใช้บนหน้าเว็บจริงจะดูเป็นอย่างไร
4. จดรหัส HEX ของสีหลัก สีรอง และสีเน้นลงในโน้ต แล้วตั้งชื่อให้จำง่าย
5. เปิด WebAIM Contrast Checker ตรวจคู่สีตัวอักษรกับพื้นหลังทุกคู่ที่จะใช้จริง

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

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

สรุป

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