Grab the exact color from any image

Tải lên bất kỳ ảnh JPG, PNG, WebP hoặc GIF nào và nhấp vào bất cứ đâu trên ảnh hiển thị — đúng pixel ngay dưới con trỏ của bạn sẽ được lấy mẫu và hiển thị dưới dạng HEX, RGB và HSL với nút sao chép một lần nhấp cho từng định dạng. Hoàn hảo để khớp màu thương hiệu, lấy mẫu một mảng màu từ ảnh chụp, hoặc lấy các tông màu nhấn từ một bản thiết kế mẫu.

Nhấp vào bất kỳ điểm ảnh nào và công cụ chọn màu này sẽ hiển thị mã màu HEX của nó (ví dụ #FF6B35) cùng với RGB và HSL — chính là những mã màu HTML/CSS bạn dán thẳng vào stylesheet, design token hoặc thuộc tính HTML. Nhấn Sao chép để lấy mã hex chỉ với một cú nhấp.

Ảnh được giảm mẫu xuống 320 pixel ở cạnh dài nhất, sau đó mỗi pixel được phân nhóm theo 4 bit cao nhất trên mỗi kênh. Các nhóm đông nhất được lấy trung bình trở lại màu 8-bit đầy đủ, sắp xếp theo tần suất, và trả về dưới dạng bảng màu của bạn. Kết quả thường là 5-24 màu chủ đạo tóm tắt trực quan toàn bộ ảnh.

Có. Các nút Tải về tạo ra hai định dạng: một khối biến CSS sẵn sàng dán vào bộ chọn :root (--color-1, --color-2…), và một file JSON với mã hex, các thành phần RGB và tỷ lệ phần trăm trọng số cho mỗi màu. Cả hai định dạng đều tích hợp gọn gàng vào design token, cấu hình Tailwind và thư viện bảng màu.

Không — việc chọn màu và trích xuất bảng màu diễn ra hoàn toàn trong trình duyệt của bạn bằng HTML canvas API. Ảnh vẫn nằm trên thiết bị của bạn, điều này khiến công cụ an toàn cho ảnh sản phẩm chưa ra mắt, bản mockup nháp và tài nguyên thương hiệu thuộc diện NDA.

Với công việc nhận diện thương hiệu, 5-8 màu là mức lý tưởng — đủ nắm bắt chủ đề chủ đạo mà không làm loãng các lựa chọn màu nhấn. Với trực quan hóa dữ liệu, chúng tôi khuyên dùng 10-16 màu để bạn có đủ sắc thái phân loại. Thanh trượt cho phép bạn chọn từ 5 đến 24.

Các điểm ảnh có alpha dưới 128 sẽ bị bỏ qua, nên nền trong suốt không làm ô nhiễm bảng màu bằng các màu "nền". Điều này khiến công cụ chọn màu ảnh đặc biệt phù hợp với ảnh sản phẩm tách nền, tác phẩm nhãn dán và các chủ thể tách biệt.

HEX (#RRGGBB) là dạng gọn nhất và là định dạng mà CSS, Figma và Sketch dùng mặc định. RGB hiển thị ba giá trị thành phần từ 0-255 — hữu ích khi xử lý dữ liệu hình ảnh bằng lập trình. HSL (sắc độ, độ bão hòa, độ sáng) trực quan để điều chỉnh màu: dịch chuyển sắc độ để đổi nhóm màu, điều chỉnh độ sáng để tạo các sắc nhạt và đậm.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

Trong công cụ Bảng chọn màu & Vòng màu độc lập, chỉnh màu của bạn và bảng điều khiển sẽ hiển thị tỷ lệ tương phản của nó so với trắng thuần và đen thuần cùng với xếp hạng WCAG — AAA, AA, AA Large, hoặc Fail. Dùng tính năng này trước khi chốt màu chữ hoặc nút để nó vẫn dễ đọc và đáp ứng nguyên tắc trợ năng WCAG 2.1.

Có. Công cụ Color Picker & Wheel độc lập hiển thị màu CSS có tên khớp gần nhất bên cạnh bất kỳ giá trị HEX, RGB hoặc HSL nào bạn đã chọn, rất tiện để mô tả nhanh một sắc màu trong bản tóm tắt, phiếu công việc hoặc tài liệu thiết kế mà không cần đoán.

Nhấn Ngẫu nhiên trong Bộ chọn màu & Bánh xe màu để nhảy đến một màu mới, rồi dùng bảng Hòa sắc màu bên dưới để xem các bảng màu bổ túc, tương đồng, tam giác và các bảng phối hợp khác được tạo từ màu đó — một cách nhanh để tìm điểm khởi đầu khi bạn thiết kế từ đầu thay vì lấy màu từ một ảnh có sẵn.

Dùng menu thả xuống Kích thước phía trên bảng màu để chọn 5, 8, 10, 16 hoặc 24 màu chủ đạo — bảng màu được tính lại ngay lập tức khi bạn thay đổi. Kết hợp một kích thước nhỏ như 5 cho một bảng màu thương hiệu gọn gàng với ống hút màu để lấy một hoặc hai sắc độ nhấn chính xác mà việc trích xuất tự động có thể lấy trung bình đi mất.

Có — Color Picker & Wheel độc lập hiển thị tỷ lệ tương phản của màu hiện tại của bạn so với trắng thuần và đen thuần ngay dưới ô màu, được gắn nhãn AAA, AA, AA Large hoặc Fail theo các ngưỡng WCAG (7:1, 4.5:1, 3:1). Dùng nó để kiểm tra một cặp văn bản/nền có đạt tiêu chuẩn về khả năng tiếp cận trước khi bạn chốt một màu thiết kế.

Color Picker & Wheel tự động khớp bất kỳ màu nào bạn đã chọn — qua bộ chọn, ô HEX, hoặc các trường RGB/HSL — với tên màu CSS chuẩn gần nhất, hiển thị là 'Closest name' bên cạnh ô màu. Đây là một cách nhanh để mô tả một màu bằng lời hoặc tìm màu tương đương an toàn cho web gần nhất.

Có — mỗi lần nhấp hoặc chạm vào hình ảnh đã tải lên sẽ thêm một mẫu màu mới vào danh sách Picked Colors thay vì thay thế mẫu cuối, nên bạn có thể xây dựng một bộ màu điểm ảnh chính xác tùy chỉnh từ các phần khác nhau của một tấm ảnh. Xóa bất kỳ mẫu nào bằng nút × của nó, hoặc xóa toàn bộ danh sách bằng Clear picked.

Có — nút Random (biểu tượng xáo trộn) trong Color Picker & Wheel nhảy đến một tổ hợp sắc màu, độ bão hòa và độ sáng mới chỉ bằng một cú nhấp, hữu ích để phá vỡ bế tắc sáng tạo hoặc khám phá một bảng màu mà bạn sẽ không tự gõ vào bằng tay. HEX, RGB, HSL và các mẫu hòa sắc bên dưới đều cập nhật cùng nhau.

Trên màn hình cảm ứng, kéo ngón tay qua ảnh để xem trước màu bên dưới nó trong một ô màu nổi trực tiếp, rồi nhấc ngón tay lên để thêm chính điểm ảnh đó vào danh sách Màu đã chọn của bạn — không cần chạm xác nhận riêng. Cùng menu kích thước bảng màu và các nút xuất hoạt động y hệt trên di động.

Có. Bánh xe màu ở đầu trang có nút Random (Ngẫu nhiên) để nhảy đến một màu bất kỳ và hiển thị ngay mã HEX, RGB và HSL, tên màu gần nhất, tỷ lệ tương phản trên nền trắng và đen, cùng đầy đủ các bộ phối màu — bổ túc, tương tự, bộ ba, bổ túc chia đôi, bộ bốn và đơn sắc. Đây là cách nhanh để khám phá điểm khởi đầu cho một bảng màu.

Công cụ này lấy mẫu màu từ ảnh bạn tải lên hoặc từ bánh xe màu tích hợp sẵn, chứ không đọc trực tiếp từ màn hình. Cách nhanh nhất để thay thế công cụ hút màu màn hình: chụp ảnh màn hình, thả vào trang này, rồi nhấp vào đúng pixel bạn cần — bạn sẽ nhận được mã HEX, RGB và HSL tương tự mà không cần cài tiện ích mở rộng, và ảnh chụp màn hình không bao giờ rời khỏi trình duyệt của bạn.