สร้างชุดสีแบรนด์จากภาพสินค้าของคุณเอง

แบรนด์เล็กจำนวนมากมีไฟล์โลโก้แต่ไม่มีรายการสี สีอยู่ในตัวสินค้า ทั้งขวด ฉลาก กล่อง หรือเนื้อผ้า เมื่อถึงเวลาทำโฆษณา ภาพขนาดย่อ หรือสไตล์คำบรรยาย ก็มักจะมีคนดูรหัสสีจากภาพแล้วหวังว่าจะถูก

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

ทำไมต้องเริ่มจากสินค้า ไม่ใช่กระดานแรงบันดาลใจ

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

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

ขั้นที่ 1: เลือกและครอบภาพ

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

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

ขั้นที่ 2: ดึงห้าถึงแปดสี

ลากภาพแต่ละภาพไปวางในเครื่องมือดึงสี แล้วขอ 5 หรือ 6 สีสำหรับภาพสินค้าที่สะอาด หรือ 8 สีสำหรับภาพที่มีรายละเอียดมาก เครื่องมือจะจัดกลุ่มพิกเซลที่คล้ายกัน และแสดงค่าเฉลี่ยของแต่ละกลุ่ม เรียงจากกลุ่มใหญ่สุดก่อน พร้อมสัดส่วนของภาพที่แต่ละสีครอบคลุม จุดเริ่มต้นคงที่ ภาพเดียวกันจึงให้ชุดสีเดียวกันเสมอ และสีเน้นเล็กๆ ที่สดใส เช่นฝาสีแดงบนขวดสีขาว จะได้ช่องสีของตัวเอง แทนที่จะถูกเฉลี่ยหายไป

ดึงสีจากทุกภาพและมองหาสีที่ซ้ำกัน สีเหล่านั้นคือแบรนด์ สีที่ปรากฏในภาพเดียวมักเป็นพื้นหลังหรือแสง

ขั้นที่ 3: กำหนดหน้าที่ให้ทุกสี

ชุดสีจะมีประโยชน์ก็ต่อเมื่อแต่ละสีมีบทบาท แบรนด์ส่วนใหญ่ต้องการสี่บทบาท:

พื้นหลัง: สีที่เลย์เอาต์ส่วนใหญ่วางอยู่บน มักเป็นสีพื้นฐานของบรรจุภัณฑ์ หรือสีกลางอ่อนๆ
ข้อความ: สีเข้มที่อ่านได้บนพื้นหลัง สีดำเกือบสนิทใช้ได้ สีแบรนด์เข้มจะดีกว่า หากผ่านการตรวจ contrast
สีเน้น: สีที่โดดเด่น ใช้กับปุ่ม สติ๊กเกอร์ราคา หรือคำที่ไฮไลต์เพียงคำเดียว
สีรอง: สีกลางหนึ่งหรือสองสีสำหรับกล่อง เส้นคั่น และข้อความรอง

อย่าใช้ทุกสีที่ภาพให้มา ชุดสีที่มีชื่อห้าสี พร้อมหน้าที่ชัดเจน จะทำให้โฆษณาหนึ่งร้อยชิ้นสอดคล้องกันได้ ส่วนสิบสองสีทำไม่ได้

ขั้นที่ 4: ตรวจ contrast ก่อนนำไปใช้กับทุกอย่าง

คู่สีที่ดูดีบนจอคอมขนาดใหญ่ อาจอ่านยากบนโทรศัพท์กลางแดด และยากกว่ามากสำหรับคนที่สายตาไม่ดี แนวทาง Web Content Accessibility Guidelines ของ W3C ให้ตัวเลขสำหรับเรื่องนี้คืออัตราส่วน contrast ซึ่งอยู่ระหว่าง 1:1 (สีเดียวกันสองครั้ง) ถึง 21:1 (ดำบนขาว) ค่าขั้นต่ำคือ:

	ข้อความปกติ	ข้อความขนาดใหญ่
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

ตามนิยามของ WCAG ข้อความขนาดใหญ่หมายถึงขนาดอย่างน้อย 18 pt หรือ 14 pt ตัวหนา และตัวเลขเหล่านี้เป็นเกณฑ์ที่เข้มงวด แนวทางเรื่อง 1.4.3 ของ W3C ระบุว่าอัตราส่วนที่คำนวณได้ไม่ควรปัดเศษ ดังนั้น 4.499:1 ไม่ถึง 4.5:1

WCAG ถูกเขียนขึ้นสำหรับเนื้อหาเว็บ ไม่ใช่โฆษณา แต่เหตุผลเดียวกันใช้ได้กับข้อความทุกอย่างบนหน้าจอ รวมถึงคำบรรยายที่ฝังในวิดีโอและข้อความบน end card

ตัวอย่างการใช้งาน

สมมติว่าบรรจุภัณฑ์ของคุณให้สีกรมท่า #1a3c6e สีครีม #fdf6e3 และสีส้ม #e07a2e

สูตรคือ (L1 + 0.05) / (L2 + 0.05) โดย L1 คือความสว่างสัมพัทธ์ของสีที่สว่างกว่า และ L2 ของสีที่เข้มกว่า ความสว่างสัมพัทธ์มีค่าตั้งแต่ 0 สำหรับดำ ถึง 1 สำหรับขาว สีกรมท่าได้ประมาณ 0.046 สีครีมประมาณ 0.923 และสีส้มประมาณ 0.300

ข้อความสีกรมท่าบนสีครีม: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096 ประมาณ 10.1 เมื่อใช้ตัวเลขที่ปัดแล้ว และ 10.16:1 แบบแม่นยำ ซึ่งผ่านระดับ AAA ทุกขนาด นี่คือคู่หลักของคุณ
ข้อความสีส้มบนสีครีม: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350 ประมาณ 2.78:1 ซึ่งไม่ผ่านแม้กับข้อความขนาดใหญ่ สีส้มไม่ควรใช้กับคำบนสีครีม
ข้อความสีดำบนสีส้ม: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05 ซึ่งได้ 7.0 เมื่อใช้ตัวเลขที่ปัด แต่แม่นยำคือ 6.99:1 ผ่าน AA สำหรับข้อความทุกขนาด แต่ต่ำกว่า AAA เล็กน้อย ใช้กับป้ายปุ่มได้ดี
ข้อความสีครีมบนสีกรมท่า: เป็นคู่เดียวกับคู่แรก จึงได้ 10.16:1 เท่ากัน การสลับคู่สีไม่เคยเปลี่ยนอัตราส่วน

ดังนั้นหน้าที่แทบจะเลือกเองได้: พื้นหลังสีครีม ข้อความสีกรมท่า และสีส้มเป็นรูปร่างของสีเน้นที่มีคำสีดำอยู่บนนั้น (สีกรมท่าบนสีส้มได้เพียง 3.65:1 ซึ่งผ่าน AA เฉพาะข้อความขนาดใหญ่เท่านั้น) เครื่องมือแสดงตารางทั้งหมดในครั้งเดียว ทุกสีเทียบกับทุกสีอื่น รวมถึงขาวและดำ โดยแต่ละช่องได้เกรด AAA, AA, AA large หรือ Fail

ขั้นที่ 5: จดไว้ครั้งเดียว

ส่งออกชุดสีเป็น CSS custom properties หรือ JSON และเก็บไว้ข้างไฟล์โลโก้ เมื่อตัดสินใจแล้วให้ตั้งชื่อตัวแปรตามหน้าที่: --brand-bg, --brand-text, --brand-accent อ่านเข้าใจง่ายกว่า --color-3 ที่อีกหนึ่งเดือนข้างหน้า ใส่บรรทัดใต้แต่ละสีเพื่อระบุว่าคู่สีใดผ่านการตรวจแล้ว เพื่อไม่ให้ใครต้องตรวจซ้ำ

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

การใช้ชุดสีในโฆษณาและโพสต์

คำบรรยายและซับไตเติล: สีข้อความของคุณบนกล่องที่เป็นสีพื้นหลัง หรือกลับกัน ตรวจคู่สีก่อนเสมอ
End card: สีพื้นหลังพร้อมโลโก้และหนึ่งบรรทัดในสีข้อความของคุณ สีเน้นสามารถเติมรูปปุ่มอยู่เบื้องหลังข้อความเรียกร้องให้ดำเนินการสั้นๆ ได้
ภาพขนาดย่อและปก: สีเน้นหนึ่งสี คำใหญ่ที่อ่านง่ายหนึ่งคำ และพื้นหลังเยอะๆ
QR code บนบรรจุภัณฑ์: สีแบรนด์ใช้ได้หากเข้มกว่าบรรจุภัณฑ์อย่างชัดเจน เครื่องมือสร้าง QR code ของเราจะเตือนเมื่อ contrast ต่ำ

Hermoso อยู่ตรงไหน

Hermoso คือเอเจนต์การตลาดด้วย AI มันค้นหาโฆษณาที่ได้ผลอยู่แล้วในตลาดของคุณ สร้างโฆษณารูปภาพและวิดีโอที่สอดคล้องกับแบรนด์ โพสต์และตั้งเวลาไปยังบัญชีโซเชียลของคุณเอง และเปิดแคมเปญโฆษณาแบบจ่ายเงินบนบัญชีโฆษณาของคุณเอง เมื่อคุณเพิ่มแบรนด์จากเว็บไซต์ ระบบจะเรียนรู้สินค้า โลโก้ และชุดสีของคุณ คำบรรยายและ end card จะปิดไว้จนกว่าคุณจะขอ และเมื่อขอแล้ว คุณสามารถตั้งสีของข้อความ กล่อง และ end card ด้วยรหัสสี hex เพื่อให้คู่สีที่คุณตรวจไว้ที่นี่คือคู่ที่ถูกนำไปใช้จริง Hermoso ใช้งานได้ในเว็บแอป หรือภายใน Claude, ChatGPT และ Cursor ผ่านเซิร์ฟเวอร์ MCP ของ Hermoso

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

ฉันจะหารหัส hex ของสีสินค้าได้อย่างไร

ครอบภาพที่สะอาดให้เหลือเฉพาะสินค้าหรือบรรจุภัณฑ์ แล้วลากไปวางในเครื่องมือดึงชุดสี เครื่องมือจะแสดงสีหลักเป็น HEX, RGB และ HSL ลองใช้สองหรือสามภาพ แล้วเก็บสีที่ซ้ำกัน

ข้อความต้องการอัตราส่วน contrast เท่าใด

ตาม WCAG 2.2 ระดับ AA ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วนระดับ AAA ต้องการ 7:1 และ 4.5:1 ข้อความขนาดใหญ่คือขนาดอย่างน้อย 18 pt หรือ 14 pt ตัวหนา

4.49:1 ผ่านเกณฑ์ AA หรือไม่

ไม่ผ่าน W3C ระบุว่าเมื่อเทียบกับค่าขั้นต่ำ ไม่ควรปัดอัตราส่วน ดังนั้น 4.499:1 จึงไม่ถึง 4.5:1

ชุดสีแบรนด์ควรมีกี่สี

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

สีจากภาพถ่ายแม่นยำหรือไม่

ไม่ใช่ สีเหล่านั้นคือสิ่งที่กล้องบันทึกได้ภายใต้แสงนั้น ซึ่งใกล้เคียงกับสินค้า แต่ไม่เหมือนสเปกการพิมพ์หรือหมึก หากมีค่าทางการ ให้ใช้ค่านั้น