Chuyển Đổi Mã Màu Mọi Định Dạng

Chào mừng bạn đến với Chuyển đổi Mã màu Mọi Định dạng, một công cụ trực tuyến miễn phí giúp chuyển đổi bất kỳ giá trị màu nào sang mọi định dạng phổ biến cùng một lúc. Hãy dán mã HEX, bộ ba RGB, định nghĩa HSL hoặc HSV, bộ bốn CMYK, hoặc thậm chí là tên màu CSS — và đọc ngay các giá trị tương đương, xem ô màu xem trước trực tiếp, kiểm tra độ tương phản trợ năng WCAG và khám phá bảng màu thiết kế được tạo ra gồm các màu bổ túc, bộ ba, tương đồng, sắc thái sáng và tối.

Tại sao nên sử dụng bộ chuyển đổi màu tất cả trong một?

Hầu hết các bộ chuyển đổi màu trực tuyến chỉ xử lý một hướng (HEX sang RGB, hoặc RGB sang CMYK), buộc bạn phải kết hợp nhiều công cụ khi cần một bức tranh toàn diện. Bộ chuyển đổi này chấp nhận mọi định dạng phổ biến trong một trường duy nhất, tự động phát hiện định dạng bạn đã nhập và trả về cả năm định dạng cùng lúc với bản xem trước trực tiếp — giúp bạn tiết kiệm nhiều bước khi làm việc giữa các công cụ web, di động, in ấn và thiết kế.

Các định dạng đầu vào được hỗ trợ

Sự khác biệt giữa mô hình màu HSL và HSV là gì?

Cả HSL và HSV đều mô tả màu sắc thông qua ba kênh trực quan — Hue (Sắc thái), Saturation (Độ bão hòa) và giá trị thứ ba liên quan đến độ sáng — nhưng chúng khác nhau ở kênh thứ ba đó.

• HSL — Hue, Saturation, Lightness: độ sáng (lightness) nằm trong khoảng từ 0% (đen tinh khiết) qua 50% (phiên bản rực rỡ nhất của sắc thái) đến 100% (trắng tinh khiết). HSL được ưu tiên trong CSS vì nó giúp việc làm sáng hoặc làm tối một màu trở nên đối xứng và dễ dự đoán hơn.
• HSV / HSB — Hue, Saturation, Value (Brightness): giá trị (value) nằm trong khoảng từ 0% (đen tinh khiết) đến 100% (phiên bản đầy đủ nhất, bão hòa nhất của sắc thái). HSV là mô hình đằng sau các trình chọn màu trong Photoshop, Figma và hầu hết các công cụ thiết kế máy tính để bàn.

Ví dụ, một màu đỏ bão hòa hoàn toàn là hsl(0, 100%, 50%) trong HSL nhưng là hsv(0, 100%, 100%) trong HSV. Cùng một màu sắc nhưng trong hai mô hình tư duy khác nhau — cả hai đều hữu ích, tùy thuộc vào việc bạn đang tư duy như một người viết CSS hay như một họa sĩ.

Tại sao các giá trị CMYK của tôi trông hơi khác so với phần mềm in ấn?

RGB là mô hình cộng màu được sử dụng bởi màn hình, trong khi CMYK là mô hình trừ màu được sử dụng bởi máy in. Việc chuyển đổi toán học mà công cụ này thực hiện là một phép xấp xỉ nhanh không bao gồm bất kỳ cấu hình màu ICC, giới hạn độ phủ mực hoặc điều chỉnh cụ thể cho từng loại giấy nào. Đối với công việc in ấn thành phẩm, hãy luôn dựa vào cấu hình CMYK được quản lý màu của phần mềm thiết kế (chẳng hạn như US Web Coated SWOP v2 hoặc Coated FOGRA39). Hãy sử dụng bộ chuyển đổi này như một tham chiếu nhanh khi bạn chỉ cần một bộ CMYK "đủ gần" cho các cuộc thảo luận thiết kế giai đoạn đầu.

Kiểm tra độ tương phản WCAG hoạt động như thế nào?

Hướng dẫn Trợ năng Nội dung Web (WCAG) định nghĩa tỷ lệ tương phản giữa hai màu dựa trên độ chói tương đối của chúng — một mô hình độ sáng cảm nhận được ưu tiên trọng số cho màu xanh lá hơn màu đỏ và màu đỏ hơn màu xanh dương. Tỷ lệ chạy từ 1:1 (không có độ tương phản) đến 21:1 (đen tinh khiết trên trắng tinh khiết).

• AAA — tỷ lệ ≥ 7:1, đáp ứng cấp độ trợ năng nghiêm ngặt nhất cho văn bản nội dung
• AA — tỷ lệ ≥ 4.5:1, mức tối thiểu cho văn bản nội dung trong hầu hết các quy định
• AA Large — tỷ lệ ≥ 3:1, đủ cho văn bản lớn (18pt+ hoặc 14pt đậm) và các yếu tố giao diện đồ họa
• Fail — tỷ lệ < 3:1, không nên sử dụng tổ hợp này cho văn bản

Công cụ tính toán độ tương phản so với trắng tinh khiết và đen tinh khiết, sau đó làm nổi bật lựa chọn tốt hơn làm màu chữ mặc định của bạn khi sắc thái này được sử dụng làm nền.

Bộ chuyển đổi có tạo bảng màu không?

Có. Sau mỗi lần chuyển đổi, công cụ sẽ xây dựng một bảng màu thiết kế từ cùng một sắc thái màu, bao gồm:

• Bổ túc (Complementary) — màu đối diện trực tiếp trên vòng tròn (quay sắc thái 180°), hữu ích cho các điểm nhấn có độ tương phản cao
• Bộ ba (Triadic) — hai màu cách đều nhau 120°, cân bằng và rực rỡ
• Tương đồng (Analogous) — các sắc thái lân cận ở mức ±30°, hữu ích cho các dải màu và nền hài hòa
• Sắc thái sáng (Tints) — ba biến thể sáng hơn (cùng sắc thái, độ sáng cao hơn)
• Sắc thái tối (Shades) — ba biến thể tối hơn (cùng sắc thái, độ sáng thấp hơn)

Nhấp vào bất kỳ ô màu nào trong bảng màu để tải ngay vào bộ chuyển đổi làm điểm bắt đầu mới — hoàn hảo để lặp lại nhanh chóng trên một màu thương hiệu, bộ biểu tượng hoặc chủ đề giao diện người dùng.

Cách sử dụng công cụ này

1. Nhập hoặc chọn một màu — nhập bất kỳ giá trị nào (HEX, RGB, HSL, HSV, CMYK hoặc tên màu CSS) vào trường nhập liệu, hoặc nhấp vào ô màu nhỏ để mở trình chọn màu gốc của trình duyệt.
2. Chuyển đổi — nhấp vào nút Chuyển đổi. Công cụ tự động phát hiện định dạng bạn đã cung cấp và tính toán mọi định dạng khác.
3. Sao chép thứ bạn cần — nhấp vào bất kỳ nút sao chép một lần chạm nào bên cạnh giá trị định dạng. Nút sẽ hiển thị dấu kiểm trong giây lát để xác nhận giá trị đã nằm trong bộ nhớ tạm của bạn.
4. Kiểm tra trợ năng — xem lại tỷ lệ tương phản WCAG so với trắng tinh khiết và đen tinh khiết để xác nhận xem màu sắc đó có dễ đọc khi làm văn bản hoặc nền hay không.
5. Khám phá bảng màu — nhấp vào bất kỳ ô màu nào trong phần bảng màu thiết kế để chuyển đổi nó, mở rộng quá trình khám phá thiết kế của bạn mà không cần rời khỏi trang.

Các trường hợp sử dụng thực tế

Dành cho lập trình viên web

• Chuyển đổi mã HEX từ bản thiết kế Figma sang hsl() để sử dụng với các biến tùy chỉnh CSS và các hệ thống chủ đề hiện đại
• Tạo giá trị rgba() cho các lớp phủ mờ trực tiếp từ màu HEX của thương hiệu
• Xác minh rằng màu sắc thương hiệu đáp ứng tiêu chuẩn WCAG AA trên nền trắng trước khi triển khai

Dành cho nhà thiết kế đồ họa

• Dịch một màu CSS từ một trang web sang dạng CMYK xấp xỉ cho các bản mockup in ấn
• Xây dựng thang độ tông màu (sắc thái sáng và tối) từ một màu sắc xuất phát duy nhất
• Tìm màu nhấn bổ túc hoặc bộ ba mà không cần rời khỏi trình duyệt

Dành cho nhà thiết kế UI & sản phẩm

• Chuyển đổi qua lại giữa HSV (trình chọn của Figma) và HSL (CSS) khi lập tài liệu cho các design tokens
• Tự động xác định màu chữ tốt nhất (đen so với trắng) cho bất kỳ màu nền nào
• Nhanh chóng đánh dấu hoặc chia sẻ một màu đã chuyển đổi qua URL của trang kết quả

Mẹo để có kết quả tốt nhất

• Linh hoạt với các dấu ngăn cách — trình phân tích cú pháp chấp nhận dấu phẩy, dấu cách hoặc dấu gạch chéo bên trong dấu ngoặc đơn, vì vậy rgb(79 70 229) cũng hoạt động giống như rgb(79, 70, 229).
• Sử dụng phần trăm khi phù hợp — rgb(31%, 27%, 90%) là hợp lệ; công cụ sẽ chuyển đổi phần trăm sang 0–255 trong nội bộ.
• Thử tên màu CSS — hơn 140 tên màu hoạt động, bao gồm cả những bổ sung hiện đại như rebeccapurple.
• Đọc thanh kênh màu — phân tích trực quan các kênh đỏ/xanh lá/xanh dương và CMYK giúp bạn dễ dàng biết loại mực nào chiếm ưu thế trong phiên bản in của màu sắc đó.
• Chỉ coi CMYK là hướng dẫn — hãy mở kết quả trong phần mềm in ấn được quản lý màu của bạn để có giá trị chính xác cuối cùng.

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

Tôi có cần bao gồm ký hiệu # khi nhập giá trị HEX không?

Không. Cả #4f46e5 và 4f46e5 đều được chấp nhận. Ký tự # ở đầu là tùy chọn.

Các giá trị HEX 4 chữ số và 8 chữ số (có kênh alpha) có được hỗ trợ không?

Trình phân tích cú pháp sẽ chấp nhận chúng, nhưng kênh alpha sẽ bị loại bỏ trong quá trình chuyển đổi vì RGB, HSL, HSV và CMYK ở dạng cổ điển không mang kênh alpha. Công cụ chỉ tập trung vào phần màu sắc.

Tôi có thể chia sẻ hoặc đánh dấu một màu đã chuyển đổi không?

Có. Biểu mẫu gửi qua GET, vì vậy URL chứa màu bạn đã chuyển đổi. Sao chép URL trang sau khi chuyển đổi để chia sẻ hoặc đánh dấu trang kết quả chính xác.

Tại sao một số giá trị HEX được hiển thị bằng chữ in hoa?

Đầu ra chuẩn hóa HEX thành chữ in hoa (vd: #4F46E5), đây là quy ước được sử dụng trong nhiều hướng dẫn phong cách thiết kế và thương hiệu. Bạn có thể dán lại bằng chữ thường nếu muốn — cả hai đều tương đương.

Công cụ có hoạt động trên thiết bị di động không?

Có. Giao diện hoàn toàn tương thích và các biểu mẫu, bảng màu, thẻ tương phản sẽ tự động chuyển sang bố cục một cột trên màn hình nhỏ hơn để mang lại trải nghiệm chạm thoải mái.

Tài nguyên bổ sung

• HSL và HSV - Wikipedia
• Mô hình màu CMYK - Wikipedia
• Yêu cầu Độ tương phản WCAG 2.1 (Tối thiểu)