Cách xác định màu cụ thể trên ứng dụng hoặc trang web

Hãy tưởng tượng bạn đang cuộn qua các hình ảnh và bạn tìm thấy màu sắc hoàn hảo - màu chính xác bạn cần cho dự án thiết kế tiếp theo của mình. Có một số công cụ tuyệt vời trên internet để giúp bạn xác định các màu cụ thể trên bất kỳ ứng dụng hoặc trang web nào. Chúng ta hãy xem xét một số lựa chọn tốt nhất cho họ.

1. Sử dụng Công cụ dành cho nhà phát triển trên Trình duyệt web Chrome

Một tùy chọn bạn có thể thử là công cụ Nhà phát triển Chrome. Chrome đi kèm với rất nhiều tính năng hữu ích cho các nhà phát triển, giúp các công việc được thực hiện dễ dàng hơn nhiều. Bạn có thể sử dụng các bước sau để xác định các màu cụ thể trên bất kỳ ứng dụng hoặc trang web nào.

• Mở trang web mà bạn muốn xác định màu trên trình duyệt web Chrome
• Nhấp vào biểu tượng ba chấm ở trên cùng bên phải của Chrome. Một cửa sổ bật lên với một loạt các tùy chọn sẽ xuất hiện.
• Nhấp vào 'Công cụ khác' và sau đó chọn 'Công cụ dành cho nhà phát triển' từ cửa sổ bật lên kết quả.
• Sử dụng Ctrl + Shift + I nếu bạn muốn bỏ qua các bước trên
• Bây giờ, cửa sổ chia thành hai màn hình - trang web ở bên trái và mã của trang web ở bên phải
• Nhập Ctrl + Shift + C trên bàn phím của bạn. Điều này hiển thị cho bạn tất cả các chi tiết của một phần tử cụ thể trên trang web khi chúng tôi di con trỏ chuột vào các phần tử đó.
• Bạn có thể tìm thấy mã màu của phần tử cùng với các thông tin hữu ích khác.

Thí dụ

Giả sử rằng bạn quan tâm đến các mã màu cụ thể cho một số yếu tố trên trang web sau:

Bạn có thể chọn các công cụ dành cho nhà phát triển bằng cách nhấp vào dấu ba chấm ở góc màn hình. Trong menu thả xuống, chọn Công cụ khác, sau đó chọn Công cụ dành cho nhà phát triển.

Màn hình sẽ được chia thành hai trang. Bạn sẽ thấy trang web ở bên trái và mã của trang web ở bên phải.

Gõ lệnh và phím tắt “Ctrl + Shift + C” và di con trỏ chuột qua các phần tử của trang web. Điều này sẽ hiển thị màu sắc của phần tử đó, cùng với các thông tin hữu ích khác. Dưới đây là hai ví dụ mà chúng tôi tìm thấy màu của thanh điều hướng và trang tổng quan bên dưới công cụ tìm kiếm.

Tại đây, chúng ta có thể tìm thấy mã màu trên cửa sổ bật lên cho thanh điều hướng. Mã màu là # 333333.

Màu của bảng điều khiển có thể được tìm thấy cùng với các chi tiết hữu ích khác. Màu: # 333333, Màu nền: # 5D4A8E. Mặc dù ban đầu có vẻ hơi đáng sợ nhưng chương trình sẽ trở nên dễ sử dụng hơn nhiều với một chút thực hành.

2. Tiện ích mở rộng Chrome Eye Dropper

Eye Dropper là một tiện ích mở rộng Chrome phổ biến và được sử dụng rộng rãi để giúp bạn tìm thấy một số màu nhất định trên bất kỳ trang web hoặc ứng dụng nào.

Làm theo các bước dưới đây để xác định các màu cụ thể trên trang web hoặc ứng dụng bằng công cụ mở rộng Eye Dropper.

• Mở bất kỳ trang web hoặc ứng dụng nào trên Trình duyệt web Chrome
• Nhấp vào biểu tượng tiện ích mở rộng Eye Dropper
• Chọn 'Chọn màu từ trang web' và di con trỏ chuột vào các phần tử khác nhau trên ứng dụng hoặc trang web.

Bạn có thể tìm thấy mã màu của các phần tử được liệt kê ở dưới cùng bên phải của trang web.

Thí dụ

Được rồi, hãy sử dụng công cụ mở rộng Eyeropper trong một ví dụ thực tế. Chúng ta sẽ bắt đầu bằng cách mở một trang web và nhấn vào biểu tượng tiện ích mở rộng Eye Dropper

Khi di con trỏ vào các phần tử khác nhau của trang web, bạn có thể thấy các mã màu xuất hiện trong một phần ở dưới cùng bên phải của màn hình.

Khi đưa con trỏ vào biểu tượng hình chữ V, tôi có thể thấy mã màu của nó ở cửa sổ dưới cùng như đã đề cập. Ưu điểm của công cụ này là bạn cũng có thể tìm thấy mã RGB cùng với mã màu hex của phần tử. Phương pháp này rất linh hoạt để sử dụng cho những người muốn một cách đơn giản và nhanh chóng để lấy mã cho màu sắc yêu thích của họ.