ตรวจสอบและแก้ไขข้อบกพร่องของสี HD และที่ไม่ใช่ HD ด้วยตัวเลือกสี

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

เครื่องมือเลือกสีมี GUI สำหรับเปลี่ยนการประกาศ color และ *-color รวมถึงให้คุณสร้าง แปลง และแก้ไขข้อบกพร่องของสีที่ไม่ใช่ HD และสี HD ได้ด้วยการคลิกเพียงครั้งเดียว

ดูข้อมูลเชิงลึกเกี่ยวกับพื้นที่สีใหม่ได้ที่คู่มือสี CSS ความละเอียดสูง

เปิดเครื่องมือเลือกสีและเปลี่ยนสี

ใช้เครื่องมือเลือกสีเพื่อเปลี่ยนค่าสีด้วยการคลิก

  1. เลือกองค์ประกอบในแผงองค์ประกอบ

  2. ในแผงสไตล์ ให้ค้นหาประกาศ color หรือ *-color ที่ต้องการเปลี่ยน

    ทางด้านซ้ายของค่า color หรือ *-color แต่ละค่าจะมีไอคอนสี่เหลี่ยมจัตุรัสขนาดเล็กที่มีตัวอย่างสีนั้น

    แสดงตัวอย่างสี

หากต้องการตรวจสอบค่าที่คำนวณแล้ว ให้ใช้แผงที่คำนวณแล้ว

ค่าที่คำนวณแล้วของ color-mix()

  1. คลิกสี่เหลี่ยมจัตุรัสแสดงตัวอย่างข้างสีเพื่อเปิดเครื่องมือเลือกสี
  2. หากต้องการเปลี่ยนสี ให้ใช้องค์ประกอบ UI ของเครื่องมือเลือกสี

องค์ประกอบตัวเลือกสี

คำอธิบายองค์ประกอบ UI แต่ละรายการของเครื่องมือเลือกสีมีดังนี้

ตัวเลือกสีพร้อมคำอธิบายประกอบ

  1. เฉดสี
  2. เครื่องมือดูดสี ดูใช้เครื่องมือดูดสีเพื่อดูดสีจากทุกที่
  3. คัดลอกไปยังคลิปบอร์ด คัดลอกค่าที่แสดงไปยังคลิปบอร์ด
  4. ค่าที่แสดง อาร์กิวเมนต์ของพื้นที่สีที่เลือก
  5. อัตราส่วนคอนทราสต์ ใช้ได้กับค่า color เท่านั้น นั่นคือส่วนต่างระหว่าง color กับ background-color
  6. ชุดสี คลิกสี่เหลี่ยมจัตุรัสเพื่อเปลี่ยนสีเป็นสีของสี่เหลี่ยมจัตุรัสนั้น
  7. ขอบเขตของช่วงสี บรรทัดนี้ใช้ได้กับพื้นที่สีใหม่และฟังก์ชัน color() เท่านั้น โดยสามารถผลิตสีได้ทั้งแบบ HD และไม่ใช่ HD เส้นนี้ช่วยให้คุณแยกความแตกต่างระหว่างความละเอียดระดับ HD กับความละเอียดที่ไม่ใช่ HD ได้
  8. วงกลมสี ลากวงกลมนี้ไปทั่วเฉดสีเพื่อเปลี่ยนค่าที่แสดง
  9. แถบเลื่อนโทนสี
  10. แถบเลื่อนความทึบแสง
  11. สวิตช์มูลค่าการแสดงผล เลือกพื้นที่สีจากรายการแบบเลื่อนลง โปรดดูที่หัวข้อแปลงสี
  12. ขยายอัตราส่วนคอนทราสต์ เปิดส่วนที่เกี่ยวข้องซึ่งให้คุณแก้ไขคอนทราสต์

  13. ตัวสลับชุดสี คลิกเพื่อสลับระหว่างตัวเลือกต่อไปนี้

    • ชุดสีการออกแบบของ Material
    • พาเล็ตที่กำหนดเอง หากต้องการเพิ่มสีปัจจุบันลงในชุดสีนี้ด้วยตนเอง ให้คลิก เพิ่ม
    • จานสีตัวแปร CSS แสดงรายการตัวแปร CSS ที่กำหนดเองทั้งหมด (ต่อท้ายด้วย --) ในหน้าเว็บ
    • จานสีสีของหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะค้นหาสีทั้งหมดในสไตล์ชีตเพื่อสร้างชุดสีนี้

เลือกพื้นที่สี

วิธีเลือกพื้นที่สี

  1. กด Shift แล้วคลิกไอคอนแสดงตัวอย่างข้างค่าสี รายการแบบเลื่อนลงจะเปิดขึ้น

    รายการแบบเลื่อนลงที่มีพื้นที่สีที่รองรับทั้งหมด

  2. เลือกพื้นที่สีใดพื้นที่สีหนึ่งต่อไปนี้

    หรือพื้นที่ทำงานใหม่อย่างใดอย่างหนึ่งต่อไปนี้

    หรือพื้นที่ทำงานที่กําหนดโดยฟังก์ชัน color(<color_space> X X X)

แปลงสี

เมื่อคุณสลับระหว่างพื้นที่สีด้วยตัวสลับค่าการแสดงผล DevTools จะแปลงค่าโดยอัตโนมัติ

วางเมาส์เหนือไอคอนเพื่อดูค่าเดิม

ไอคอนคำเตือนที่บ่งบอกถึงการหนี่งสีและเคล็ดลับเครื่องมือที่มีค่าเดิม

วิดีโอถัดไปจะแสดง Conversion ที่เกิดขึ้นจริง

แก้ไขคอนทราสต์

วิธีแก้ไขปัญหาคอนทราสต์สำหรับการประกาศ color

  1. เปิดเครื่องมือเลือกสีข้างค่า color
  2. ขยายส่วนอัตราส่วนคอนทราสต์ ขยาย

  3. ใช้สีที่แนะนำซึ่งเป็นไปตามหลักเกณฑ์ต่อไปนี้

    • คลิก ใช้สีที่แนะนำ ข้างหลักเกณฑ์
    • ในตัวอย่างเฉดสีที่ด้านบน ให้ลากวงกลมสีใต้เส้นที่เกี่ยวข้อง

ส่วนอัตราส่วนคอนทราสต์แบบขยายที่มีหลักเกณฑ์ของ WebAIM หรือ APCA

หากต้องการดูรายการปัญหาเกี่ยวกับคอนทราสต์ทั้งหมดในครั้งเดียว ให้ทําตามคำแนะนำทําให้เว็บไซต์อ่านง่ายขึ้น

ดูดสีจากทุกที่ด้วยเครื่องมือดูดสี

หลอดดูดสี เครื่องมือดูดสีสามารถดูดสีทั้งจากหน้าเว็บและจากส่วนใดก็ได้บนหน้าจอ

วิธีเลือกสีจากทุกที่บนหน้าจอ

  1. เปิดเครื่องมือเลือกสี แล้วทำอย่างใดอย่างหนึ่งต่อไปนี้
    • คลิกปุ่ม หลอดดูดสี
    • กด C เพื่อเปิดใช้งานเครื่องมือดูดสี หากต้องการปิดใช้งาน ให้กด Escape
  2. เมื่อเครื่องมือดูดสีทำงานอยู่ ให้วางเมาส์เหนือสีเป้าหมายแล้วคลิกเพื่อดูดสี

ใช้เครื่องมือดูดสีที่ใดก็ได้บนหน้าจอ

ในตัวอย่างนี้ เครื่องมือเลือกสีจะแสดงค่าสีปัจจุบันเป็น rgb(224 255 255 / 15%) สีนี้จะเปลี่ยนเป็นสีชมพูเมื่อคุณคลิกนอก Chrome