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

Twitter GitHub Trang chủ

Sofia Emelianova

GitHub

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

Lưu ý quan trọng: Video này cho thấy phiên bản Công cụ của Chrome cho nhà phát triển trước phiên bản 112. Trong các phiên bản sau, ngăn Kiểu hỗ trợ 12 hệ màu mới và 7 gam màu mới từ thông số kỹ thuật Màu CSS cấp 4 và hàm color-mix() từ Màu CSS 5.

Để tìm hiểu chuyên sâu về hệ màu mới, hãy xem Hướng dẫn màu CSS độ phân giải cao.

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

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

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

2. Trong ngăn Styles (Kiểu), hãy tìm nội dung 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ỏ với bản xem trước của màu đó.

   

   Lưu ý: Ví dụ này cho thấy hai vòng tròn giao nhau bên cạnh hàm color-mix(): . Giao điểm là bản xem trước của màu kết quả.

Để kiểm tra giá trị đã tính toán, hãy sử dụng ngăn Computed (Tính toán).

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

Phần tử trong Công cụ chọn màu

Dưới đây là mô tả về từng thành phần trên giao diện người dùng của Công cụ chọn màu:

1. Bóng.
2. Trình nghe lén. Xem phần Lấy mẫu một màu ở bất kỳ đâu bằng Công cụ chọn màu.
3. Sao chép vào bảng nhớ tạm. Sao chép Display value (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ỉ dành cho giá trị color. Đây là sự khác biệt giữa color và background-color.
6. Bảng màu. Nhấp vào một hình vuông để đổi màu thành màu của hình vuông đó.
7. Ranh giới Gamut. Dòng này chỉ dùng được cho các hệ màu mới và hàm color(). Chúng có thể tạo ra cả màu sắc ở chất lượng HD và màu không phải chất lượng HD. Đường này giúp bạn phân biệt giữa chất lượng HD và không phải HD.
8. Vòng tròn màu. Kéo vòng tròn này qua các sắc độ để thay đổi giá trị hiển thị.
9. Thanh trượt Hue.
10. Thanh trượt độ mờ.
11. Trình chuyển đổi giá trị hiển thị. Chọn một hệ màu từ danh sách thả xuống. Xem phần Chuyển đổi màu.
    Lưu ý: Ngoài ra, để mở trực tiếp trình đơn thả xuống, hãy nhấn và giữ Shift rồi nhấp vào biểu tượng xem trước màu bên cạnh giá trị màu.
12. Mở rộng tỷ lệ tương phản. Mở phần tương ứng cho phép bạn Chỉnh sửa độ tương phản.

13. Trình chuyển đổi bảng màu. Nhấp vào biểu tượng đó để chuyển đổi giữa:

    • Bảng màu thiết kế Material.
    • 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ả biến CSS tuỳ chỉnh (thêm vào --) trên trang của bạn.
    • Bảng Màu trang. Để tạo bảng màu này, Công cụ cho nhà phát triển tìm kiếm tất cả các màu trong biểu định kiểu của bạn.

Chọn hệ màu

Cách chọn hệ màu:

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

   Lưu ý: Ngoài ra, bạn có thể nhấp vào Trình chuyển đổi giá trị hiển thị trong Công cụ chọn màu.

   

2. Chọn một trong các hệ 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 không gian đượ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 Trình chuyển đổi giá trị hiển thị, Công cụ cho nhà phát triển sẽ tự động chuyển đổi các giá trị.

Thận trọng: Khi chuyển đổi từ HD sang không phải HD, Công cụ cho nhà phát triển sẽ cắt các gam màu cho phù hợp với không gian và đánh dấu các giá trị đã cắt bằng biểu tượng cảnh báo .

Hãy di chuột qua biểu tượng đó để xem giá trị ban đầu.

Video tiếp theo cho thấy các lượt chuyển đổi trong thực tế.

Chỉnh sửa độ tương phản

Lưu ý quan trọng: Công cụ chọn màu chỉ tính toán tỷ lệ tương phản cho các giá trị color và so với các giá trị background-color tương ứng. Do đó, chỉ giá trị color mới có phần Tỷ lệ tương phản.

Cách khắc phục vấn đề về độ tương phản cho 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 phần Tỷ lệ tương phản .

3. Sử dụng màu được đề xuất và tuân thủ 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 Tô màu ở trên cùng, hãy kéo Vòng tròn màu bên dưới đường tương ứng.

Lưu ý: Theo mặc định, Công cụ chọn màu sẽ đề xuất bạn làm theo nguyên tắc về WebAIM. Ngoài ra, bạn có thể đặt để đề xuất các giá trị tuân thủ APCA: Trong Cài đặt > Thử nghiệm, hãy chọn Bật thuật toán tương phản nhận thức 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ột màu ở bất cứ đâu bằng công cụ Eyedropper

Eyedropper có thể lấy mẫu màu cả từ trang và từ bất kỳ nơi nào trên màn hình.

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

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

Lưu ý: Eyedropper chỉ lấy mẫu màu trong hệ màu sRGB. Khi bạn lấy mẫu bên ngoài không gian này, Eyedropper sẽ cắt màu thành màu gần nhất. Xem phần Chuyển đổi màu.

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