Bộ chọn màu từ hình ảnh - Nhận mã màu HEX và RGB

Tải lên bất kỳ JPG, PNG, WebP hoặc GIF nào và nhấp vào bất kỳ vị trí nào 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 chỉ bằng một cú nhấp chuột cho mỗi định dạng. Hữu ích để kết hợp màu sắc thương hiệu, lấy mẫu mẫu từ một bức ảnh hoặc lấy tông màu nhấn từ mô hình thiết kế.

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.

Vâng. Nó chạy trong trình duyệt và không cần tài khoản. Không cần cài đặt gì và không có giới hạn về số lượng bảng màu bạn kiểm tra.

Không cần ảnh. Công cụ chọn màu & bánh xe 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 giá trị HEX, RGB hay HSL bất kỳ để chọn chính xác một màu. Tải ảnh lên chỉ là tùy chọn, dùng để hút màu trực tiếp từ ảnh.

Chọn màu nền tảng của bạn và bảng Phối màu hài hòa sẽ ngay lập tức tạo ra các bảng màu bổ túc, tương đồng, tam giác, bổ túc chia đôi, tứ giác 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 màu nào để sao chép mã HEX của nó.

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.

Có — Pixoate hỗ trợ xử lý hàng loạt và hàng loạt. Chuyển sang chế độ Hàng loạt, thêm tối đa 60 hình ảnh trên Premium hoặc 200 trên Pro, đặt tùy chọn của bạn một lần và mọi hình ảnh đều được xử lý với cùng cài đặt trước khi bạn tải xuống một bảng tính — một hàng bảng màu cho mỗi hình ảnh. Xử lý hàng loạt là một tính năng Cao cấp; đầu ra sử dụng cùng chất lượng và cài đặt như chế độ đơn.

Có — với tính năng xử lý hàng loạt, bạn định cấu hình cài đặt một lần và chúng áp dụng cho mọi mục trong lô — tối đa 60 hình ảnh trên Premium hoặc 200 trên Pro. Không cần phải lặp lại thiết lập cho mỗi mục và quá trình trích xuất Bảng màu sẽ chạy trong trình duyệt của bạn; chỉ bảng tính đã hoàn thành mới được lưu để tải xuống.

Gần như luôn do một trong ba nguyên nhân. Tệp vượt quá giới hạn tải lên miễn phí 11 MB — Premium hỗ trợ 50 MB và Pro 120 MB. Hoặc định dạng không được công cụ này hỗ trợ, vì vậy hãy kiểm tra danh sách trên bảng tải lên. Hoặc tệp không thực sự có định dạng như tên gọi: đổi tên tệp không làm thay đổi nội dung bên trong, và đó là lý do một hình ảnh có vẻ hợp lệ vẫn bị từ chối.

Nó báo cáo những gì thực sự có trong tệp, do đó, kết quả trống hoặc đáng ngạc nhiên thường có nghĩa là dữ liệu không bao giờ có ở đó — bị ứng dụng lưu lần cuối xóa bỏ, bị nền tảng xóa khi tải lên hoặc vắng mặt khỏi bản gốc. Hãy thử tệp gốc chưa được chỉnh sửa trực tiếp từ máy ảnh hoặc nguồn thay vì bản sao được gửi qua ứng dụng nhắn tin.

Không. Bạn có thể chạy Color Picker và tải xuống kết quả miễn phí mà không cần có tài khoản và nó không có hình mờ. Premium là thứ bạn mua khi giới hạn bắt đầu bị giới hạn: tối đa 60 tệp trong một đợt, tải lên lớn hơn, không có giới hạn hàng ngày và kết quả có độ phân giải gốc. Không có gì được tiết lộ ở bước tải xuống mà bạn không thể nhìn thấy trước khi bắt đầu.

Không — Bộ chọn màu chạy trong trình duyệt trên máy tính để bàn và điện thoại. Không cần cài đặt gì, không cần dùng thử để bắt đầu và không cần mua giấy phép trước khi bạn có thể xem liệu nó có đáp ứng được những gì bạn cần hay không. Hãy thử nó trên tập tin mà bạn thực sự đang gặp khó khăn thay vì một tập tin mẫu.