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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

เปิดตัวเลือกสีและเปลี่ยนสี

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

  1. เลือกองค์ประกอบ 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)

แปลงสี

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

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

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

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

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

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

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

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

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

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

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

สุ่มตัวอย่างสีได้ทุกที่ด้วยหลอดดูดสี

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

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

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

หลอดดูดสีบริเวณใดก็ได้บนหน้าจอ

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