สกัดพาเลตต์ตัวอย่างก่อน จากนั้นใช้การเลือกสีที่แม่นยำและการแก้ไขด้วยตนเองเพื่อตัดสินใจว่าสีใดที่เหมาะกับโครงการของคุณ เปิด เครื่องมือเลือกสีจากรูปภาพ.
อัปโหลดและดึงจานสีเริ่มต้น
เปิดเครื่องมือเลือกสีรูปภาพและอัปโหลดรูปภาพที่รองรับหนึ่งรูป หรือลองใช้ตัวอย่าง การดึงข้อมูลอัตโนมัติจะอัปโหลดต้นฉบับไปยังเซิร์ฟเวอร์ ตัวอย่างในคู่มือนี้คือ collage-botanical.jpg ซึ่งเป็นรูปถ่าย 1200 x 900 ของดอกไม้ ใบไม้ และพื้นหลังสีพีช
ปล่อยให้ สีที่จะดึง อยู่ที่ 6 และเลือก เด่นชัด สำหรับตัวอย่าง เด่นชัด จะเน้นสีหลักของรูปภาพ ในขณะที่ สดใส จะให้ความสำคัญกับสีสันที่โดดเด่นมากกว่า คำขอสามารถใช้ 3 ถึง 12 สี รูปภาพที่มีกลุ่มสีที่มองเห็นได้ชัดเจนน้อยกว่าอาจส่งคืนจำนวนสีที่น้อยกว่า
ผลลัพธ์ เด่นชัด จริงประกอบด้วย #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA กลุ่มที่ใหญ่ที่สุดคือ #E3B49F ที่ประมาณ 28.88% ของพิกเซลที่มองเห็นได้ที่สุ่มตัวอย่าง การดึงข้อมูลใช้ตัวอย่าง 512 x 384 เปอร์เซ็นต์เหล่านั้นไม่ใช่การสำรวจสำมะโนที่แม่นยำของรูปภาพความละเอียดเต็ม
สีของจานสีอาจเป็นค่าเฉลี่ยของสีใกล้เคียง เลือกพิกเซลเฉพาะเมื่อคุณต้องการค่าของรายละเอียดเล็กๆ น้อยๆ
เลือกและปรับแต่งสีแต่ละสี
คลิกหรือแตะรูปภาพเพื่อตรวจสอบพิกเซลด้วยแว่นขยาย โฟกัสรูปภาพและใช้ปุ่มลูกศรเพื่อเลื่อนทีละพิกเซล, Shift บวกปุ่มลูกศรเพื่อเลื่อนทีละสิบ, จากนั้นกด Enter เพื่อเลือก คัดลอก HEX, RGB หรือ HSL ด้วยปุ่มคัดลอกเฉพาะ หรือใช้ เพิ่มลงในจานสี
เลือกแถบสีเพื่อเปลี่ยนค่า HEX หรือสีของแถบนั้น เลื่อนไปทางซ้ายหรือขวา หรือลบออก การเพิ่มสีที่กำหนดเองต้องใช้ค่า HEX ตามที่คุณเลือก ล็อกสีจะคงแถบสีที่เลือกไว้เมื่อมีการรีเฟรชพาเลตต์หรือเมื่อการตั้งค่าการสกัดสีที่เปลี่ยนไปสร้างพาเลตต์เริ่มต้นชุดใหม่
การสุ่มตัวอย่างและความโปร่งใสมีตัวเลือกสีต้นฉบับและสีผสมบนพื้นหลัง สีต้นฉบับจะรวมค่าความทึบในรหัสที่คัดลอกเมื่อเกี่ยวข้อง ส่วนสีผสมจะแสดงพิกเซลที่ผสมบนพื้นหลังตัวอย่างที่เลือก แถบสีในพาเลตต์จะเป็นค่า RGB แบบทึบ สีที่แก้ไขและเลือกมาจะไม่มีการประมาณค่าเปอร์เซ็นต์ต้นฉบับ
รูปภาพที่เบราว์เซอร์ถอดรหัสได้จะใช้ตัวอย่าง sRGB ของเบราว์เซอร์ หากมีการใช้ตัวอย่างแบบปรับมาตรฐาน เครื่องมือเลือกสีจะระบุสีและพิกัดว่าเป็นค่าโดยประมาณอย่างชัดเจน
ตัวอย่างในคู่มือนี้
สีที่จะสกัด: 6; สีหลัก; ไม่มีการเปลี่ยนแปลงหรือล็อกด้วยตนเอง; บันทึกเป็น: PNG การสกัดอัตโนมัติสุ่มตัวอย่าง 512 x 384 พิกเซล
- รูปภาพต้นฉบับ
- 1200 x 900 พิกเซล
- สีที่สกัดออกมา
- 6 สีทึบ
- การ์ดพาเลตต์
- 600 x 500 พิกเซล
- ดาวน์โหลด PNG แล้ว
- 9,163 ไบต์
ตรวจสอบคู่สีข้อความและพื้นหลัง
เปิดตรวจสอบความต่างสี ตั้งค่าข้อความและพื้นหลังด้วยตัวควบคุมสี ป้อนรหัส HEX หรือใช้สีที่เลือกสำหรับทั้งสองฝั่ง ตัวอย่างข้อความแบบสดช่วยให้คุณเปรียบเทียบทั้งสองสีได้ และอัตราส่วนจะมาพร้อมกับผลลัพธ์ Normal AA, Normal AAA, Large AA และ Large AAA แยกกัน
เลือกคู่สีสำหรับวัตถุประสงค์ที่ต้องการแทนที่จะสมมติว่าทุกสีที่สกัดออกมาสามารถใช้เป็นข้อความได้ สีพีชอ่อนและสีม่วงอ่อนอาจเข้ากันได้ดีในรูปภาพ แต่เป็นคู่สีข้อความและพื้นหลังที่ไม่เหมาะสม
ตัวควบคุมนี้ตรวจสอบเฉพาะคู่สีนั้นเพื่อความต่างของข้อความเท่านั้น ไม่ใช่การตรวจสอบการเข้าถึงที่สมบูรณ์และไม่ได้ตัดสินว่าการจัดพิมพ์ การโต้ตอบด้วยแป้นพิมพ์ หรือส่วนที่เหลือของการออกแบบนั้นใช้งานได้หรือไม่
อัตราส่วนความต่างที่ผ่านเกณฑ์เป็นการตรวจสอบที่มีประโยชน์ ไม่ใช่การรับประกันว่าทั้งหน้าจะเข้าถึงได้ง่าย
คัดลอกค่าหรือส่งออกจานสี
สำหรับการส่งต่องานอย่างรวดเร็ว ให้คัดลอกรหัสแต่ละรายการหรือใช้คัดลอกสี HEX ของพาเลตต์ สำหรับไฟล์ ให้เลือกบันทึกเป็นและเลือกเริ่ม PNG จะสร้างรูปภาพพาเลตต์ที่มีป้ายกำกับ SVG จะเก็บแถบสีและป้ายกำกับไว้เป็นเนื้อหาเวกเตอร์ CSS จะให้ตัวแปรสีที่มีหมายเลข JSON จะประกอบด้วยค่า HEX, RGB และ HSL
ตัวอย่างหกสีที่ไม่ได้แก้ไขจะส่งออก palette.png ที่ขนาด 600 x 500 พิกเซล และ 9,163 ไบต์ ลำดับแถบสีจะตรงกับพาเลตต์ พาเลตต์สุดท้ายของคุณอาจมีสีตั้งแต่ 1 ถึง 12 สีหลังจากแก้ไข แม้ว่าจำนวนเริ่มต้นอัตโนมัติจะแตกต่างกันก็ตาม
ดาวน์โหลดก่อนออกจากหน้าหรือรีเฟรช การส่งออกขั้นสุดท้ายจะอัปโหลดสีต้นฉบับและสีที่เลือกเพื่อประมวลผลบนเซิร์ฟเวอร์ โดยจะสร้างไฟล์พาเลตต์ใหม่และไม่เปลี่ยนสีหรือแทนที่รูปภาพต้นฉบับ
PNG และ SVG เป็นข้อมูลอ้างอิงทางภาพที่สะดวก CSS และ JSON มีประโยชน์เมื่อขั้นตอนถัดไปต้องการค่าสีที่นำกลับมาใช้ใหม่ได้
คำถามที่พบบ่อย
เครื่องมือดูดสีให้สีเดียวกับการสกัดอัตโนมัติหรือไม่?
ไม่จำเป็น ค่าที่เลือกจะอธิบายพิกเซลต้นฉบับหรือพิกเซลตัวอย่างเฉพาะ การสกัดอัตโนมัติจะจัดกลุ่มพิกเซลที่สุ่มตัวอย่างและสามารถส่งคืนค่าเฉลี่ยของสีได้
พิกเซลโปร่งใสนับรวมด้วยหรือไม่?
พิกเซลที่โปร่งใสเต็มที่จะถูกแยกออกจากการสกัด พิกเซลที่โปร่งใสบางส่วนจะมีน้ำหนักลดลง การสุ่มตัวอย่างต้นฉบับสามารถแสดงความทึบได้ แต่แถบสีพาเลตต์ที่ส่งออกจะเป็นสีทึบ
เกิดอะไรขึ้นกับสีที่ล็อกไว้เมื่อฉันรีเฟรช?
สีที่ล็อกไว้จะยังคงอยู่ในพาเลตต์ในขณะที่สีที่สกัดใหม่จะเติมเต็มตำแหน่งอื่น สีที่เก็บไว้หรือแก้ไขแล้วจะไม่ถูกกำหนดเปอร์เซ็นต์รูปภาพที่สร้างขึ้นเอง
ฉันสามารถใช้สิ่งนี้สำหรับสีแบรนด์ที่แน่นอนได้หรือไม่?
ป้อนค่า HEX ที่ทราบโดยตรงหรือเลือกพิกเซลต้นฉบับที่เหมาะสม แสงของภาพ การบีบอัด การจัดการสี และตัวอย่างที่ปรับมาตรฐานสามารถเปลี่ยนค่าที่สุ่มตัวอย่างได้ ดังนั้นพาเลตต์รูปภาพอัตโนมัติจึงไม่ใช่ข้อพิสูจน์ของข้อกำหนดแบรนด์ดั้งเดิม
สร้างพาเลตต์ที่คุณสามารถนำไปใช้ในการออกแบบถัดไปของคุณ
ลองใช้ตัวอย่างหรือใช้ไฟล์ของคุณเอง และตรวจสอบผลลัพธ์ก่อนแชร์
