Tutorial

Lấy mã màu trên màn hình và từ ảnh: hút màu online ra HEX, RGB

COLOR ME · 10 phút đọc · 3 lượt xem
image - Lấy mã màu trên màn hình và từ ảnh: hút màu online ra HEX, RGB

Cách lấy mã màu từ ảnh và ảnh chụp màn hình bằng công cụ Lấy màu trên màn hình của ColorME: tải ảnh lên, bấm vào điểm cần lấy, sao chép mã HEX, RGB, HSL, CMYK. Kèm kết quả thử thật trên ảnh, lý do hai điểm sát nhau cho hai mã khác nhau, cách lấy đúng màu logo, dải đậm nhạt, độ tương phản chữ và xuất bảng màu CSS.

Trả lời nhanh: để lấy mã màu từ ảnh, mở công cụ Lấy màu trên màn hình của ColorME, bấm Tải ảnh lên để chọn màu, rồi bấm vào điểm bất kỳ trên ảnh. Mã HEX, RGB, HSL và CMYK của điểm đó hiện ngay bên phải, mỗi mã có nút sao chép. Trên Chrome và Edge máy tính còn có nút Chọn màu trên màn hình để hút màu ở cửa sổ khác. Theo trang công cụ, công cụ miễn phí và không cần đăng nhập; mọi phép thử trong bài làm khi chưa đăng nhập.

Xem nhanh: tải một ảnh lên công cụ, bấm vào nền xanh, nền hồng và tấm thẻ xanh dương, mã HEX bên phải đổi theo từng lần bấm

Xem nhanh: tải ảnh lên, bấm ba điểm, mã màu đổi theo. Ảnh bàn làm việc: Krisztian Tabori / Unsplash. Ảnh chụp màn hình: ColorME.

Bài này đi từng bước với ảnh thật, giải thích vì sao bấm hai điểm sát nhau lại ra hai mã khác nhau, và nói rõ phần nào chúng tôi đã thử, phần nào chưa.

Có mấy cách lấy mã màu bằng công cụ này?

Trang công cụ Lấy màu trên màn hình với hai nút Chọn màu trên màn hình và Tải ảnh lên để chọn màu

Trang mở đầu trên Chrome máy tính có đủ hai nút. Ảnh chụp màn hình: ColorME.

CáchDùng khiChạy ở đâu
Tải ảnh lên, bấm vào ảnhMàu nằm trong một file ảnh, ảnh chụp màn hìnhMọi trình duyệt
Dán ảnh chụp màn hình (Ctrl/Cmd + V)Màu nằm trên logo, website, ứng dụng khácMáy tính
Chọn màu trên màn hìnhMuốn hút thẳng màu ở cửa sổ khác, không cần chụpChrome, Edge máy tính (theo trang công cụ)

Bài này thử kỹ cách thứ nhất. Hai cách còn lại được mô tả theo trang công cụ; lý do và giới hạn nằm ở cuối bài.

Video quay màn hình (34 giây, không tiếng): tải ảnh, lấy năm màu, sao chép mã HEX và RGB, chọn hai sắc độ đậm nhạt, sao chép cả bảng màu dạng CSS. Ảnh: Krisztian Tabori / Unsplash. Ảnh chụp màn hình: ColorME.

Cách lấy mã màu từ ảnh, từng bước

Ảnh thử: một góc bàn có nền hồng và xanh, 3200 × 2133 px.

Ảnh thử: máy ảnh, đồng hồ, điện thoại và tấm thẻ xanh dương đặt trên nền nửa xanh nửa hồng

Ảnh gốc dùng trong bài. Ảnh: Krisztian Tabori / Unsplash.

Bước 1: tải ảnh lên

Bấm Tải ảnh lên để chọn màu, hoặc thả file ảnh vào trang. Ảnh hiện bên trái, thẻ màu hiện bên phải. Ngay khi mở, công cụ lấy sẵn màu của điểm chính giữa ảnh, ở ảnh thử là #C993AA. Màu này chỉ để hiển thị, chưa được ghi vào danh sách đã chọn.

Ảnh vừa tải lên nằm bên trái, thẻ màu bên phải hiện sẵn mã C993AA của điểm giữa ảnh

Vừa mở ảnh: thẻ màu hiện màu của điểm chính giữa. Ảnh chụp màn hình: ColorME.

Bước 2: bấm vào điểm cần lấy màu

Bấm vào vùng màu bạn cần. Thẻ bên phải đổi ngay. Chúng tôi bấm năm điểm trên ảnh thử và nhận được:

Điểm bấmHEXRGBHSLCMYK
Nền xanh#5499C284, 153, 194202, 47%, 55%57, 21, 0, 24
Nền hồng#C894AB200, 148, 171333, 32%, 68%0, 26, 15, 22
Thẻ xanh dương#2E58AC46, 88, 172220, 58%, 43%73, 49, 0, 33
Ốp điện thoại#36425054, 66, 80212, 19%, 26%32, 18, 0, 69
Thân máy ảnh#070B147, 11, 20222, 48%, 5%65, 45, 0, 92

Sau khi bấm vào tấm thẻ xanh dương, thẻ màu hiện 2E58AC, rgb 46 88 172, hsl 220 58% 43%, CMYK 73 49 0 33

Bấm vào tấm thẻ xanh dương: #2E58AC. Ảnh chụp màn hình: ColorME.

Năm màu lấy được từ ảnh thử xếp thành dải: 5499C2, C894AB, 2E58AC, 364250, 070B14 kèm giá trị RGB

Năm màu lấy được từ ảnh, vẽ lại thành dải màu từ đúng các mã công cụ trả về.

Bước 3: đọc thẻ màu

Thẻ màu của công cụ: ô màu lớn ghi C894AB và Hue 333°, bốn dòng HEX RGB HSL CMYK có nút sao chép, dải Đậm nhạt chín ô, hai ô Độ tương phản chữ và mục Đã chọn gần đây

Thẻ màu sau khi bấm vào nền hồng. Ảnh chụp màn hình: ColorME.

  • Ô màu lớn: mã HEX và một nhãn ngắn. Nhãn là góc màu, ví dụ "Hue 333°" (xem hue), hoặc "Rất tối", "Rất sáng", "Xám trung tính" khi màu gần đen, trắng, xám.
  • HEX, RGB, HSL, CMYK: bốn cách viết của cùng một màu. HEX và RGB dùng cho web và phần mềm thiết kế; HSL tiện khi muốn chỉnh sáng tối; CMYK dành cho in.
  • Đậm nhạt: chín sắc độ cùng tông, từ nhạt đến đậm. Ô có viền là màu đang chọn.
  • Độ tương phản chữ (WCAG): tỉ lệ tương phản khi đặt chữ trắng và chữ đen lên màu này, kèm nhãn AAA, AA, "AA lớn" hoặc "Không đạt".
  • Đã chọn gần đây: các màu bạn vừa bấm, mới nhất đứng đầu.

Bước 4: sao chép mã

Bấm biểu tượng sao chép cạnh dòng bạn cần. Một thông báo hiện ở đầu trang, ví dụ "Đã sao chép #203C79". Mã RGB được chép ở dạng rgb(46, 88, 172), HSL ở dạng hsl(220, 58%, 43%), dán thẳng vào CSS được; CMYK là bốn số cách nhau bằng dấu phẩy.

Ảnh động: bấm nút sao chép cạnh mã HEX và RGB, bấm hai ô trong dải Đậm nhạt, rồi bấm Sao chép bảng màu CSS, mỗi lần có thông báo Đã sao chép

Sao chép mã, chọn sắc độ, rồi sao chép cả bảng màu. Ảnh chụp màn hình: ColorME.

Vì sao bấm hai điểm sát nhau lại ra hai mã khác nhau?

Vì ảnh chụp không có mảng màu phẳng tuyệt đối. Ánh sáng, hạt nhiễu và việc nén JPG làm mỗi điểm ảnh lệch nhau một chút. Trong phép thử, chúng tôi đọc thêm các điểm cách chỗ bấm 2 pixel màn hình:

  • Trên ốp điện thoại: #364250, #384452, #35414F. Lệch 1 - 2 đơn vị mỗi kênh, mắt thường không phân biệt được.
  • Ở mép thân máy ảnh: #070B14 nhưng ngay bên cạnh là #211421 và #342734. Ở các đường viền, màu đổi rất nhanh.
  • Trên một ảnh bầu trời: cùng một bầu trời nhưng phía trên là #3588AA, giữa ảnh là #4595B6.

Hai ảnh chụp màn hình: bấm phía trên bầu trời ra mã 3588AA, bấm giữa bầu trời ra mã 4595B6

Cùng một bầu trời, hai điểm, hai mã. Ảnh cây cọ: William Wendling / Unsplash. Ảnh chụp màn hình: ColorME.

Ba cách để lấy được mã đáng tin:

  1. Bấm vào giữa mảng màu, tránh mép, bóng đổ và vùng chói.
  2. Bấm vài điểm rồi so sánh trong mục Đã chọn gần đây; lấy mã lặp lại nhiều nhất hoặc màu ở giữa.
  3. Với logo và giao diện, dùng ảnh chụp màn hình dạng PNG thay vì ảnh JPG đã nén (xem phần dưới).

Một điều nên biết: ảnh có cạnh dài trên 2400 px được thu về 2400 px trước khi lấy màu (ảnh thử 3200 × 2133 px được đọc ở 2400 × 1600 px). Việc thu nhỏ trộn nhẹ các điểm ảnh cạnh nhau, không ảnh hưởng tới mảng màu lớn nhưng có thể làm đổi màu của chi tiết rất nhỏ.

Lấy mã màu chính xác từ logo, website bằng ảnh chụp màn hình

Với màu thương hiệu, bạn cần đúng mã gốc chứ không phải "gần đúng". Chúng tôi kiểm chứng bằng cách chụp chính trang công cụ (ảnh PNG 1280 × 880 px), tải ảnh chụp đó lên và bấm vào nút màu đen. Công cụ trả về #101828, trùng với giá trị rgb(16, 24, 40) mà trang web khai báo cho nút đó. Ba điểm đọc quanh chỗ bấm cũng đều là #101828.

Ảnh chụp màn hình trang công cụ được tải lên chính công cụ, bấm vào nút đen cho mã 101828

Bấm vào nút đen trong ảnh chụp màn hình: #101828, đúng mã mà trang web dùng. Ảnh chụp màn hình: ColorME.

Lưu ý khi làm cách này:

  • Bấm vào giữa mảng màu phẳng, tránh mép chữ và mép bo góc vì ở đó màu được pha để làm mượt.
  • Nút hoặc nền có dải chuyển màu (gradient) sẽ cho mã khác nhau ở mỗi điểm.
  • Ảnh chụp màn hình phản ánh màu mà màn hình và hệ điều hành của bạn hiển thị. Nếu có bộ nhận diện thương hiệu chính thức, mã trong đó vẫn là chuẩn.

Trang công cụ cho biết bạn có thể dán thẳng ảnh chụp màn hình bằng Ctrl + V (Cmd + V trên Mac) thay vì lưu file rồi tải lên. Trong bài này chúng tôi tải file, chưa thử thao tác dán.

Dùng dải đậm nhạt và độ tương phản như thế nào?

Đậm nhạt. Bấm vào một ô trong dải là công cụ chọn màu đó, chép mã HEX và thêm vào danh sách đã chọn. Với thẻ xanh dương #2E58AC, dải gồm: #EBF0FA, #C3D1EF, #8EAAE1, #5E85D4, (màu gốc), #2B52A1, #203E79, #152951, #0B1528. Đây là cách nhanh để có màu nền nhạt, màu viền và màu chữ đậm từ một màu thương hiệu.

Độ tương phản. Theo hướng dẫn WCAG của W3C, chữ thường cần tỉ lệ ít nhất 4,5:1 (mức AA), chữ lớn cần 3:1, mức AAA cần 7:1. Hai ví dụ từ phép thử:

  • #2E58AC: chữ trắng 6,8 (AA), chữ đen 3,1 (chỉ đạt cho chữ lớn). Nên dùng chữ trắng.
  • #C894AB: chữ trắng 2,5 (không đạt), chữ đen 8,3 (AAA). Nên dùng chữ đen.

Cần so hai màu bất kỳ với nhau, dùng công cụ kiểm tra tương phản. Muốn xem phối màu của bạn trông thế nào với người mù màu, xem bài mô phỏng mù màu.

Xuất cả bảng màu thành biến CSS

Nút Sao chép bảng màu CSS chép toàn bộ danh sách Đã chọn gần đây. Sau năm lần bấm trên ảnh và một lần chọn sắc độ, nội dung được chép trong phép thử là:

:root {
  --color-1: #C6D1EB;
  --color-2: #070B14;
  --color-3: #364250;
  --color-4: #2E58AC;
  --color-5: #C894AB;
  --color-6: #5499C2;
}

Màu mới nhất đứng đầu. Danh sách giữ tối đa 16 màu và được lưu trong trình duyệt của bạn; bấm biểu tượng thùng rác để xoá. Chúng tôi chưa thử mở lại trang sau khi tắt trình duyệt để xem danh sách còn không.

Nếu bạn muốn công cụ tự rút ra bảng màu chủ đạo của cả bức ảnh thay vì bấm từng điểm, dùng Trích xuất bảng màu. Cần đổi qua lại giữa các hệ mã, dùng công cụ đổi mã màu. Chưa rõ mã HEX hoạt động thế nào, đọc bài mã màu HEX là gì.

Lấy mã màu trên điện thoại

Theo trang công cụ, trên Safari và điện thoại, khi trình duyệt chưa hỗ trợ chọn màu toàn màn hình thì bạn tải ảnh hoặc ảnh chụp màn hình lên rồi chạm vào điểm cần lấy. Chúng tôi thử ở chế độ giả lập màn hình rộng 390 px với thao tác chạm: chạm ba điểm trên ảnh thử cho #5398C1, #C894AB và #2C56AA, rất gần kết quả trên máy tính. Chúng tôi chưa thử trên điện thoại thật.

Hai ảnh chụp màn hình rộng 390 px: ảnh thử ở trên, thẻ màu C894AB ở dưới, và phần bốn dòng mã màu cùng dải đậm nhạt

Màn hình 390 px: ảnh ở trên, thẻ màu ở dưới. Ảnh chụp màn hình: ColorME.

Trên màn hình nhỏ, mỗi pixel màn hình ứng với nhiều pixel ảnh hơn, nên khó chạm trúng chi tiết nhỏ. Hãy cắt ảnh sát vùng cần lấy màu trước (xem cách cắt ảnh online) rồi mới tải lên.

Chọn màu trên màn hình: những gì chúng tôi chưa thử

Trang công cụ mô tả: bấm Chọn màu trên màn hình rồi bấm vào điểm bất kỳ, kể cả ngoài trình duyệt (cửa sổ khác, Figma, Photoshop); tính năng dùng được trên Chrome và Edge máy tính. Trong phép thử tự động của chúng tôi, nút này mở được chế độ hút màu của trình duyệt, nhưng bước bấm chọn điểm cần chuột thật nên chúng tôi chưa kiểm chứng được kết quả. Vì vậy bài này không có ảnh minh hoạ cho cách đó.

Hai điều khác cần nói rõ:

  • Dòng gợi ý trên công cụ ghi "Di chuột trên ảnh để phóng to", nhưng trong phép thử trên Chrome (cửa sổ 1280 px) kính lúp không hiện ra khi di chuột. Nếu bạn cũng gặp như vậy, hãy dùng cách "bấm vài điểm rồi so sánh" ở trên.
  • Mã CMYK là quy đổi tham khảo. Trang công cụ ghi: "khi in thật nên kiểm tra với bảng màu của nhà in vì màu in phụ thuộc giấy và mực".

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

Ảnh tôi tải lên có bị gửi lên máy chủ không?

Trang công cụ trả lời: "Không. Ảnh chỉ được đọc trên trình duyệt để lấy màu, không gửi lên máy chủ." Trong phép thử, chúng tôi ghi lại các yêu cầu mà trang gửi đi khi mở ảnh và chọn màu: phần của công cụ chỉ gồm tên công cụ và một dòng mô tả lượt dùng (kích thước ảnh, mã màu vừa chọn), không kèm file ảnh.

HEX, RGB, HSL, CMYK: nên chép mã nào?

Làm web, Figma, Canva, PowerPoint: chép HEX. Viết CSS cần độ trong suốt hoặc phần mềm chỉ có ô R, G, B: chép RGB. Muốn tự chỉnh sáng tối, đậm nhạt bằng số: HSL. Gửi nhà in: CMYK chỉ để tham khảo, hãy hỏi nhà in hệ màu họ dùng.

Vì sao mã màu lấy từ ảnh logo trên mạng không khớp mã thương hiệu?

Ảnh JPG bị nén nên màu lệch vài đơn vị, mép logo bị pha màu, và nhiều ảnh trên mạng đã qua chỉnh sửa. Hãy dùng file PNG hoặc ảnh chụp màn hình từ website chính thức, bấm vào giữa mảng màu, và đối chiếu với bộ nhận diện thương hiệu nếu có.

Lấy mã màu từ ảnh có cần cài phần mềm không?

Không. Công cụ chạy trong trình duyệt. Theo trang công cụ, nó miễn phí, không cần đăng nhập và dùng được không giới hạn.

Công cụ có cho mã Pantone không?

Không. Công cụ chỉ cho HEX, RGB, HSL và CMYK. Mã Pantone cần tra theo bảng màu chính hãng.

Thử nghiệm ngày 13/10/2026 trên Chrome máy Mac, chưa đăng nhập, cửa sổ 1280 × 880 px và giả lập màn hình 390 px có thao tác chạm, với ảnh của Krisztian Tabori (2026) và William Wendling (2025) trên Unsplash cùng một ảnh chụp màn hình trang ColorME. Chưa thử: chọn màu trên màn hình ở cửa sổ khác, dán ảnh bằng Ctrl/Cmd + V, kéo thả, điện thoại thật, Edge, Safari, Firefox. Thuật ngữ trong bài: hue, saturation, tương phản, WCAG.

Thiết kế chuyên sâu Học Thiết kế chuyên sâu cùng ColorME 72 buổi · 15.900.000đ Xem khoá học