Bộ chọn & chuyển đổi màu Hex (RGB, HSL, HSV, CMYK, OKLCH)
Chuyển mọi màu sang HEX, RGB, HSL, HSV, CMYK và OKLCH, kiểm tra tương phản, sao chép mẫu hòa sắc và xuất CSS hoặc JSON—ngay trong trình duyệt.
Nhập hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() hoặc tên màu CSS. Giá trị không hợp lệ giữ chuyển đổi hợp lệ cuối cùng.
Tên CSS gần nhất: royalblue
Chuyển đổi
Trên nền trắng
3.68:1
Đạt WCAG AA (chỉ văn bản lớn)
Trên nền đen
5.71:1
Đạt WCAG AA (văn bản thường)
Xuất mẫu màu
Chọn hoặc dán bất kỳ định dạng màu nào, chuyển sang HEX, RGB, HSL, HSV, CMYK và OKLCH, kiểm tra độ tương phản WCAG, tạo mẫu hòa sắc, sao chép giá trị và xuất CSS hoặc JSON. Miễn phí, nhanh và chạy hoàn toàn trong trình duyệt.
Cách sử dụng bộ chọn màu này
Nhập hoặc dán bất kỳ định dạng màu nào được hỗ trợ, điều chỉnh độ mờ hoặc dùng bộ chọn gốc. Trang chuyển đổi ngay sang HEX, RGB, HSL, HSV, CMYK và OKLCH, hiển thị độ tương phản WCAG trên trắng và đen, tạo mẫu hòa sắc và dải tông/sắc độ, giữ mọi thứ sẵn sàng sao chép. Chia sẻ thiết lập qua URL—trạng thái lưu trong chuỗi truy vấn.
Tham chiếu HEX, RGB, HSL, HSV, CMYK và OKLCH
Hex là mã hóa RGB gọn. RGB mô tả kênh đỏ/xanh lá/xanh dương. HSL biểu thị tông, độ bão hòa và độ sáng; HSV dùng tông, độ bão hòa và giá trị (độ sáng). CMYK mô hình phần trăm mực in. OKLCH là không gian màu CSS đồng nhất về cảm nhận. Công cụ dùng tính toán xác định trong trình duyệt—không tải lên và không API bên ngoài.
Bổ sung, tương tự, tam giác, bổ sung tách, tứ giác và đơn sắc
Bổ sung xoay tông 180°. Tương tự bước tông theo góc cố định quanh màu gốc. Tam giác dùng offset 120°. Bổ sung tách thêm hai tông gần màu bổ sung. Tứ giác dùng offset hình chữ nhật 90°. Đơn sắc giữ tông và thay đổi độ sáng. Điều khiển số lượng áp dụng cho chế độ tương tự và đơn sắc.
Biến CSS và xuất JSON
Xuất tạo thuộc tính tùy chỉnh :root với tên ổn định (ví dụ --color-base, --color-analogous-1) và JSON gồm baseHex, alpha, namedColor, chế độ hòa sắc, tỷ lệ tương phản và danh sách mẫu cho script hoặc token thiết kế.
Kiểm tra độ tương phản WCAG
Tỷ lệ tương phản tính từ độ sáng tương đối theo WCAG 2.x. AA yêu cầu 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn; AAA yêu cầu 7:1. Dùng xem trước khi chọn màu chữ hoặc giao diện trên nền sáng hoặc tối.
Câu hỏi thường gặp
Tôi có thể nhập định dạng màu nào?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() và tất cả tên màu CSS chuẩn như cornflowerblue hoặc rebeccapurple.
#ABC có mở rộng thành sáu chữ số không?
Có. Hex ba chữ số mở rộng theo từng cặp chữ số, nên #ABC thành #AABBCC.
Điều gì xảy ra nếu màu của tôi không hợp lệ?
Bạn thấy lỗi nội tuyến. Màu hợp lệ cuối cùng vẫn ở hàng chuyển đổi, bộ chọn và xuất cho đến khi bạn nhập lại giá trị hợp lệ.
Kiểm tra tương phản WCAG hoạt động thế nào?
Nó tính tỷ lệ tương phản giữa màu của bạn và trắng hoặc đen thuần bằng độ sáng tương đối. Kết quả cho biết màu có đạt ngưỡng AA hoặc AAA cho văn bản thường hoặc lớn.
Màu hòa sắc được tính như thế nào?
Chúng xác định: bổ sung là dịch tông 180°; tương tự dùng bước tông cố định; tam giác offset 120°; bổ sung tách tông gần màu bổ sung; tứ giác offset hình chữ nhật 90°; đơn sắc thay đổi độ sáng giữ tông và độ bão hòa từ gốc.
Xuất JSON gồm những gì?
Khóa ổn định: baseHex, alpha, namedColor, harmony, harmonyCount khi áp dụng, harmonySwatches, tintShadeStrip, stripCount và tỷ lệ tương phản—phù hợp công cụ hoặc tài liệu.
Tôi có thể chia sẻ màu của mình không?
Có. URL cập nhật với hex, alpha, chế độ hòa sắc, số lượng và kích thước dải để bạn đánh dấu hoặc chia sẻ thiết lập chính xác.