Trình chọn màu & trích xuất bảng màu - Chọn màu từ ảnh

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.

Có. Miễn phí, không cần tài khoản, không giới hạn kích thước ảnh hay số bảng màu được trích xuất. Không cần cài đặt gì cả — toàn bộ công cụ chỉ là một trang web duy nhất.

Không cần hình ảnh. Bộ chọn màu & vòng tròn màu ở phía trên hoạt động độc lập — kéo ô bão hòa/độ sáng và thanh trượt sắc độ, hoặc nhập bất kỳ giá trị HEX, RGB hay HSL nào để chọn chính xác một màu. Việc tải lên hình ảnh là tùy chọn, chỉ để hút màu từ một bức ảnh.

Chọn màu nền của bạn và bảng Phối màu hài hòa sẽ lập tức dựng nên các bộ phối màu bổ túc, tương đồng, bộ ba, bổ túc tách, bộ bốn và đơn sắc dựa trên lý thuyết vòng tròn màu. Nhấp vào bất kỳ ô màu nào để sao chép mã HEX của nó.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.