Color Picker Online giúp bạn chọn màu trực quan, xem mã màu tương ứng và sao chép để sử dụng ngay. Công cụ hỗ trợ HEX, RGB, HSL, HSV và CMYK, đồng thời có thể lấy màu trực tiếp từ màn hình trên các trình duyệt tương thích.
Bạn có thể dùng công cụ khi thiết kế website, chỉnh sửa ảnh, tạo giao diện hoặc đơn giản là cần tìm chính xác mã của một màu đang nhìn thấy.
Color Picker là gì?
Color Picker là công cụ dùng để chọn một màu và xác định các giá trị đại diện cho màu đó.
Thay vì phải tự đoán một màu xanh, đỏ hay tím đang dùng mã nào, bạn chỉ cần chọn màu trực tiếp trên bảng màu. Công cụ sẽ tự động hiển thị các mã tương ứng như HEX, RGB, HSL, HSV và CMYK.
Ví dụ, một màu có thể được biểu diễn dưới nhiều dạng khác nhau:
HEX: #3B82F6
RGB: 59, 130, 246
HSL: 217, 91%, 60%
Màu hiển thị vẫn tương đương nhau, chỉ khác cách biểu diễn.
Color Picker dùng để làm gì?
Công cụ chọn màu online hữu ích trong nhiều trường hợp, đặc biệt khi bạn thường xuyên làm việc với màu sắc, nhất là khi chỉnh sửa ảnh với Photoshop online.
Bạn có thể sử dụng Color Picker để:
- Chọn màu cho chữ, nút, nền hoặc các thành phần trên website;
- Tìm mã HEX hoặc RGB để sử dụng trong CSS;
- Xem một màu có những sắc độ sáng và tối nào;
- Kiểm tra nhanh màu tương ứng với một mã đang có;
- Chuyển một màu sang các hệ HEX, RGB, HSL, HSV và CMYK;
- Sao chép mã màu chỉ với một lần nhấp;
- Lấy màu đang hiển thị trên màn hình.
Ví dụ, nếu đang thiết kế một nút màu xanh nhưng chưa tìm được sắc độ phù hợp, bạn có thể chọn màu trên bảng, xem các sắc độ được gợi ý rồi sao chép mã cần sử dụng.
Khi nào nên sử dụng Color Picker?
Color Picker phù hợp khi bạn cần một màu chính xác thay vì lựa chọn bằng mắt.
Nếu làm website, bạn có thể dùng công cụ để xác định mã màu cho giao diện, tiêu đề, nút bấm hoặc nền.
Khi chỉnh sửa ảnh, Color Picker giúp kiểm tra và lưu lại một màu để tiếp tục sử dụng trong phần mềm chỉnh sửa.
Nếu đã có sẵn một mã HEX, RGB, HSL, HSV hoặc CMYK, bạn cũng có thể nhập mã đó vào công cụ để xem màu thực tế và các giá trị tương ứng trong những hệ màu còn lại.
Ngoài ra, tính năng lấy màu từ màn hình đặc biệt tiện khi bạn bắt gặp một màu đẹp trên website, ảnh, ứng dụng hoặc giao diện đang mở và muốn biết chính xác mã màu của nó.
Cách sử dụng Color Picker Online
Cách đơn giản nhất là chọn màu trực tiếp trên bảng màu.
Chọn màu bằng bảng màu
Di chuyển con trỏ trong vùng màu lớn để thay đổi độ bão hòa và độ sáng của màu.
Thanh màu nằm phía dưới dùng để thay đổi Hue, giúp chuyển nhanh giữa các nhóm màu như đỏ, cam, vàng, xanh lá, xanh dương hoặc tím.
Khi bạn thay đổi vị trí chọn, màu hiện tại và các mã màu tương ứng sẽ được cập nhật tự động.
Chọn sắc độ sáng hoặc tối
Bên dưới bảng chọn màu có các sắc độ khác nhau của màu hiện tại.
Bạn có thể xem nhanh những phiên bản sáng hoặc tối hơn để tìm màu phù hợp mà không phải tự điều chỉnh nhiều lần.
Nhấp vào một sắc độ để sao chép mã HEX của màu đó.
Nhập mã màu có sẵn
Nếu đã biết mã màu, bạn có thể nhập trực tiếp vào một trong các ô:
HEX
RGB
HSL
HSV
CMYK
Sau khi nhập xong, nhấn Enter.
Color Picker sẽ hiển thị màu tương ứng và tự cập nhật các định dạng còn lại. Đây là cách nhanh để kiểm tra một mã màu hoặc xem cùng một màu được biểu diễn như thế nào trong các hệ màu khác nhau.
Sao chép mã màu
Mỗi ô mã màu có biểu tượng sao chép ở bên phải.
Nhấp vào biểu tượng này để sao chép giá trị. Khi sao chép thành công, biểu tượng sẽ chuyển thành dấu tích trong thời gian ngắn để bạn biết thao tác đã hoàn tất.
Với RGB và HSL, mã được sao chép theo dạng có thể sử dụng thuận tiện trong CSS, chẳng hạn rgb(…) hoặc hsl(…).
Cách lấy màu từ màn hình
Ngoài việc tự chọn màu, Color Picker Online còn có nút Lấy màu từ màn hình.
Tính năng này giúp bạn chọn trực tiếp một màu đang hiển thị trên màn hình mà không cần chụp ảnh rồi tải ảnh lên.
Cách sử dụng:
- Nhấn Lấy màu từ màn hình.
- Trình duyệt sẽ mở công cụ lấy màu và con trỏ chuyển sang chế độ chọn màu.
- Di chuyển con trỏ đến vị trí có màu bạn muốn lấy.
- Nhấp vào điểm đó để chọn.
- Color Picker sẽ nhận màu vừa lấy và tự động cập nhật HEX, RGB, HSL, HSV và CMYK.
Lấy mã màu từ trang web khác
Nếu muốn lấy mã màu từ một trang web ở tab khác, hãy dùng tính năng chia đôi màn hình của máy tính để đặt tab đó song song với trang chứa công cụ, sau đó chỉ cần nhấp vào nút Lấy mã màu từ màn hình rồi nhấp chuột để chọn màu.
Vì sao không thấy nút lấy màu từ màn hình trên thiết bị?
Tính năng này sử dụng EyeDropper API và phụ thuộc vào khả năng hỗ trợ của trình duyệt.
Nếu trình duyệt hiện tại không hỗ trợ EyeDropper, nút Lấy màu từ màn hình sẽ không xuất hiện nhằm giúp giao diện gọn gàng hơn. Trong trường hợp đó, bạn vẫn có thể sử dụng bình thường các chức năng chọn màu, nhập mã và sao chép mã màu.
Các mã màu được hỗ trợ
Color Picker hiện hỗ trợ năm hệ màu phổ biến.
HEX
HEX thường được sử dụng trong thiết kế website và CSS, có dạng như #FF5733.
Đây là một trong những loại mã màu phổ biến nhất khi làm web.
RGB
RGB sử dụng ba giá trị Red, Green và Blue, mỗi thành phần thường nằm trong khoảng từ 0 đến 255.
Ví dụ: 255, 87, 51
RGB được sử dụng rộng rãi cho nội dung hiển thị trên màn hình.
HSL
HSL gồm Hue, Saturation và Lightness.
Cách biểu diễn này thuận tiện khi muốn điều chỉnh màu theo sắc độ, độ bão hòa hoặc độ sáng.
HSV
HSV gồm Hue, Saturation và Value.
Hệ màu này thường xuất hiện trong các công cụ chọn màu vì khá trực quan khi người dùng cần thay đổi màu.
CMYK
CMYK gồm Cyan, Magenta, Yellow và Key.
Đây là hệ màu thường gặp trong lĩnh vực in ấn. Công cụ giúp bạn xem nhanh giá trị CMYK tương ứng với màu đang chọn.
Chọn và lấy mã màu nhanh ngay trên trình duyệt
Với Color Picker Online, bạn không cần cài thêm phần mềm chỉ để tìm một mã màu. Tất cả thao tác từ chọn màu, xem sắc độ, nhập mã, sao chép đến lấy màu trực tiếp từ màn hình đều có thể thực hiện ngay trên trình duyệt.
Nếu thường xuyên thiết kế website, chỉnh sửa hình ảnh hoặc làm việc với màu sắc, bạn có thể lưu lại công cụ chọn màu online này để sử dụng khi cần tìm nhanh một màu chính xác.