deep-learning-color-design

ColorMind – เว็บไซต์หาชุดสีสวย ๆ ด้วย Deep Learning !!

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

บทความแนะนำ: แจกเว็บรวมโค้ดสีของทุกแบรนด์ทั่วโลก เซฟเป็น Photoshop & CSS ได้เลย

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

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

แน่นอนว่าหลายคนอาจจะสงสัยว่าแล้วเทคนิคนี้ช่วยหาสีได้ยังไง แอดมินจะสรุปง่าย ๆ ให้ฟังกันครับ

เทคนิคการหาสีของ ColorMind ด้วยเทคนิค GAN

Input และ Output ของ ColorMind

ระบบ GAN หรือ Generative Adversarial Networks เป็นผลงานของนักวิจัยที่มหาวิทยาลัย Cornell ในอเมริกาครับ ซึ่งต่อมาก็มีนักวิจัยที่มหาวิทยาลัย California สร้างสิ่งที่เรียกว่า Pix2Pix ขึ้นมา เป็นการนำเอาระบบ GAN มาเรียนรู้สีบนรูปภาพ เพื่อให้ Pix2Pix สามารถลงสีบนรูปที่ได้รับได้อย่างถูกต้อง

ตัวอย่างการลงสีด้วย Pix2pix ทุกรูปใช้ระบบและข้อมูลเดียวกัน

คุณ jack ผู้สร้าง ColorMind ก็ใช้โมเดลเดียวกันนี้ แต่ใช้ข้อมูลชุดสีจากหลายที่ เช่น Adobe Color และสีจากงานสวย ๆ บน Dribbble เพื่อสอน ColorMind ว่าสีนั้น ๆ ควรจะจับคู่กับสีไหน นอกจากนั้นยังใส่ข้อมูลรูปสวย ๆ ต่าง ๆ เข้าไปเพื่อพัฒนาระบบทุกวัน เพื่อให้ระบบฉลาดขึ้น

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

วิธีการหาชุดสีสวย ๆ ด้วย ColorMind ใน 1 นาที

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

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

วิธีการใช้เครื่องมือใน ColorMind

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

เราสามารถกด Generate ใหม่ได้จนกว่าจะพอใจครับ

ต่อไปเราจะมาดูฟีเจอร์เสริมของ ColorMind กัน ซึ่งแอดมินเห็นแล้วรู้สึกว้าวมาก

สร้างชุดสีสวย ๆ แล้วลอง Preview กับเทมเพลตเว็บ Bootstrap / Material Design ได้ทันที

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

บทความแนะนำ: คู่มือสอนวิธีใช้ Bootstrap 4 ตั้งแต่เริ่มต้น + สิ่งที่ควรรู้ทั้งหมด

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

ชุดสีที่ Generate ถูกเอาไปใช้กับ Bootstrap Template ให้เลย

นอกจากหน้าเว็บ Bootstrap แล้ว ก็มีเทมเพลตอื่น ๆ คือ Paper Dashboard กับ Material Dashboard ให้ลองลงสีกันอีกด้วยครับ

สรุปเครื่องมือ ColorMind

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

แอดมินสนใจมากว่า ML จะเปลี่ยนโลกดีไซน์ไปได้ขนาดไหนครับ ท่านใดมีเครื่องมือดี ๆ ที่ใช้ ML ร่วมกับงานดีไซน์รบกวนมากระซิบบอกแอดมินหน่อยนะครับ 🙂




There are no comments

Add yours

ไม่อยากพลาดบทความดี ๆ ด้าน Web Design, HTML5, CSS3 ใช่มั้ย ?

มาร่วมเป็นส่วนหนึ่งของสมาชิกกว่า 2,500+ คนของ Designil และรับบทความใหม่ ๆ ส่งตรงถึงอีเมลคุณ! (ไม่มีแสปม 100%)

สมัครสมาชิกเรียบร้อยแล้ว! กรุณาเช็คอีเมลของคุณเพื่อกดยืนยันการสมัครสมาชิก