Làm cách nào để lấy mã HEX của một màu trong ảnh?

Tải hình ảnh lên, sau đó di chuyển qua ảnh hoặc nhấp vào một điểm ảnh — kính lúp sẽ giúp bạn chọn chính xác điểm mong muốn. Mã HEX (ví dụ: #4f46e5) sẽ hiển thị ngay lập tức và chỉ cần một nhấp chuột để sao chép.

Mã màu HEX là gì?

Mã HEX biểu thị một màu bằng ký tự # theo sau là sáu ký số thập lục phân — mỗi cặp hai chữ số đại diện cho màu đỏ, xanh lá cây và xanh dương, ví dụ như #4f46e5. Đây là định dạng mà CSS, HTML và hầu hết các công cụ thiết kế yêu cầu.

Tôi có thể lấy mã RGB và HSL thay vì chỉ mã HEX không?

Có — mỗi điểm ảnh bạn chọn sẽ hiển thị mã RGB và HSL bên cạnh mã HEX, và bạn có thể sao chép từng mã chỉ bằng một cú nhấp chuột.

Lấy mã màu HEX từ ảnh — Công cụ chọn mã màu

Mã màu HEX từ ảnh: Lấy chính xác pixel mà bạn cần

Khi bạn mở một ảnh PNG, JPG, WebP, GIF, AVIF hoặc HEIC trên trang này, công cụ ngay lập tức hiển thị mã màu HEX của pixel trung tâm. Không giống các trang anh em chỉ xuất ra RGB hoặc HSL dạng hàm, trang này ưu tiên mã HEX sáu ký tự – định dạng chuẩn trong CSS và phần mềm thiết kế. Bạn di chuột qua ảnh để lấy mẫu từng pixel, bấm chuột để lưu màu vào lịch sử (tối đa 12 màu), và nhấn vào bất kỳ giá trị nào (HEX, RGB, HSL) để sao chép vào clipboard. Một ô kính lúp phóng to giúp bạn chọn chính xác pixel mong muốn, ngay cả trong vùng bị nén hay khử răng cưa.

Tính năng nổi bật: HEX là đầu ra chính

Trang này được thiết kế riêng cho những ai cần mã màu dạng hex – ví dụ #1E90FF – để dán trực tiếp vào thuộc tính CSS color hoặc background-color mà không cần thêm cặp ngoặc đơn hay cú pháp bổ sung. Đây là điểm khác biệt cốt lõi so với các trang lấy màu RGB hay HSL cùng họ.

HEX (hexadecimal) biểu diễn màu bằng sáu chữ số thập lục phân: hai số cho đỏ, hai cho lục, hai cho lam. Mỗi cặp có giá trị từ 00 đến FF (0–255).
Trang này không hỗ trợ mã HEX bốn hoặc tám ký tự (RGBa trong HEX). Nếu pixel có độ trong suốt, alpha được báo riêng dưới dạng phần trăm, ví dụ: “Alpha 40% – pixel này trong suốt một phần”.
Khi bạn click vào một pixel, công cụ hiển thị đồng thời HEX, RGB và HSL. Nhấn vào bất kỳ giá trị nào để copy – điều này hữu ích khi bạn cần dán mã vào Figma, Photoshop hay trình soạn thảo code.

Cách sử dụng: từ tải ảnh đến lấy mẫu chính xác

Bước 1 – Tải ảnh

Kéo thả hoặc chọn file từ máy. Hệ thống chấp nhận các định dạng: PNG, JPG, WebP, GIF, AVIF, HEIC. Nếu bạn thả file không đúng, thông báo “Định dạng file đó không được hỗ trợ. Hãy thử ảnh PNG, JPG, WebP, GIF, AVIF hoặc HEIC.” sẽ xuất hiện. Nếu file bị hỏng, bạn thấy “Không thể mở ảnh đó. Có thể file bị lỗi hoặc ở định dạng không hỗ trợ.”

Ảnh có cạnh dài nhất vượt quá 4096 pixel sẽ được thu nhỏ lại. Việc này đảm bảo hiệu năng trên trình duyệt và giảm tải bộ nhớ, nhưng lưu ý rằng màu sắc có thể thay đổi nhẹ sau khi scale.

Bước 2 – Lấy mẫu màu

Sau khi ảnh tải xong, dòng “Ảnh đã sẵn sàng – di chuyển qua ảnh để lấy mẫu, click để lưu màu.” hiện ra. Kèm theo đó là kích thước ảnh (rộng × cao). Mặc định, màu của pixel trung tâm được hiển thị ngay cùng tọa độ (x, y).

Di chuột: Khi bạn rê chuột qua ảnh, tọa độ và màu sắc thay đổi theo từng pixel.
Bấm chuột: Lưu màu hiện tại vào danh sách “các màu đã chọn”. Dòng “Đã lưu ‹hex› vào danh sách của bạn.” xuất hiện.
Điều hướng bàn phím: Dùng phím mũi tên để di chuyển con trỏ crosshair. Nhấn Shift cùng phím mũi tên để nhảy 10 pixel mỗi lần. Nhấn Enter hoặc Space để lưu màu giống như click chuột.

Bước 3 – Xem lịch sử và sao chép

Lịch sử lưu trữ tối đa 12 màu. Các màu có cùng giá trị RGB nhưng alpha khác nhau được lưu thành các mục riêng biệt. Click vào một ô màu trong lịch sử để tải lại màu đó (không làm thay đổi ảnh gốc).

Bạn có thể click vào bất kỳ giá trị HEX, RGB hoặc HSL nào để sao chép. Nếu trình duyệt chặn clipboard, thông báo “Không thể sao chép – trình duyệt của bạn đã chặn quyền truy cập clipboard.” sẽ hiện ra.

Hiểu về mã màu HEX và mối quan hệ với RGB, HSL

Mã HEX sáu ký tự là cách viết gọn của hệ RGB thập phân. Mỗi cặp hex tương ứng với một kênh màu 8-bit:

#FF0000 = đỏ thuần (R=255, G=0, B=0)
#00FF00 = lục thuần (R=0, G=255, B=0)
#0000FF = lam thuần
#FFFFFF = trắng (tất cả 255)
#000000 = đen (tất cả 0)

Khi bạn copy mã HEX từ trang này, bạn có thể dán trực tiếp vào CSS:

.button { background-color: #1E90FF; }

HSL (Hue, Saturation, Lightness) cũng được hiển thị nhưng không phải đầu ra chính. Nếu bạn cần giá trị HSL cho mục đích điều chỉnh màu theo cảm quan, trang này vẫn cung cấp sẵn.

Xử lý độ trong suốt (Alpha) – vì sao HEX không chứa kênh alpha

Mã HEX sáu ký tự không hỗ trợ alpha. Do đó, nếu pixel có độ trong suốt (ví dụ PNG 32-bit), công cụ sẽ hiển thị dòng “Alpha ‹n›% – pixel này trong suốt một phần.” và HEX chỉ thể hiện giá trị màu thực tế của pixel đó (không tính nền phía sau).

Pixel bán trong suốt được đọc chính xác giá trị RGBA lưu trong file, không suy diễn background.
Nếu bạn cần mã màu có alpha (ví dụ rgba(30,144,255,0.5)), hãy copy giá trị RGB và tự thêm tham số alpha. Trang này không xuất trực tiếp định dạng đó.

Lưu ý thực tế: Ảnh JPEG hoặc ảnh chụp màn hình thường bị nén và khử răng cưa, làm thay đổi giá trị pixel gốc. Màu bạn thấy có thể khác một chút so với màu thực tế trong file thiết kế. Vì vậy, hãy luôn lấy mẫu từ nguồn không nén nếu cần độ chính xác tuyệt đối.

Các trường hợp ngoại lệ và lưu ý khi lấy màu

Không hỗ trợ ảnh lớn: Ảnh có cạnh dài trên 4096 pixel bị scale. Màu sắc sau scale có thể sai lệch do thuật toán nội suy. Nếu cần màu chính xác, hãy dùng ảnh gốc kích thước nhỏ hơn.
Pixel bán trong suốt bị đọc riêng: Không có hiệu ứng blend với nền. Màu HEX hiển thị là màu của pixel đó, không phải màu bạn nhìn thấy khi ảnh nằm trên nền trắng.
Lịch sử giới hạn 12 màu: Nếu bạn cần nhiều hơn, hãy copy các mã rồi dùng “Bắt đầu lại” để xóa toàn bộ và bắt đầu lấy mẫu mới.
Trình duyệt chặn clipboard: Một số trình duyệt yêu cầu tương tác người dùng (click) mới cho phép copy. Nếu bạn gặp thông báo chặn, hãy đảm bảo click trực tiếp vào giá trị cần copy.
Nút “Bắt đầu lại”: Xóa ảnh, xóa lịch sử và reset giao diện về trạng thái ban đầu. Hữu ích khi bạn muốn làm việc với ảnh mới.

Tích hợp mã màu vào quy trình thiết kế và phát triển web

Mã HEX là chuẩn không thể thiếu trong CSS. Khi bạn lấy được màu từ ảnh, bạn có thể sử dụng ngay:

Trong CSS: color: #1E90FF;, border-color: #1E90FF;
Trong Figma / Adobe XD: Nhập mã hex vào ô Fill.
Trong Photoshop: Double-click vào foreground color, paste mã hex vào.
Trong các công cụ tạo palette: Nhập hex để tạo bảng màu đồng bộ.

Một điểm mạnh của trang này là mã HEX luôn là sáu ký tự đầy đủ (không viết tắt ba ký tự), đảm bảo tương thích với mọi trình duyệt và phần mềm. Không có rủi ro nhầm lẫn với các phiên bản shorthand như #1E0 (không hợp lệ).

Câu hỏi thường gặp (FAQ)

1. Tại sao HEX của tôi hiển thị là #RRGGBB mà không có kênh alpha? HEX sáu ký tự không hỗ trợ alpha. Độ trong suốt được hiển thị riêng dưới dạng phần trăm. Nếu bạn cần mã RGBA, hãy copy giá trị RGB và tự thêm a.

2. Làm thế nào để lấy màu của pixel trong vùng bị mờ hoặc có texture? Dùng kính lúp phóng to giúp bạn chọn đúng pixel. Kết hợp di chuyển bằng phím mũi tên và Shift để nhảy 10 pixel, giúp dễ dàng định vị pixel ở tọa độ chính xác.

3. Tôi có thể sử dụng ảnh HEIC/HEIF không? Có, trang hỗ trợ image/heic và image/heif, nhưng cần trình duyệt có khả năng giải mã định dạng này (hầu hết trình duyệt hiện đại đều hỗ trợ).

4. Tại sao màu của pixel khác với màu tôi thấy trong Photoshop? Ảnh JPEG và ảnh chụp màn hình bị nén, khử răng cưa và có thể áp dụng gamma khác. Ngoài ra, nếu ảnh của bạn được scale (cạnh dài > 4096px), thuật toán nội suy làm thay đổi màu. Luôn lấy mẫu từ file gốc không nén.

5. Tôi có thể dùng công cụ này trên thiết bị di động không? Có, giao diện hoạt động trên trình duyệt di động, nhưng việc di chuột không thực hiện được. Bạn có thể dùng thao tác chạm để chọn pixel, hoặc dùng bàn phím ảo để điều hướng.

6. Lịch sử màu có thể lưu được bao nhiêu? Tối đa 12 màu. Nếu bạn đã đạt giới hạn, hãy xóa các màu không cần thiết hoặc dùng “Bắt đầu lại” để bắt đầu bộ sưu tập mới.

Hỏi đáp