ดึงพาเลทสีจากรูปภาพใดก็ได้ พร้อมตัวตรวจคอนทราสต์

วิธีการเลือกสี

เครื่องมือจะสร้างสำเนาขนาดเล็กของภาพของคุณ โดยด้านที่ยาวที่สุดไม่เกิน 160 พิกเซล แล้วนับทุกพิกเซลที่ไม่โปร่งใส จากนั้นจัดกลุ่มพิกเซลที่คล้ายกันด้วยการจัดกลุ่มแบบ k-means และรายงานสีเฉลี่ยของแต่ละกลุ่ม โดยเริ่มจากกลุ่มที่ใหญ่ที่สุดก่อน เปอร์เซ็นต์บนแต่ละแถบสีคือสัดส่วนของภาพที่กลุ่มนั้นครอบคลุม

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

ขอสัก 5 ถึง 8 สี ภาพถ่ายสินค้าบนพื้นหลังเรียบๆ มักต้องการ 5 หรือ 6 สี ส่วนภาพไลฟ์สไตล์ที่มีรายละเอียดเยอะจะดูดีกว่าที่ 8 สี หากภาพมีสีที่แตกต่างกันน้อยกว่าที่คุณขอ เครื่องมือจะแจ้งให้ทราบและแสดงสีเท่าที่พบ

การอ่านตารางค่าความต่างของสี

ทุกสีจะถูกจับคู่กับสีอื่นๆ ทุกสี รวมถึงสีขาวและสีดำล้วน และแต่ละช่องจะแสดงอัตราความต่างของสีสำหรับข้อความในสีของแถวบนพื้นหลังที่เป็นสีของคอลัมน์ อัตรานี้เป็นไปตามคำนิยามของ WCAG: (L1 + 0.05) / (L2 + 0.05) โดยที่ L1 และ L2 คือความสว่างสัมพัทธ์ของสีที่สว่างกว่าและสีที่เข้มกว่า ค่าจะอยู่ระหว่าง 1:1 (สีเดียวกันสองครั้ง) ถึง 21:1 (ดำบนขาว)

ป้ายกำกับคือเกณฑ์ที่ WCAG กำหนดไว้:

• AA: อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (เกณฑ์ความสำเร็จ 1.4.3)
• AAA: อย่างน้อย 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ (เกณฑ์ความสำเร็จ 1.4.6)
• ข้อความขนาดใหญ่ หมายถึงอย่างน้อย 18 พอยต์ หรือ 14 พอยต์ตัวหนา (คำนิยามของ WCAG ว่าด้วยขนาดใหญ่)

ช่องที่ทำเครื่องหมาย AA large เหมาะสำหรับหัวข้อตัวใหญ่ แต่จางเกินไปสำหรับคำบรรยายภาพ คำอธิบายเกณฑ์ 1.4.3 ของ W3C ยังระบุว่าไม่ควรปัดเศษอัตรานี้ ดังนั้น 4.499:1 จึงไม่ผ่าน 4.5:1 เครื่องมือจะตัดสินจากตัวเลขที่แน่นอนและแสดงเป็นทศนิยมสองตำแหน่งแบบตัดทิ้ง ไม่ปัดขึ้นเลย

ตัวอย่างการคำนวณ

สมมติว่าภาพถ่ายให้สีกรมท่า #1a3c6e และสีครีม #fdf6e3 แก่คุณ ความสว่างสัมพัทธ์ของสีกรมท่าคำนวณได้ประมาณ 0.046 และของสีครีมประมาณ 0.923 อัตราคือ (0.923 + 0.05) / (0.046 + 0.05) ซึ่งประมาณ 10.1:1 ด้วยตัวเลขที่ปัดเศษแล้ว และ 10.16:1 ด้วยตัวเลขที่แน่นอน ค่านี้ผ่าน AAA สำหรับข้อความทุกขนาด ดังนั้นข้อความสีกรมท่าบนการ์ดปิดท้ายสีครีมจึงปลอดภัยทุกขนาด แต่ถ้าวางสีส้มกลางๆ อย่าง #e07a2e บนสีครีมเดียวกัน อัตราจะลดลงเหลือ 2.78:1 ซึ่งไม่ผ่านแม้กระทั่งข้อความขนาดใหญ่ เก็บสีส้มไว้ใช้กับปุ่มที่มีข้อความสีดำ (6.99:1 ซึ่งผ่าน AA แต่พลาด AAA อยู่นิดเดียว) หรือใช้กับรูปทรงที่ไม่มีคำบรรยาย

การใช้ไฟล์ส่งออก

ไฟล์ส่งออก CSS เป็นบล็อก :root ที่มีคุณสมบัติกำหนดเอง --color-1 สำหรับสีที่ครอบคลุมภาพมากที่สุด ไล่ลงไปตามลำดับ ส่วน JSON มีค่า hex, RGB, HSL ของแต่ละสี และสัดส่วนในภาพ ซึ่งวางลงในไฟล์ดีไซน์โทเคนหรือส่งให้สคริปต์ได้ง่าย เปลี่ยนชื่อตัวแปรเมื่อคุณรู้แล้วว่าสีไหนคือพื้นหลัง สีไหนคือข้อความ และสีไหนคือสีเน้น

สิ่งที่เครื่องมือนี้ไม่ได้ทำ

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

หากคุณไม่อยากทำสิ่งนี้ด้วยมือ

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

เครื่องมือฟรี: คู่มือขนาดโซเชียลมีเดีย · ตัวสร้างกริด Instagram · ตัวสร้าง Open Graph

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

ฉันจะได้พาเลตสีจากภาพได้อย่างไร?

วางภาพลงในเครื่องมือแล้วเลือกจำนวนสีที่ต้องการ ตั้งแต่ 5 ถึง 8 สี เครื่องมือจะจัดกลุ่มพิกเซลที่คล้ายกัน และแสดงสีเฉลี่ยของแต่ละกลุ่มในรูปแบบ HEX, RGB และ HSL โดยเรียงจากกลุ่มใหญ่ที่สุดก่อน พร้อมปุ่มคัดลอกในแต่ละสี

ข้อความต้องใช้อัตราส่วนคอนทราสต์เท่าใด?

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

4.49:1 ใกล้พอที่จะผ่าน AA หรือไม่?

ไม่ W3C ระบุว่าไม่ควรปัดเศษอัตราส่วนที่คำนวณได้เมื่อเปรียบเทียบกับเกณฑ์ ดังนั้น 4.499:1 จึงไม่ผ่าน 4.5:1 เครื่องมือนี้ตัดสินจากตัวเลขที่แน่นอน

ทำไมฉันถึงได้พาเลตเดิมทุกครั้ง?

การจัดกลุ่มเริ่มจากจุดคงที่ คือสีที่พบบ่อยที่สุด จากนั้นจึงเพิ่มสีที่อยู่ไกลจากสีที่เลือกไว้แล้วมากที่สุด ไม่มีการเริ่มแบบสุ่ม ภาพหนึ่งภาพจึงให้คำตอบเดียวเสมอ

ภาพของฉันถูกอัปโหลดไหม?

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