Kiểm tra và gỡ lỗi màu HD và màu không phải HD bằng Công cụ chọn màu

Jecelyn Yeen

Sofia Emelianova

Bộ chọn màu cung cấp một GUI để thay đổi các khai báo color và *-color, đồng thời cho phép bạn tạo, chuyển đổi và gỡ lỗi màu không phải HD và màu HD chỉ bằng một cú nhấp chuột.

Để nghiên cứu chuyên sâu về các không gian màu mới, hãy xem Hướng dẫn về màu CSS có độ phân giải cao.

Mở Công cụ chọn màu và thay đổi màu

Sử dụng Bộ chọn màu để thay đổi giá trị màu chỉ bằng một cú nhấp chuột:

1. Chọn một phần tử trong bảng điều khiển Phần tử.

2. Trong ngăn Kiểu, hãy tìm khai báo color hoặc *-color mà bạn muốn thay đổi.

   Ở bên trái mỗi giá trị color hoặc *-color, có một biểu tượng hình vuông nhỏ có bản xem trước của màu đó.

   

Để kiểm tra giá trị đã tính, hãy dùng ngăn Đã tính.

1. Nhấp vào ô xem trước bên cạnh một màu để mở Công cụ chọn màu.
2. Để thay đổi màu, hãy dùng bất kỳ phần tử nào trên giao diện người dùng của Bộ chọn màu.

Các phần tử của Công cụ chọn màu

Sau đây là nội dung mô tả về từng phần tử trên giao diện người dùng của Bộ chọn màu:

1. Shades.
2. Công cụ chọn màu. Xem phần Lấy mẫu màu ở bất kỳ đâu bằng công cụ Lấy mẫu màu.
3. Sao chép vào bảng nhớ tạm. Sao chép Giá trị hiển thị vào bảng nhớ tạm.
4. Giá trị hiển thị. Đối số của hệ màu đã chọn.
5. Tỷ lệ tương phản. Chỉ áp dụng cho các giá trị color. Đó là sự khác biệt giữa color và background-color.
6. Bảng màu. Nhấp vào một ô vuông để thay đổi màu thành màu của ô vuông đó.
7. Ranh giới của gam màu. Đường này chỉ có trong không gian màu mới và hàm color(). Chúng có thể tạo ra cả màu sắc HD và không phải HD. Đường kẻ này giúp bạn phân biệt giữa nội dung HD và nội dung không phải HD.
8. Vòng tròn màu. Kéo vòng tròn này trên các sắc độ để thay đổi giá trị hiển thị.
9. Thanh trượt chọn màu.
10. Thanh trượt độ mờ.
11. Công tắc chuyển đổi giá trị hiển thị. Chọn một không gian màu trong danh sách thả xuống. Xem phần Chuyển đổi màu.
12. Tăng tỷ lệ tương phản. Mở mục tương ứng cho phép bạn Khắc phục độ tương phản.

13. Công cụ chuyển đổi bảng màu. Nhấp vào biểu tượng này để chuyển đổi giữa:

    • Bảng màu Material Design.
    • Bảng màu tuỳ chỉnh. Để thêm màu hiện tại vào bảng màu này theo cách thủ công, hãy nhấp vào .
    • Bảng Biến CSS. Liệt kê tất cả các biến CSS tuỳ chỉnh (được thêm vào bằng --) trên trang của bạn.
    • Bảng Màu trang. Để tạo bảng màu này, DevTools sẽ tìm tất cả các màu trong biểu định kiểu của bạn.

Chọn một không gian màu

Cách chọn không gian màu:

1. Nhấn phím Shift và nhấp vào biểu tượng xem trước bên cạnh một giá trị màu. Một danh sách thả xuống sẽ mở ra.

   

2. Chọn một trong các không gian màu sau:

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

   Hoặc một trong các không gian mới:

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

   Hoặc một khoảng trống được xác định bằng hàm color(<color_space> X X X).

Chuyển đổi màu

Khi bạn chuyển đổi giữa các hệ màu bằng Công cụ chuyển đổi giá trị hiển thị, DevTools sẽ tự động chuyển đổi các giá trị.

Di chuột lên biểu tượng để xem giá trị ban đầu.

Video tiếp theo minh hoạ các lượt chuyển đổi trong thực tế.

Khắc phục độ tương phản

Cách khắc phục vấn đề về độ tương phản cho một nội dung khai báo color:

1. Mở Công cụ chọn màu bên cạnh giá trị color.
2. Mở rộng mục Tỷ lệ tương phản .

3. Sử dụng màu được đề xuất tuân thủ một nguyên tắc:

   • Nhấp vào biểu tượng bên cạnh nguyên tắc đó.
   • Trong bản xem trước Sắc độ ở trên cùng, hãy kéo Vòng tròn màu bên dưới đường tương ứng.

Theo mặc định, Công cụ chọn màu đề xuất các giá trị tuân thủ APCA.

Ngoài ra, bạn có thể đặt chế độ này để đề xuất các giá trị tuân thủ nguyên tắc của WebAIM. Trong Cài đặt > Lựa chọn ưu tiên > Phần tử, hãy bỏ chọn hộp Thuật toán độ tương phản cảm quan nâng cao (APCA)....

Để xem danh sách tất cả các vấn đề về độ tương phản cùng một lúc, hãy làm theo hướng dẫn Giúp trang web của bạn dễ đọc hơn.

Lấy mẫu màu ở bất kỳ đâu bằng công cụ Eyedropper

Công cụ chọn màu có thể lấy mẫu màu từ cả trang và mọi vị trí trên màn hình.

Cách chọn màu ở vị trí bất kỳ trên màn hình:

1. Mở Công cụ chọn màu rồi làm theo một trong những cách sau:
   • Nhấp vào nút .
   • Nhấn C để kích hoạt công cụ Eyedropper (Ống nhỏ giọt). Để huỷ kích hoạt, hãy nhấn phím Escape.
2. Khi công cụ Chọn màu đang hoạt động, hãy di chuột lên màu mục tiêu rồi nhấp để lấy mẫu.

Trong ví dụ này, Bộ chọn màu cho thấy giá trị màu hiện tại là rgb(224 255 255 / 15%). Màu này sẽ chuyển sang màu hồng khi bạn nhấp vào một vị trí bên ngoài Chrome.