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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

   

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

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. เลือกพื้นที่สีใดพื้นที่สีหนึ่งต่อไปนี้

   • #<hex-color>
   • rgb(X X X / .X)
   • hsl(X X X / X)
   • hwb(X X X / .X)

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

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

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

แปลงสี

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

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

วิดีโอถัดไปแสดง Conversion ในการทำงาน

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

วิธีแก้ไขปัญหาความคมชัดสำหรับcolorประกาศ

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

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

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

โดยค่าเริ่มต้น Color Picker จะแนะนำค่าที่สอดคล้องกับ APCA

หรือจะตั้งค่าให้แนะนำค่าที่เป็นไปตามหลักเกณฑ์ของ WebAIM ก็ได้ ใน การตั้งค่า > ค่ากำหนด > องค์ประกอบ ให้ยกเลิกช่องทำเครื่องหมาย Advanced Perceptual Contrast Algorithm (APCA)...

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

เลือกสีจากที่ใดก็ได้ด้วยเครื่องมือหลอดดูดสี

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

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

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

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