Chọn màu
Chọn bất kỳ màu nào và chuyển đổi tức thì giữa Hex, RGB, HSL, HSV, CMYK và nhiều định dạng khác, rồi sao chép dưới dạng CSS hoặc mã sẵn dùng cho Swift, Flutter, Tailwind cùng nhiều nền tảng khác. Mọi thứ chạy ngay trong trình duyệt nên nội dung bạn dán hay ảnh bạn tải lên không rời khỏi thiết bị.
Các bước sử dụng
- Nhập một giá trị vào ô nhập ở trên cùng — ô này nhận hex (
#ff6600),rgb(255,102,0),hsl(),cmyk(), hoặc tên màu nhưDodgerBlue— rồi nhấn Enter, hoặc dùng ô vuông trong thẻ Chọn màu cùng dải hue để kéo tới sắc độ mong muốn. - Tinh chỉnh bằng Thanh trượt RGB và Thanh HSL, hoặc nhập số chính xác vào các ô RGB / HSL / CMYK có thể chỉnh sửa trong mục Nhập.
- Để lấy màu từ một tấm ảnh, mở Chọn từ ảnh, kéo thả hoặc tải ảnh lên, di chuột để xem trước, rồi bấm vào bất kỳ điểm nào để lấy màu của điểm ảnh đó (các màu vừa lấy được lưu thành các ô mẫu).
- Xem màu của bạn ở mọi định dạng trong mục Tất cả định dạng và bấm biểu tượng sao chép ở từng dòng (HEX, RGBA, HSL, HSV, CMYK, HWB, CSS, Tailwind, SCSS, Swift, Flutter, Android, Kotlin, v.v.).
- Khám phá Hài hòa màu (bổ túc, tương đồng, tam giác) cùng các dải Sáng & Tối — bấm vào ô mẫu bất kỳ để đặt nó làm màu đang chọn.
- Bấm biểu tượng trái tim để lưu màu vào Yêu thích, hoặc duyệt danh sách Tên màu có tìm kiếm ở cuối trang.
- Gạt nút chuyển chế độ ngay dưới thẻ xem trước từ Chọn màu sang Bản đồ màu để có nguyên một trang nói về đúng màu bạn đang chọn.
- Trong Bản đồ màu, đọc mục Mọi cách viết — HEX, RGB, RGBA, HSL, HSV, CMYK, LAB, LCH và OKLCH, chín dòng, mỗi dòng có nút sao chép riêng — cùng Tên màu gần nhất in ngay dưới mã hex lớn ở đầu trang, kèm con số khoảng cách Δ hoặc chữ "khớp chính xác" nếu trùng khít.
- Bấm vào một ô bất kỳ trong Tông sáng & tối (tông sáng bên trái, tông tối bên phải) để đặt nó làm màu đang chọn và chạy lại toàn bộ bản đồ trên màu đó.
- Xem hai thẻ Tương phản trên nền trắng và Tương phản trên nền đen. Mỗi thẻ hiển thị mẫu chữ trên nền đó, tỷ lệ tương phản với hai chữ số thập phân, và năm kết luận WCAG gắn nhãn Đạt hoặc Không đạt: AA — Chữ thường, AA — Chữ lớn, AAA — Chữ thường, AAA — Chữ lớn, và Thành phần giao diện / đồ hoạ.
- Liếc qua thẻ Thị giác màu để thấy tám mô phỏng — Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia và Achromatomaly, các tên y học này giữ nguyên trên giao diện — bấm vào một ô là lấy luôn màu đã mô phỏng đó.
- Dùng thẻ Màu liên quan cho năm bộ phối màu — Màu bổ túc, Màu tương đồng, Bộ ba, Bổ túc xen kẽ và Bộ bốn — bấm ô nào là chọn màu đó, hoặc bấm Mở công cụ hài hòa màu để mở trang phối màu đầy đủ — trang đó mở ra với đúng màu bạn đang xem, không phải gõ lại mã hex.
Mẹo
- Kiểm tra tỷ lệ tương phản trong thẻ xem trước so với nền trắng và đen — nhãn "AA" nghĩa là cặp màu đạt chuẩn WCAG 4.5:1 cho chữ thường, còn "Fail" nghĩa là chưa đạt.
- Mọi ô mẫu đều có thể bấm được: hài hòa màu, các dải sáng & tối, màu yêu thích, tên màu và các màu lấy từ ảnh đều nạp ngay vào bộ chọn để bạn tiếp tục tinh chỉnh.
- Dùng dòng HEX8 hoặc các dòng riêng theo nền tảng (Flutter
0xFF..., số nguyên Android, C#FromArgb) để khỏi phải chuyển đổi thủ công khi đưa màu vào mã ứng dụng. - Hai chế độ dùng chung một màu. Màu bạn đang chọn ở chế độ Chọn màu chính là màu mà Bản đồ màu mô tả, và mỗi ô bạn bấm trong bản đồ lại trở thành lựa chọn mới — nên bạn qua lại giữa hai bên mà không mất dấu.
- Bản đồ màu là cách nhanh hơn để trả lời "màu này có đọc được không?": hai thẻ tương phản nằm cạnh nhau với đủ cả năm ngưỡng WCAG, thay vì xem từng tỷ lệ một.
- Thị giác màu chỉ là mô phỏng ở mức xấp xỉ, và trang cũng ghi rõ như vậy. Nó hữu ích để kiểm tra nhanh rằng hai màu trong biểu đồ sẽ không dính vào nhau, chứ không thay thế được việc thử nghiệm với người dùng thật.
- Hai công cụ màu chuyển màu qua lại cho nhau: Mở công cụ hài hòa màu đưa màu vào địa chỉ trang dưới dạng
/color-harmony?color=1677ff, còn liên kết Open in colour picker (mở bộ chọn màu) bên trang Phối Màu Hài Hòa gửi màu ngược trở lại đây. - Vì màu nằm ngay trong địa chỉ,
…/color-picker?color=1677fflà một liên kết chia sẻ đúng một màu — tiện khi cần chỉ cho đồng nghiệp chính xác sắc độ bạn muốn. - LAB, LCH và OKLCH là các không gian màu theo cảm nhận thị giác: bước đều trong đó thì mắt cũng thấy đều, nên chúng mới là cách viết đúng để dựng một dải màu đều tay — HSL thì không.
Câu hỏi thường gặp
Ảnh hoặc màu tôi tải lên có bị gửi lên máy chủ không?
Không. Bộ chọn màu, việc chuyển đổi và lấy màu từ ảnh đều chạy cục bộ trong trình duyệt, nên ảnh và màu của bạn không rời khỏi thiết bị.
Danh sách yêu thích có còn sau khi tôi đóng tab không?
Các màu trong Yêu thích và các ô màu lấy từ ảnh chỉ tồn tại trong phiên làm việc hiện tại, vì vậy hãy sao chép hoặc ghi lại những màu bạn muốn giữ trước khi rời trang.
Tôi có thể dán những định dạng nào vào ô nhập?
Hex (3–8 ký tự), rgb()/rgba(), hsl()/hsla(), cmyk(), và các tên màu CSS chuẩn đều được nhận diện tự động.
Chọn màu và Bản đồ màu khác nhau ở chỗ nào?
Chế độ Chọn màu dùng để chọn và chuyển đổi màu — ô vuông, thanh trượt, lấy màu từ ảnh, các dòng định dạng. Bản đồ màu lấy màu bạn đã có và báo cáo mọi thứ về nó trên một trang: đủ chín cách viết, dải nhạt–đậm, hai thẻ tương phản kèm kết luận WCAG, mô phỏng khiếm khuyết thị giác màu, tên màu gần nhất và năm bộ phối màu.
AA và AAA trong các thẻ tương phản nghĩa là gì?
Đó là các ngưỡng của WCAG. AA cần 4.5:1 với chữ thường và 3:1 với chữ lớn; AAA cần 7:1 và 4.5:1. Dòng thứ năm dành cho thành phần giao diện và đồ họa ở mức 3:1. Mỗi dòng được gắn nhãn Đạt hoặc Không đạt dựa trên tỷ lệ hiển thị phía trên.
Tôi có thể tạo liên kết mở thẳng một màu không?
Được. Thêm ?color= cùng mã hex vào địa chỉ trang — …/color-picker?color=1677ff. Dấu # có cũng được, không có cũng được (có thể hiện ra dưới dạng %23); mã rút gọn ba ký tự như f80 vẫn chạy; mã tám ký tự thì phần alpha được bỏ qua. Nếu thiếu hoặc không đọc được giá trị, trang mở bằng màu mặc định chứ không lỗi.
"Tên màu gần nhất" có phải cùng một màu không?
Thường là không. Đó là mục gần nhất trong danh sách tên màu chuẩn, và con số Δ bên cạnh cho biết nó lệch bao xa — chỉ khi ghi "khớp chính xác" thì hai màu mới trùng khít.