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

Color Picker (Bộ chọn màu) cung cấp một 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 và gỡ lỗi các màu không phải HD và màu 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 Chrome DevTools thấp hơn 112. Trong các phiên bản sau, ngăn Kiểu hỗ trợ 12 không gian màu mới và 7 gam màu mới theo quy cách CSS Color Level 4 (Màu CSS cấp 4) và hàm color-mix() theo quy cách CSS Color Level 5 (Màu CSS cấp 5).

Để tìm hiểu 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 lần nhấp:

1. Chọn một phần tử trong bảng điều khiển Elements (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 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(): . Điểm giao nhau là bản xem trước của màu kết quả.

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

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 bất kỳ thành phần giao diện người dùng nào 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ả từng phần tử trên giao diện người dùng của Công cụ chọn màu:

1. Sắc thái.
2. Bút lấy mẫu màu. Xem bài viết Lấy mẫu màu ở bất kỳ đâu bằng công cụ Chấm màu.
3. Sao chép vào bảng nhớ tạm. Sao chép Display value (Hiển thị giá trị) 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 gam màu. Dòng này chỉ dành cho các không gian màu mới và hàm color(). Chúng có thể tạo ra cả màu HD và không phải HD. Dòng này giúp bạn phân biệt giữa nội dung 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 thái để thay đổi giá trị hiển thị.
9. Thanh trượt sắc độ.
10. Thanh trượt độ mờ.
11. Bật/tắt trình 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.
    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ở mục tương ứng để bạn có thể Khắc phục độ tương phản.

13. Bộ chuyển đổi bảng màu. Nhấp vào nút này để chuyển đổi giữa:

    • Bảng phối màu Material Design.
    • Bảng 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 chế độ xem Biến CSS. Liệt kê tất 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, Công cụ cho nhà phát triển sẽ tìm tất cả màu trong các tệp kiểu của bạn.

Chọn không gian màu

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

1. Nhấn phím Shift rồi 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 Bật/tắt giá trị hiển thị trong Công cụ chọn màu.

   

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 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 không gian màu bằng Trình chuyển đổi giá trị hiển thị, DevTools 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, DevTools sẽ cắt dải màu để vừa 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 .

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 đang hoạt động.

Sửa độ tương phản

Điểm chính: Bộ chọn màu chỉ tính tỷ lệ tương phản cho các giá trị color và tương ứng 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ở Color Picker (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 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 Shades (Sắc thái) ở trên cùng, hãy kéo Color circle (Vòng tròn màu) bên dưới dòng tương ứng.

Lưu ý: Theo mặc định, Công cụ chọn màu đề xuất bạn tuân thủ nguyên tắc của WebAIM. Ngoài ra, bạn có thể đặt giá trị 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 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 cùng một lúc, 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à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 từ trang và từ bất kỳ vị trí nào trên màn hình.

Cách chọn 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 làm theo một trong những cách sau:
   • Nhấp vào nút .
   • Nhấn phím C để kích hoạt công cụ Bút lấy mẫu. Để 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 qua màu mục tiêu rồi nhấp để lấy mẫu.

Lưu ý: Công cụ Bút lấy mẫu màu chỉ lấy mẫu màu trong không gian màu sRGB. Khi bạn lấy mẫu bên ngoài không gian này, Bút lấy mẫu 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, Color Picker (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 khi bạn nhấp vào bên ngoài Chrome.