Màu sắc đóng một vai trò quan trọng trong việc truyền tải thông tin không lời. Một trang web có màu sắc tương tác được coi là hấp dẫn và thu hút trực quan. Có nhiều phương pháp khác nhau để áp dụng màu sắc cho các phần tử HTML: RGB, RGBA, Mã HEX, HSLA và HSL. Tuy nhiên, bạn có thể tìm mã màu bằng cách kiểm tra trang, chọn màu từ bộ chọn màu hoặc sử dụng tính năng ống nhỏ giọt từ bảng điều khiển Công cụ dành cho nhà phát triển.
Trong nghiên cứu này, chúng ta sẽ thảo luận về các phương pháp tìm mã màu trong HTML
Phương pháp 1: Tìm mã màu trong HTML bằng cách kiểm tra trang web
Sau đây là các bước để tìm mã màu bằng cách kiểm tra trang.
Bước 1: Mở Trang Web
Đầu tiên, mở trang web được yêu cầu:
Bước 2: Chọn Kiểm tra tùy chọn
Nhấp chuột phải vào trang và chọn “ Quan sát ” tùy chọn từ menu, sẽ cung cấp quyền truy cập vào “ Những công cụ phát triển ” bảng điều khiển:
Kết quả là, “ yếu tố ” sẽ hiển thị ở cuối trình duyệt:
Bước 3: Điều chỉnh vị trí của Bảng công cụ dành cho nhà phát triển
Bằng cách nhấp vào ba dấu chấm ở góc, bạn có thể chọn vị trí của bảng điều khiển. Chẳng hạn, chúng tôi đã chọn biểu tượng được đánh dấu màu xanh lá cây. Hơn nữa, cửa sổ kiểm tra có thể được thay đổi kích thước bằng cách kéo các góc của nó:
Bước 4: Chọn phần tử để kiểm tra
Sau đó, nhấp vào biểu tượng được đánh dấu để chọn phần tử mà bạn muốn kiểm tra:
Bước 5: Chọn phần tử
Di chuột vào phần tử có mã màu cần tìm và nhấp vào phần tử đó. Kết quả là, “ phong cách ” tab mở ra và hiển thị các thuộc tính kiểu dáng của phần tử đã chọn, từ đó bạn phải chọn màu như được hiển thị trong hộp được đánh dấu màu xanh lá cây:
Bước 6: Chọn màu từ Bộ chọn màu
Sao chép mã màu từ cửa sổ chọn màu đã mở:
Hình ảnh bên dưới chỉ ra rằng chúng ta cũng có thể chọn màu bằng cách nhấp vào các hộp màu nhỏ được đánh dấu bằng màu đỏ. Trong khi hộp màu vàng đại diện cho một con trỏ được thay đổi dần dần để xem màu của phần tử được chọn:
Bước 7: Điều chỉnh độ mờ của màu
Bạn cũng có thể điều chỉnh độ mờ của màu như minh họa trong ảnh GIF bên dưới:
Phương pháp 2: Tìm mã màu trong HTML bằng cách sử dụng tính năng Eye Dropper
Tính năng Eye dropper cũng có thể được sử dụng để chọn bất kỳ màu nào từ trang web. Tính năng này rất tiện dụng vì nó có thể chọn một màu từ bất kỳ đâu trong cửa sổ hiển thị.
Ghi chú: Tính năng Eye dropper được thể hiện bằng hộp được đánh dấu màu đỏ trong hình bên dưới:
Dưới đây là phần trình diễn hoạt động của công cụ Eye dropper:
Sau khi chọn màu cho thành phần của bạn, hãy sao chép mã màu và dán vào CSS của dự án.
Phần kết luận
Có nhiều phương pháp khác nhau để áp dụng màu sắc cho các phần tử HTML: RGB, RGBA, Mã HEX, HSLA và HSL. Bạn có thể tìm mã màu bằng cách “ kiểm tra ” bất kỳ trang web nào hoặc bằng cách chọn màu từ “ bộ chọn màu ” và sử dụng “ thuốc nhỏ mắt ' tính năng. Bài viết này đã trình bày quy trình tìm mã màu trong HTML với các ví dụ chi tiết.