Color Picker & Palette Extractor - Chọn màu từ hình ảnh

Tải lên bất kỳ ảnh nào, nhấp để chọn màu pixel (HEX / RGB / HSL) hoặc tự động trích xuất bảng màu chủ đạo. Tải xuống dưới dạng biến JSON hoặc CSS.

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

Giới thiệu về Color Picker

Định lượng hình ảnh của bạn thành số lượng màu chủ đạo được yêu cầu bằng cách sử dụng nhóm 4 bit trên mỗi kênh, sau đó sắp xếp theo tần suất. Chạy hoàn toàn trong trình duyệt của bạn - hình ảnh của bạn không bao giờ rời khỏi thiết bị của bạn.

Tiếp tục cải thiện hình ảnh của bạn

Đưa chỉnh sửa ảnh của bạn lên một tầm cao mới với các công cụ phổ biến này

📝

Thêm văn bản vào hình ảnh

Thêm chú thích và tiêu đề vào ảnh nâng cao của bạn

🖼️

Thêm đường viền ảnh

Tạo khung hiệu ứng của bạn với các đường viền đẹp

🗜️

Nén hình ảnh

Tối ưu hóa hình ảnh nâng cao của bạn để chia sẻ

📐

Thay đổi kích thước hình ảnh

Thay đổi kích thước hình ảnh

Khám phá tất cả các công cụ ảnh

Frequently Asked Questions

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

usage

Hình ảnh được lấy mẫu xuống 320 pixel ở cạnh dài nhất của nó, sau đó mỗi pixel được nhóm bởi 4 bit trên cùng của nó trên mỗi kênh. Các nhóm có nhiều dân dụng nhất được tính trung bình trở lại màu 8 bit đầy đủ, được sắp xếp theo tần số 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 hình ảnh một cách trực quan.

technical

Đúng. Các nút Tải xuống 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 tệp JSON với hex, các thành phần RGB và tỷ lệ phần trăm trọng lượng cho mỗi màu. Cả hai định dạng đều tích hợp rõ ràng vào mã thông báo thiết kế, 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 cách sử dụng API canvas HTML. Hình ảnh vẫn ở trên thiết bị của bạn, giúp công cụ này an toàn cho ảnh sản phẩm chưa được phát hành, mô hình nháp và nội dung thương hiệu theo NDA.

privacy

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

tips

Các pixel có alpha dưới 128 bị bỏ qua, vì vậy nền trong suốt không làm ô nhiễm bảng màu với màu "nền". Điều này làm cho Bộ chọn màu hình ảnh đặc biệt tốt cho các phần cắt sản phẩm, tác phẩm nghệ thuật nhãn dán và các đối tượng bị cô lập.

technical

HEX (#RRGGBB) là nhỏ gọn nhất và là những gì CSS, Figma và Sketch sử dụng theo mặc định. RGB hiển thị ba giá trị thành phần từ 0-255 - hữu ích khi làm việc với dữ liệu hình ảnh theo chương trình. HSL (màu sắc, độ bão hòa, độ sáng) trực quan để điều chỉnh màu sắc: thay đổi màu sắc để thay đổi họ màu, điều chỉnh độ sáng cho sắc thái và sắc thái.

technical

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

pricing

Use Cases

Kiểm tra nhận diện thương hiệu

Lấy các giá trị HEX chính xác ra khỏi logo hoặc tài sản tiếp thị hiện có để đưa vào hướng dẫn phong cách của bạn. Phù hợp với màu sắc thương hiệu của đối thủ cạnh tranh cho một bộ bài hoặc sân định vị.

design

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

Trích xuất các màu chủ đạo từ ảnh hoặc bảng tâm trạng, xuất dưới dạng biến CSS và thả chúng vào stylesheet của bạn. Điểm ngọt 5-8 màu bao gồm các màu chính, điểm nhấn và màu trung tính cho một hạt giống hệ thống thiết kế đầy đủ.

design

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 chủ đề cửa hàng của bạn. Chọn màu nhấn chủ đạo từ ảnh giày thể thao hoặc váy và sử dụng nó làm điểm nổi bật của danh sách.

ecommerce

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

Chụp ảnh một căn phòng hoặc trang phục bạn thích và trích xuất bảng màu. Sử dụng nó để chọn sơn, vải hoặc phụ kiện bổ sung cho sơ đồ hiện có - biến cảm hứng hình ảnh thành các mẫu có thể hành động.

lifestyle

Sơ đồ trực quan hóa dữ liệu

Tạo một bảng màu phân loại gồm 10-16 màu bắt nguồn từ hình ảnh bạn muốn gợi lên (ví dụ: một bức tranh màu nước cho biểu đồ mềm, hoàng hôn cho gradient từ ấm đến lạnh). Tốt hơn là chọn màu chung chung.

data

Quy trình làm việc của tài sản trò chơi và giao diện người dùng

Trích xuất bảng màu được lập chỉ mục từ nghệ thuật sprite hoặc mô hình giao diện người dùng để đưa vào công cụ nghệ thuật pixel hoặc công cụ trò chơi. Bảng màu xuất JSON tích hợp với Aseprite, Photoshop và hầu hết các quy trình nội dung.

gamedev