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 nào, nhấp để chọn màu của một pixel (HEX / RGB / HSL) hoặc tự động trích xuất bảng màu chủ đạo. Tải về dưới dạng JSON hoặc biến CSS.

Thả một ảnh để trích xuất bảng màu của nó

PNG, JPG, WEBP, GIF

Tệp được tự động xóa sau khi xử lýKhông có hình mờSử dụng miễn phí — không cần đăng ký

Xong với Bộ chọn màu? Hãy thử tiếp các công cụ này

Những công cụ được chọn lọc kết hợp tốt với Bộ Chọn Màu. Tiếp tục làm việc mà không mất tệp của bạn.

Xem tất cả công cụ

Frequently Asked Questions

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.

usage

Ả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.

technical

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.

features

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.

privacy

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.

tips

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.

technical

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.

technical

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.

pricing

How Color Picker helps you get it done

Real problems it solves every day — for businesses, creators, and everyday tasks. Find the use case that fits you and start in seconds.

For Creators

Đánh giá nhận diện thương hiệu

Lấy chính xác các giá trị HEX từ một logo hoặc tài sản marketing có sẵn để đưa vào bộ hướng dẫn phong cách của bạn. Khớp màu thương hiệu của đối thủ cho bộ slide định vị hoặc bài pitch.

For Creators

Xây dựng bảng màu thiết kế web

Trích xuất các màu chủ đạo từ một bức ảnh hoặc bảng cảm hứng, xuất ra dưới dạng biến CSS và đưa thẳng vào tệp định kiểu của bạn. Khoảng 5-8 màu là điểm lý tưởng, bao gồm màu chính, màu nhấn và màu trung tính, làm nền tảng cho một hệ thống thiết kế hoàn chỉnh.

For E-commerce

Danh sách sản phẩm thương mại điện tử

Khớp màu nền ảnh sản phẩm với giao diện cửa hàng của bạn. Chọn màu nhấn chủ đạo từ ảnh giày thể thao hay váy và dùng nó làm điểm nhấn nổi bật cho mục đăng bán.

Personal Use

Cảm hứng nội thất & thời trang

Chụp một căn phòng hoặc trang phục bạn thích và trích xuất bảng màu. Dùng nó để chọn sơn, vải vóc hoặc phụ kiện bổ trợ cho tông màu hiện có — biến cảm hứng thị giác thành các mẫu màu thực tế.

For Developers

Bảng Phối Màu Trực Quan Hóa Dữ Liệu

Tạo bảng màu phân loại gồm 10-16 màu lấy từ một hình ảnh bạn muốn gợi cảm hứng (ví dụ: một bức tranh màu nước cho biểu đồ dịu nhẹ, một cảnh hoàng hôn cho dải màu chuyển từ ấm sang lạnh). Tốt hơn việc chọn các sắc màu chung chung.

For Creators

Quy trình tạo tài nguyên game & giao diện

Trích xuất bảng màu được lập chỉ mục từ sprite art hoặc bản phác giao diện để đưa vào công cụ pixel-art hoặc game engine. Tệp JSON bảng màu xuất ra tương thích với Aseprite, Photoshop và hầu hết các quy trình xử lý tài nguyên.