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

Công cụ chọn màu cung cấp một GUI (Giao diện người dùng đồ hoạ) để thay đổi nội dung khai báo color và *-color, đồng thời cho phép bạn tạo, chuyển đổi cũng như gỡ lỗi màu không phải HD và màu HD chỉ bằng một cú nhấp chuột.

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 này, ngăn Styles (Kiểu) hỗ trợ 12 hệ màu mới và 7 gam màu mới trong thông số kỹ thuật CSS Color Level 4 (Màu của CSS) và hàm color-mix() từ CSS Color Level 5.

Để tìm hiểu sâu hơn về các hệ màu mới, hãy xem Hướng dẫn về màu sắc có độ phân giải cao của CSS.

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 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 Styles (Kiểu), hãy tìm phần khai báo color hoặc *-color mà bạn muốn thay đổi.

   Ở bên trái của mỗi giá trị color hoặc *-color, sẽ có một biểu tượng hình vuông nhỏ có 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 lộ là bản xem trước của màu thu được.

Để kiểm tra giá trị đã tính, hãy 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ột màu để mở Công cụ chọn màu.
2. Để thay đổi màu, hãy sử dụng thành phần bất kỳ trên giao diện người dùng của Công cụ chọn màu.

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

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

1. Bóng.
2. Công cụ chọn màu. Hãy 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ỉ có sẵn 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 hình vuông để thay đổi màu thành màu của hình vuông.
7. Ranh giới Gamma. Dòng này chỉ dành cho hệ màu mới và hàm color(). Các chế độ này có thể tạo ra cả màu HD và màu không phải HD. Đường kẻ này giúp bạn phân biệt giữa 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 màu.
10. Thanh trượt độ mờ.
11. Trình chuyển đổi giá trị hiển thị. Chọn một hệ màu trong danh sách thả xuống. Hãy 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 giữ phím 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 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 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 CSS Variables (Biến CSS). Liệt kê tất cả biến CSS tuỳ chỉnh (thêm bằng --) 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 sẽ tìm tất 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 và 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, hãy 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 hàm color(<color_space> X X X) xác định.

Chuyển đổi màu

Khi bạn chuyển đổi giữa các không gian 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 vừa với không gian và đánh dấu các giá trị bị 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 sẽ cho thấy các lượt chuyển đổi trong thực tế.

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. Vì vậy, chỉ các 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. Hãy sử dụng màu được đề xuất tuân thủ nguyên tắc:

   • Nhấp vào bên cạnh nguyên tắc.
   • Trong bản xem trước Shades ở 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 đề xuất bạn tuân theo các nguyên tắc của WebAIM. Ngoài ra, bạn có thể đặt tham số này để đề xuất các giá trị tuân thủ APCA: Trong Cài đặt > Thử nghiệm, hãy đánh dấu vào mục Bật thuật toán tương phản cảm nhận nâng cao (APCA) mới)...

Để xem danh sách tất cả các vấn đề về độ tương phản trong một lần, hãy làm theo hướng dẫn Làm cho 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ụ chọn màu

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

Cách chọn một màu 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 Công cụ chọn màu. Để tắ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 qua màu mục tiêu rồi nhấp để lấy mẫu.

Lưu ý: Công cụ chọn màu 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, Công cụ chọn màu sẽ cắt màu cho màu gần nhất. Hãy 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 sang màu hồng sau khi bạn nhấp vào phần bên ngoài Chrome.