🎨

Color Picker từ Image

Drop ảnh và click để pick màu (HEX/RGB/HSL). Tự động trích bảng màu chủ đạo (8 màu). Chạy 100% trong browser với Canvas API — ảnh KHÔNG upload đi đâu.

Tất cả công cụ Browser-only

🖼️

Chọn ảnh hoặc kéo thả vào đây

JPG, PNG, WebP, GIF — chạy hoàn toàn trong trình duyệt

Selected

HEX—

RGB—

HSL—

Lịch sử

Bảng màu chủ đạo

Pick màu từ ảnh — drop ảnh và click. Tool dùng Canvas API, ảnh KHÔNG upload lên server. Có thể tắt mạng để kiểm chứng.

Khi nào dùng?

Branding: upload logo → trích palette chủ đạo cho website.
Match màu UI: screenshot từ Figma hoặc Dribbble → pick chính xác màu để recreate.
Inspiration: ảnh phong cảnh đẹp → trích palette làm theme.
Replace stock photo: tìm màu chủ đạo trong photo để chọn ảnh thay thế phù hợp tone.

Cách hoạt động

Click vào ảnh → đọc pixel tại vị trí đó qua canvas.getImageData().
Output cả 3 format phổ biến: HEX (cho CSS), RGB (cho design tool), HSL (để chỉnh tone).
"Trích palette" → đếm tần suất các bin màu (mask 6-bit/channel) → top 8 màu phổ biến nhất.
Lịch sử lưu 12 màu pick gần nhất — bấm lại để xem lại.

Privacy

Ảnh bạn drop vào KHÔNG bị upload — toàn bộ xử lý dùng FileReader + Canvas API trong trình duyệt. Mở DevTools → tab Network: không có request nào với file ảnh. Tắt mạng cũng vẫn chạy bình thường.

Phù hợp với ai

Content creator, designer, developer làm việc với ảnh/media — nén trước khi upload, encode base64 cho LLM vision, sinh QR.

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

Ảnh có được upload lên TopDev không?

Không bao giờ. Toàn bộ xử lý ảnh dùng Canvas API trong trình duyệt. Bạn có thể tắt mạng và tool vẫn chạy bình thường — đây là cách kiểm chứng.

Có lưu lịch sử ảnh đã xử lý không?

Không. Sau khi tải xuống, ảnh sẽ biến mất khỏi tab khi bạn rời trang. Không có account, không có cloud storage.

Công cụ liên quan

Xem tất cả công cụ →

MỚI

📱

Tạo mã QR

QR cho URL, WiFi, vCard. Tùy chỉnh màu, tải PNG.

MỚI

🖼

Placeholder Image URL Builder

Sinh URL ảnh placeholder (Lorem Picsum) cho mockup, prototype. 6 tỉ lệ chuẩn + 5 size phổ biến + grayscale + blur.

MỚI

🗜️

Nén ảnh online

Nén JPG/PNG/WebP, resize, đổi format — chạy trong browser với Canvas API. Ảnh KHÔNG upload đi đâu.

MỚI

🦓

TypeScript → Zod Schema

Convert TS interface/type/enum sang Zod schema runtime validation. Primitive, optional, array, union, literal, enum.