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

เยเซล เยน
โซเฟีย เอมิเลียโนวา
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 Design
    • จานสีที่กำหนดเอง หากต้องการเพิ่มสีปัจจุบันลงในจานสีนี้ด้วยตนเอง ให้คลิก เพิ่ม
    • จานสีตัวแปร CSS แสดงตัวแปร CSS ที่กำหนดเองทั้งหมด (ต่อท้ายด้วย --) ในหน้าเว็บ
    • จานสีสีของหน้า ในการสร้างจานสีนี้ เครื่องมือสำหรับนักพัฒนาเว็บจะมองหาสีทั้งหมดในสไตล์ชีตของคุณ

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

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

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

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

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

    หรือในพื้นที่ทำงานใหม่

    หรือการเว้นวรรคที่ฟังก์ชัน color(<color_space> X X X) กำหนด

แปลงสี

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

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

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

วิดีโอถัดไปแสดง Conversion ในสถานการณ์จริง

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

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

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

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

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

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

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

สุ่มสีที่ใดก็ได้ด้วยหลอดดูดสี

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

วิธีเลือกสีจากส่วนใดก็ได้บนหน้าจอ

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

การใช้หลอดดูดสีที่ใดก็ได้บนหน้าจอ

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