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.

Để 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 đó.

   

Để 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.
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.

   

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ị.

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

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.

Để 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.

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.