เครื่องมือเลือกสีออนไลน์สำหรับออกแบบเว็บไซต์

Natk

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

บทความนี้จะรวบรวมไกด์เว็บไซต์สำหรับการเลือกชุดสีให้ถูกหลักการ UX และเข้าถึงได้ด้วยแบบฉบับ Universal design และยังถูกหลัก Accessibility อีกด้วย

มาดูกันเลยว่าวันนี้จะมีเครื่องมืออะไรกันบ้าง

เครื่องมือเลือกสี ตัวช่วยใน การทำเว็บไซต์

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

การทำเว็บไซต์ เลือกสีด้วยเครื่องมือจาก Muzli
การทำเว็บไซต์ เลือกสีด้วยเครื่องมือจาก Muzli

Muzli Colors — สร้างชุดสีด้วย Muzli ช่วยแบ่งสีตามการจับคู่ สีคู่ตรงกันข้าม, สีใกล้เคียง, สี Monochrome เป็นต้น

Stylify — เว็บนี้จะช่วยเลือกสีทั้งหมดออกมาให้เราจากเว็บไซต์ที่เราใส่เข้าไป

Paletton — ตัวเลือกชุดสีแบบแอดวานซ์ แบ่งตาม Monochrome, Adjacent, Triad, Tetrad และ Free style ตามใจชอบ

Adobe color เครื่องมือเลือกสี สำหรับการทำเว็บไซต์
Adobe color เครื่องมือเลือกสีสำหรับ การทำเว็บไซต์

Adobe Color CC — อีกเว็บไซต์สำหรับวางแผนการเลือกสี แอดนัทใช้เว็บนี้บ่อยมากเพราะว่าสามารถเลือกชุดสีได้หลายแบบตั้งแต่ Monochromatic, Triad, Complementary สีคู่ตรงข้าม, Split complementary, Double split complementary และอีกมากมาย

Colormind - AI color tool
Colormind – AI color tool

Colormind — ตัวนี้เจ๋งมาก เป็นตัวเลือกสีด้วยระบบ AI มีฟีเจอร์ที่เราสามารถใส่รูปถ่ายเข้าไปได้ พอกด Generate ตัว Colormind จะช่วยเจนสีออกมาให้เราทั้ง Palette สี และสีที่จะใช้ใน UI ของเรา เช่น ปุ่ม, ฟอร์ม, dropdown, nav

Canva — เว็บที่มากด้วยความสามารถ ทำได้ทั้งโปสเตอร์, หน้าปก Facebook, Youtube cover , หน้าปกหนังสือ , ภาพประกอบบทความ , ออกแบบโลโก้ , มีระบบดูดสีจากภาพ มาช่วยตกแต่งงานของเราให้สวยขึ้น ถ้างานของเราสีเข้ากับภาพ งานเราก็จะสวยและดูสมูธมากยิ่งขึ้นค่า

uiGradients — ใครที่เป็นสาย Gradient ต้องไม่พลาดกับเว็บไซต์นี้ รวบรวม Gradient สวย ๆ ไว้เพียบ ถ้าใครไม่ชอบอันนี้เรามีอีกอันที่ใช้บ่อยค่ะ webgradients อันนี้สีสมูทมาก เราชอบเอามาทำภาพปก cover ของ Designil

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

ถ้าใครอยากได้ที่ดูดสีบน Browser เราขอแนะนำ ColorZilla เอาไว้ดูดสีเว็บหรือภาพถ่ายของคนอื่นใน Google :D

สุดท้ายนี้ถ้าจะไม่แนะนำก็ไม่ได้ คือตัว Tool ของ Leonado

สำหรับคนที่สนใจทำ Palette สีของตนเองด้วยระบบ HSL แล้วล่ะก็ นัทขอแนะนำทูลที่ชื่อว่า Leonado ช่วยออกแบบ Generate ค่าสี โดยปรับสีตาม Saturation & Lightness ให้เราแบบสมูทมาก มีค่า Contrast ที่ถูกหลักการของ Accessiblity อีกด้วย

Leonado tool - เครื่องมือเลือกสีให้ UI ตัวช่วย ออกแบบเว็บไซต์
การทำเว็บไซต์ ด้วย Leonado tool – เครื่องมือเลือกสีให้ UI ตัวช่วย ออกแบบเว็บไซต์

อ่านจบแล้ว? บทความเลือกสีรอคุณอยู่


Reference:
Muzli design blog

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย | ประสบการณ์ทำงาน 11 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด