Trình trích xuất mã màu từ hình ảnh là gì?
Trình trích xuất mã màu từ hình ảnh là công cụ giúp đọc màu tại một điểm cụ thể trong ảnh và biểu diễn màu đó bằng mã có thể dùng trong thiết kế. Với công cụ này, người dùng chọn vị trí thủ công: rê chuột (hoặc chạm kéo trên màn hình cảm ứng) để xem màu tại điểm đang trỏ, rồi chọn điểm cần giữ lại. Kết quả cốt lõi gồm mã HEX, chuỗi RGB, chuỗi HSL và độ mờ (Alpha %), trong đó HEX, RGB và HSL là ba cách viết của cùng dữ liệu màu đỏ, lục và lam.
Nhu cầu thường gặp là tìm màu của một chi tiết trong ảnh tham khảo, chẳng hạn nền của một hình minh họa, phần áo trong ảnh hoặc một vùng trên biểu tượng. Công cụ giúp chuyển màu tại vị trí đó thành dữ liệu cụ thể, thay vì chỉ ước lượng bằng mắt. Các lần chọn được giữ trong danh sách để người dùng đối chiếu và lấy lại mã HEX.
Một vật thể trong ảnh có thể chứa nhiều sắc độ do ánh sáng, bóng đổ, viền và chuyển sắc. Vì vậy, màu nhận được phụ thuộc vào đúng điểm được chọn, không mặc nhiên đại diện cho cả vật thể. Đây là công cụ lấy màu từng điểm, không tự tìm màu chủ đạo, không tự tạo bộ phối màu và không xác nhận màu chuẩn thương hiệu. Mã màu đọc từ ảnh nên được hiểu là dữ liệu tham khảo của ảnh đó.
Ảnh đầu vào và ý nghĩa của kết quả màu
Những ảnh nào có thể được đưa vào?
Đầu vào là một tệp ảnh từ thiết bị, được đưa vào bằng hộp chọn tệp, kéo thả, hoặc dán ảnh bằng Ctrl+V. Hộp chọn chấp nhận mọi tệp ảnh (kiểu MIME bắt đầu bằng image/); vùng tải lên liệt kê JPG, PNG, WebP, GIF và các định dạng trình duyệt mở được. Dù vậy, danh sách liệt kê này không phải bảo đảm mọi ảnh thuộc những định dạng đó đều mở được.
Ảnh còn phải được trình duyệt giải mã thành công trước khi xuất hiện trong vùng làm việc. Nếu giải mã thất bại, công cụ hiện thông báo lỗi rõ ràng: ngay tại vùng tải lên nếu chưa có ảnh, hoặc giữ nguyên ảnh cũ kèm thông báo nếu đã có ảnh. Phần mở rộng như.jpg hoặc.png không đủ chứng minh nội dung bên trong là ảnh hợp lệ. Nếu có nhiều tệp được chọn hoặc thả vào cùng lúc, phần xử lý chỉ lấy tệp đầu tiên, không thực hiện lấy màu hàng loạt. Mã nguồn không đặt rõ giới hạn dung lượng hay số megapixel; điều này cũng không có nghĩa trình duyệt xử lý được ảnh lớn tùy ý.
Đọc HEX, RGB và danh sách màu như thế nào?
HEX được hiển thị theo dạng #RRGGBB, với sáu chữ số thập lục phân và chữ cái viết hoa. RGB có dạng rgb(R, G, B), trong đó mỗi kênh là số nguyên từ 0 đến 255. HSL được tính từ cùng ba kênh RGB. Các chuỗi này biểu diễn cùng dữ liệu màu, không phải những phép đo độc lập. Chuỗi HEX và RGB không chứa thông tin độ trong suốt; độ mờ hiển thị riêng ở dòng Độ mờ trong mục Màu đang trỏ.
Mục Màu đang trỏ phản ánh điểm đang được trỏ, kể cả điểm hoàn toàn trong suốt (khi đó các mã về dấu gạch ngang và độ mờ là 0%). Danh sách màu đã chọn chỉ ghi nhận những lần người dùng nhấn chọn điểm để lưu. Số đếm của danh sách là số màu khác nhau đang giữ, tối đa 20. Mỗi dòng gồm mẫu màu, HEX, RGB và nút xóa từng màu. Khi nhấn chọn một màu mới, công cụ tự sao chép mã HEX dạng văn bản thuần; ngoài ra có thể sao chép lại HEX, RGB hoặc HSL từ mục Màu đang trỏ, HEX hoặc RGB từ từng dòng, sao chép tất cả HEX, hoặc tải toàn bộ danh sách thành tệp .txt.
Công cụ xác định và lưu màu theo quy tắc nào?
Từ vị trí chuột đến pixel trên ảnh
Khi ảnh tải thành công, công cụ vẽ ảnh lên canvas, tức vùng vẽ của trình duyệt, với chiều rộng và chiều cao bằng kích thước ảnh mà trình duyệt cung cấp. Ảnh nhìn trên màn hình có thể nhỏ hơn vùng dữ liệu này, nên vị trí chuột cần được quy đổi trước khi đọc màu.
Công thức theo chiều ngang là: tọa độ ảnh = khoảng cách chuột đến mép trái vùng ảnh × chiều rộng canvas / chiều rộng hiển thị. Chiều dọc được tính tương tự bằng khoảng cách đến mép trên và hai chiều cao. Tọa độ được làm tròn xuống (floor) trước khi đọc, rồi chặn từ 0 đến kích thước tương ứng trừ 1 để không vượt mép ảnh. Mỗi lần đọc chỉ lấy một pixel, không tính trung bình các điểm xung quanh. Phía trên ảnh, công cụ hiển thị kích thước ảnh (rộng x cao, tính bằng px); mục Màu đang trỏ hiển thị tọa độ (x, y) của điểm đang đọc.
Từ RGB đến HEX
Sau khi đọc pixel, công cụ lấy ba kênh đỏ, lục và lam. Mỗi giá trị được biểu diễn bằng hai chữ số hệ thập lục phân, rồi ghép theo thứ tự đỏ – lục – lam và thêm dấu #. Chẳng hạn, giá trị 255 viết thành FF, còn 0 viết thành 00. Việc đổi sang HEX là đổi cách ghi số, không phải dự đoán hoặc điều chỉnh màu cho đẹp hơn.
Quy tắc trong suốt và lịch sử màu
Điểm có alpha bằng 0 hiện rõ trạng thái hoàn toàn trong suốt trong mục Màu đang trỏ: các mã về dấu gạch ngang, độ mờ là 0%, và điểm đó không lưu được. Điểm bán trong suốt, có alpha lớn hơn 0 và nhỏ hơn 255, vẫn cho kết quả RGB kèm độ mờ %; RGB hiển thị là giá trị canvas trả về, công cụ không tính màu hòa trộn với nền.
Mỗi lần chọn hợp lệ được thêm lên đầu danh sách. Danh sách giữ tối đa 20 màu khác nhau; khi thêm màu mới vượt mức này thì màu cũ nhất bị bỏ. Chọn lại một màu đã có chỉ đưa màu đó lên đầu, không tạo dòng mới và không làm tăng số đếm. Nút Xóa hết chỉ xóa danh sách, không đặt lại màu hiện tại; ngược lại, nút Chọn ảnh khác xóa cả danh sách lẫn màu hiện tại, và ảnh mới tải thành công cũng bắt đầu với danh sách trống.
Các thuật ngữ cần hiểu khi lấy màu từ ảnh
Pixel
Pixel là một phần tử của ảnh raster, mang thông tin màu tại một vị trí cụ thể. Công cụ đọc một pixel cho mỗi điểm chọn, nên kết quả có phạm vi rất nhỏ. Một điểm nằm trong vùng bóng có thể tối hơn điểm nằm trong vùng sáng của cùng vật thể. Đừng nhầm màu một pixel với màu trung bình của cả vùng, nhất là ở viền chữ, vùng chuyển sắc hoặc nơi có nhiều chi tiết sát nhau.
RGB
RGB biểu diễn màu bằng ba kênh đỏ, lục và lam. Trong kết quả của công cụ, mỗi kênh nằm trong khoảng 0 đến 255. Ba con số cho biết thành phần màu mà canvas trả về tại điểm được đọc. RGB không bao gồm alpha trong chuỗi đang hiển thị, nhưng độ mờ được hiển thị riêng ở dòng Độ mờ. Đây cũng không phải hệ CMYK thường gặp trong quy trình in; một mã RGB không tự bảo đảm sản phẩm in sẽ giống màu trên màn hình.
HEX
HEX là cách viết số bằng hệ thập lục phân, sử dụng các chữ số 0–9 và chữ cái A–F. Với màu dạng #RRGGBB, mỗi cặp ký tự biểu diễn một kênh RGB. Vai trò của HEX ở đây là cung cấp cách ghi gọn để đưa vào nơi chấp nhận mã màu, đồng thời là nội dung được yêu cầu sao chép. HEX và RGB không phải hai màu khác nhau; HEX sáu chữ số cũng không chứa độ trong suốt.
Alpha
Alpha là kênh mô tả độ trong suốt. Trong dữ liệu pixel được đọc, 0 nghĩa là hoàn toàn trong suốt, còn 255 nghĩa là hoàn toàn đục. Điểm có alpha bằng 0 hiện trạng thái trong suốt và không lưu được, còn điểm có alpha khác 0 vẫn đọc RGB kèm độ mờ %. Điểm dễ nhầm là màu RGB của pixel không nhất thiết giống màu mắt nhìn thấy sau khi pixel bán trong suốt được hòa lên một nền sáng hoặc tối.
Bảng màu
Bảng màu là tập hợp các màu được gom lại để tham khảo hoặc sử dụng trong thiết kế. Với công cụ này, danh sách được tạo từ các lần chọn thủ công và không chứa màu trùng nhau, vì chọn lại một màu đã có chỉ đưa màu đó lên đầu. Nó không phải bảng màu được tự động phân tích từ toàn ảnh, cũng không phải bộ màu đã được kiểm tra khả năng phối hợp. Người dùng cần tự lựa chọn màu phù hợp với bố cục và mục đích sử dụng.
Ví dụ đọc mã màu và hiểu các tình huống đặc biệt
Một pixel màu cam với dữ liệu giả định
Giả định một pixel hoàn toàn đục có đỏ = 255, lục = 128, lam = 0 và alpha = 255. Ba kênh lần lượt đổi sang hệ thập lục phân thành FF, 80 và 00. Kết quả theo quy tắc của mã nguồn là #FF8000 và rgb(255, 128, 0). Alpha khác 0 nên điểm này được chấp nhận.
Nếu chọn điểm đó, một mục mới được thêm lên đầu danh sách và mã #FF8000 được đưa tới cơ chế sao chép. Đây là ví dụ tính từ dữ liệu giả định theo logic của công cụ.
Ảnh thu nhỏ và vị trí đọc màu
Giả định canvas chứa ảnh rộng 1200 px, cao 800 px, nhưng được hiển thị ở kích thước 600 × 400 px. Chuột nằm cách mép trái ảnh 150 px CSS và mép trên 100 px CSS. Tỷ lệ quy đổi theo cả hai chiều bằng 2, nên vị trí đọc là 150 × 2 = 300 theo chiều ngang và 100 × 2 = 200 theo chiều dọc.
Công cụ đọc pixel tại tọa độ (300, 200) trên canvas. Không thể suy ra mã HEX chỉ từ tọa độ này, vì chưa biết dữ liệu màu của pixel. Ví dụ cho thấy ảnh thu nhỏ cần quy đổi vị trí, chứ không thể dùng trực tiếp khoảng cách đo trên màn hình làm tọa độ ảnh.
Điểm trong suốt và danh sách đủ 20 mục
Giả định thẻ thông tin đang hiển thị một màu hợp lệ, sau đó người dùng rê và chọn điểm có alpha bằng 0. Không có mục mới được lưu hay mã mới được yêu cầu sao chép; thẻ chuyển sang trạng thái trong suốt (các mã về dấu gạch ngang, độ mờ 0%) thay vì giữ màu trước đó, và nhấn chọn điểm đó chỉ hiện thông báo không lưu được.
Nếu danh sách đã đủ 20 mục, lần chọn màu mới tiếp theo được thêm lên đầu và màu cũ nhất bị bỏ, nên tổng vẫn là 20. Màu trùng không chiếm thêm mục, vì chọn lại màu đã có chỉ đưa nó lên đầu. Trong tình huống khác, đã chọn ba lần rồi đổi ảnh, cả ba mục đều bị xóa khi đổi ảnh. Danh sách không gắn nhãn nguồn ảnh, nên hãy xuất mã của ảnh cũ (sao chép tất cả HEX hoặc tải .txt) trước khi đổi ảnh.
Ứng dụng mã màu lấy từ ảnh trong công việc thực tế
Tham khảo màu cho giao diện và đồ họa
Mã HEX lấy từ ảnh có thể làm điểm khởi đầu khi chọn màu nền, tiêu đề hoặc chi tiết đồ họa cho một thiết kế. Ví dụ, bạn có thể tham khảo màu của một vùng minh họa để tạo sự liên hệ thị giác với phần nội dung bên cạnh. Tuy nhiên, màu được chọn chưa được công cụ kiểm tra độ tương phản. Khi dùng cho chữ và nền, cần đánh giá riêng khả năng đọc, thay vì chỉ dựa vào việc hai màu trông hài hòa.
Nếu cần biểu diễn màu ở hệ khác, bạn có thể tham khảo công cụ chuyển đổi mã màu HEX, RGB, HSL, CMYK. Đây là một trang tham khảo riêng, không có căn cứ cho rằng hai công cụ tự tích hợp hoặc tự chuyển dữ liệu cho nhau.
Gom màu thủ công cho một ý tưởng thiết kế
Để làm bảng tham khảo cho bài trình bày hoặc bản phác thảo, bạn có thể chọn một số màu ở những vùng khác nhau của ảnh. Nên ưu tiên vùng tương đối đồng nhất và đối chiếu nhiều điểm khi có bóng đổ, nén ảnh hoặc chuyển sắc. Đây là phương pháp sử dụng, không phải chế độ tự phân tích hay lấy trung bình vùng có sẵn.
Với hình ảnh thương hiệu, màu đọc được chỉ nên là bước khởi đầu. Nếu có tài liệu màu chính thức, hãy đối chiếu với tài liệu đó trước khi áp dụng cho sản phẩm cần tính nhất quán.
Lấy màu tại một điểm khác gì với phân tích bảng màu của ảnh?
Lấy màu tại điểm trả lời câu hỏi “Màu ở vị trí này là gì?”. Phân tích bảng màu toàn ảnh hướng đến câu hỏi rộng hơn: những màu nào có thể đại diện cho nhiều pixel trong ảnh? Hai phương pháp có mục tiêu khác nhau, nên một kết quả đơn điểm không thể thay thế việc phân tích tổng thể.
Với công cụ hiện tại, bạn có thể chủ động chọn màu của một chi tiết rất nhỏ. Tuy nhiên, kết quả không cho biết màu đó chiếm bao nhiêu diện tích hay xuất hiện thường xuyên đến đâu. Danh sách không còn cho thấy một màu được chọn bao nhiêu lần, vì chọn lại một màu đã có chỉ đưa nó lên đầu; vì vậy, việc một màu có mặt trong danh sách không chứng minh nó phổ biến trong ảnh.
Lịch sử thủ công này đã tự đưa màu trùng lên đầu thay vì tạo dòng mới, nhưng vẫn khác bảng màu được thống kê hoặc sắp xếp theo mức độ nổi bật. Danh sách ở đây ưu tiên lần chọn mới nhất, không xếp hạng màu theo vai trò thị giác.
Nếu cần biết màu của một chi tiết, chọn điểm là hướng phù hợp. Nếu cần tổng quan màu toàn ảnh, bạn cần phương pháp phân tích khác và có thể tham khảo trang trích xuất bảng màu từ ảnh. Chưa có mã nguồn của trang đó trong dữ liệu hiện có, nên không thể xác nhận thuật toán, số màu hay cách tổ chức kết quả cụ thể.
Giới hạn và lưu ý để không hiểu sai mã màu
Mã màu của ảnh không phải màu chuẩn ngoài đời
Về kiến thức nền, màu trong ảnh chịu ảnh hưởng của ánh sáng, thiết bị chụp, chỉnh sửa, nén và quy trình hiển thị. Mã được đọc là dữ liệu của ảnh đã được trình duyệt đưa vào canvas, không phải phép đo trực tiếp màu vật thể ngoài đời. Nó cũng không tự chứng minh màu in chính xác hay màu chuẩn thương hiệu.
Chuỗi RGB và HEX không chứa alpha, nhưng mục Màu đang trỏ hiển thị riêng độ mờ %. Vì vậy, mẫu màu đục được hiển thị có thể khác cảm nhận về một pixel bán trong suốt khi đặt trên nền khác. Kính lúp đi theo chuột phóng to vùng 9×9 điểm ảnh quanh điểm đang trỏ, với ô giữa được khung rõ, giúp phân biệt các pixel lân cận.
Phụ thuộc trình duyệt và phạm vi xác minh dữ liệu
Ảnh lớn vẫn được vẽ theo kích thước trình duyệt đọc được, dù hiển thị nhỏ, nên có thể tốn bộ nhớ hoặc gặp giới hạn canvas. Khả năng giải mã, xử lý hồ sơ màu và sao chép phụ thuộc môi trường trình duyệt. Thông báo Đã sao chép chỉ hiện khi Clipboard API hoặc phương án dự phòng báo thành công; khi sao chép thất bại, công cụ báo rõ và hiển thị mã để sao chép thủ công.
Luồng đọc ảnh dùng tài nguyên trong trình duyệt và không thể hiện bước gửi ảnh lên máy chủ. Tuy nhiên, điều đó chưa đủ chứng minh toàn bộ trang không truyền hoặc lưu dữ liệu. Danh sách chỉ tồn tại trong phiên mở trang, không phải kho lưu bền vững; bù lại, công cụ đã có xuất danh sách thành tệp .txt và sao chép tất cả HEX, đồng thời hỗ trợ cảm ứng qua pointer events (chạm kéo để xem màu, nhấn để lưu) và dán ảnh bằng Ctrl+V. Các nhận định này dựa trên phân tích nguồn và kiểm thử bản mới, không phải kiểm thử thực tế trên mọi trình duyệt.
Câu hỏi thường gặp
Vì sao một tệp có đuôi ảnh vẫn không mở được?
Vì đuôi tệp không bảo đảm nội dung bên trong là ảnh hợp lệ hoặc trình duyệt có thể giải mã được. Hộp chọn chấp nhận mọi tệp ảnh (kiểu MIME bắt đầu bằng image/); vùng tải lên liệt kê JPG, PNG, WebP, GIF và các định dạng trình duyệt mở được. Vượt qua kiểm tra này vẫn chưa đồng nghĩa ảnh sẽ tải thành công. Tệp hỏng hoặc định dạng không được môi trường hỗ trợ có thể gây vướng mắc. Mã nguồn không đặt giới hạn dung lượng cụ thể, nhưng khi giải mã thất bại, công cụ hiện thông báo lỗi rõ ràng thay vì im lặng.
Vì sao chọn vùng trong suốt không có màu mới?
Vì điểm hoàn toàn trong suốt, tức alpha bằng 0, không có màu để lưu. Chọn điểm đó không thêm mục và không yêu cầu sao chép mã mới, chỉ hiện thông báo không lưu được. Khi rê chuột tới điểm đó, mục Màu đang trỏ chuyển sang trạng thái trong suốt (các mã về dấu gạch ngang, độ mờ 0%), không còn giữ thông tin của điểm hợp lệ trước đó. Điểm bán trong suốt lại được xử lý khác: nếu alpha lớn hơn 0, công cụ vẫn đọc RGB và hiển thị độ mờ %, nhưng RGB đó là giá trị canvas trả về, chưa hòa trộn với nền.
Vì sao mã màu lấy được khác với màu tôi cảm nhận trên ảnh?
Vì kết quả chỉ mô tả một pixel, còn mắt thường cảm nhận cả vùng và bối cảnh xung quanh. Điểm ở viền, vùng bóng hoặc chuyển sắc có thể khác phần màu bạn muốn lấy. Với ảnh bán trong suốt, màu nhìn thấy còn phụ thuộc nền, trong khi chuỗi RGB không chứa alpha (độ mờ hiển thị riêng ở dòng Độ mờ). Bạn nên đối chiếu vài điểm trong vùng tương đối đồng nhất để xác định sắc độ phù hợp. Cách đối chiếu này không biến công cụ thành phép lấy trung bình hay đo màu chuẩn.
Chọn cùng một màu nhiều lần có bị loại trùng không?
Có. Chọn lại một màu đã có chỉ đưa màu đó lên đầu, không tạo mục mới. Vì vậy, số đếm là số màu khác nhau đang giữ, tối đa 20; khi thêm màu mới vượt giới hạn, màu cũ nhất bị loại. Nhờ đó, số đếm phản ánh đúng số màu duy nhất trong danh sách, không phải số lần chọn.
Chọn ảnh khác có xóa các màu đã lưu không?
Có. Nhấn Chọn ảnh khác sẽ xóa danh sách đã lưu và đặt màu hiện tại về trắng; tải ảnh mới thành công cũng bắt đầu với danh sách trống. Vì danh sách không gắn nhãn nguồn ảnh, hãy sao chép tất cả HEX hoặc tải tệp .txt trước khi đổi ảnh nếu muốn giữ mã của ảnh cũ. Ngược lại, nút Xóa hết chỉ xóa danh sách, không đặt lại thẻ màu hiện tại.
Thông báo đã sao chép có bảo đảm mã HEX nằm trong clipboard không?
Thông báo Đã sao chép chỉ hiện khi Clipboard API hoặc phương án dự phòng báo thành công. Khi sao chép thất bại, công cụ báo rõ Không sao chép được kèm mã để sao chép thủ công, thay vì báo thành công giả. Khi nghi ngờ, bạn vẫn nên dán thử vào một ô văn bản và đối chiếu với mã đang hiển thị. Nội dung tự động sao chép khi nhấn chọn là HEX; ngoài ra mục Màu đang trỏ có nút sao chép RGB và HSL, từng dòng trong danh sách sao chép được HEX hoặc RGB. Khả năng thực hiện còn phụ thuộc trình duyệt và môi trường sử dụng.
Có thể xuất toàn bộ danh sách màu thành tệp không?
Có. Nút Sao chép tất cả HEX sao chép toàn bộ mã HEX trong danh sách, mỗi mã một dòng; nút Tải danh sách (.txt) tải tệp bang-mau-congcuviet.txt, mỗi dòng gồm HEX – RGB – HSL. Công cụ hiển thị từng mẫu màu cùng HEX và RGB, đồng thời cho phép sao chép lại HEX hoặc RGB của từng mục và xóa từng màu. Danh sách vẫn chỉ tồn tại trong phiên mở trang, nên hãy xuất trước khi đóng trang hoặc đổi ảnh.