Chuyển đổi mã màu

Đổi qua lại giữa các hệ màu HEX, RGB, HSL và CMYK chính xác.

Một lập trình viên nhận thông số màu hsl(174, 62%, 41%) nhưng dự án CSS lại yêu cầu mã hex, hoặc xưởng in đòi hỏi tỉ lệ CMYK cho mẫu logo vốn chỉ hiển thị bằng RGB. Mỗi định dạng chỉ là một cách diễn đạt khác nhau của cùng một sắc thái, và việc chuyển đổi qua lại giữa chúng không cần phải phỏng đoán.

Bảng so sánh định dạng màu trong Color Converter

Định dạngCấu trúcỨng dụng phổ biến
HEX#RRGGBB, hệ cơ số 16CSS, HTML, phần mềm thiết kế
RGBred, green, blue, mỗi kênh 0–255Màn hình hiển thị, đồ họa số
HSLhue, saturation, lightnessTạo và tinh chỉnh bảng màu
CMYKcyan, magenta, yellow, key (đen), %In ấn ấn phẩm thực tế

Lợi thế của hệ HSL đối với Color Converter

Hai định dạng HEX và RGB diễn tả màu sắc dựa trên sự phối hợp giữa ánh sáng đỏ, xanh lá và xanh dương. Cách biểu diễn này chuẩn xác về mặt kỹ thuật nhưng lại thiếu trực quan — nhìn vào mã #2E86AB, bạn rất khó hình dung phải sửa số nào để màu sáng hơn một chút. Trong khi đó, HSL tách biệt sắc độ, độ bão hòa và độ sáng thành ba giá trị độc lập, giúp việc làm sáng cùng một tông xanh trở nên đơn giản chỉ bằng cách tăng thông số độ sáng.

Chính vì vậy, hầu hết các tiện ích tạo bảng màu đều cho phép bạn chọn sắc độ trên vòng tròn màu rồi điều chỉnh độ bão hòa và độ sáng riêng biệt. Cách tiếp cận này bám sát trực giác thị giác tự nhiên thay vì cách tấm nền điện tử kết hợp ánh sáng.

Khác biệt vật lý giữa in ấn và hiển thị trong Color Converter

RGB thuộc hệ màu cộng — bắt đầu từ nền đen và cộng thêm các chùm sáng đỏ, xanh lá, xanh dương để tạo ra màu trắng. Ngược lại, CMYK thuộc hệ màu trừ — bắt đầu từ bề mặt giấy trắng và hấp thụ bớt ánh sáng bằng các lớp mực lục lam, hồng sẫm, vàng và đen. Do hai cơ chế vận hành theo nguyên lý vật lý trái ngược trên các chất liệu khác nhau, không phải sắc độ RGB nào cũng tìm được giá trị CMYK tương ứng tuyệt đối.

Những tông màu có độ rực rỡ rất cao trên màn hình, đặc biệt là sắc xanh lá hoặc cam chói, thường nằm ngoài dải màu mà mực in trên giấy có thể tái hiện. Đó là lý do bản in thực tế của một biểu trưng đôi khi xỉn màu hơn so với hình ảnh hiển thị trên máy tính.

Các bước sử dụng công cụ Color Converter

  1. Nhập chuỗi giá trị bạn đang có theo định dạng HEX, RGB, HSL hoặc CMYK vào ô nhập liệu.
  2. Nhấn nút chuyển đổi trên trang để hệ thống tiếp nhận và phân tích thông số.
  3. Xem toàn bộ các thông số tương ứng được hiển thị đầy đủ bên dưới kết quả.
  4. Sao chép chuỗi mã bạn cần dùng cho bảng mã CSS, tệp thiết kế hoặc bảng quy chuẩn in ấn.
  5. Trước khi chốt sản xuất hàng loạt, hãy kiểm tra lại thông số CMYK với cấu hình máy in thực tế của xưởng in ấn.

Thắc mắc thường gặp về Color Converter

Vì sao sắc thái khi in ra giấy lại khác với ảnh trên màn hình?

Màn hình hiển thị màu bằng nguồn phát sáng RGB, trong khi bản in tạo màu bằng cách hấp thụ ánh sáng qua các lớp mực CMYK. Mỗi phương thức có một không gian hiển thị riêng, nên nhiều gam màu RGB rực rỡ không thể pha trộn hoàn toàn bằng mực in thông thường.

Định dạng HSL khác với HSB hoặc HSV ở những điểm nào?

Cả hai hệ thống đều có nét tương đồng nhưng công thức tính không trùng khớp. HSL sử dụng trục độ sáng trải dài từ màu đen qua sắc độ thuần khiết rồi đến màu trắng, còn HSB hoặc HSV tính độ sáng từ màu đen đến sắc độ thuần khiết. Vì thế, độ bão hòa giữa hai định dạng này có độ lệch nhất định.

Mã HEX có phải chỉ là một cách viết khác của hệ RGB không?

Đúng như vậy. Một chuỗi mã HEX như #2E86AB chứa đựng chính xác bộ ba giá trị RGB là 46, 134, 171 nhưng được ghi dưới dạng cơ số 16 thay vì cơ số 10 nhằm giúp đoạn mã ngắn gọn và tiện chèn vào bảng kiểu CSS hơn.

Tại sao đổi từ RGB sang CMYK rồi đổi ngược lại có thể ra số khác?

Hai không gian màu này không phủ khớp nhau hoàn toàn. Khi bạn chuyển một gam màu nằm ngoài dải in ấn sang CMYK, thuật toán buộc phải đưa nó về sắc độ gần nhất mà mực in hỗ trợ. Do đó, bước chuyển đổi ngược lại sau đó sẽ trả về giá trị đã qua điều chỉnh chứ không giữ nguyên giá trị gốc.

Nên ưu tiên cấu trúc nào khi viết mã CSS cho trang web?

Cả HEX và RGB đều được các trình duyệt web hiện đại hỗ trợ đầy đủ. Mã HEX mang lại cấu trúc ngắn gọn, RGB thích hợp khi cần tinh chỉnh độ trong suốt, còn HSL hỗ trợ việc tăng giảm tông màu bằng mắt thuận tiện nhất.

Cookie
Chúng tôi quan tâm đến dữ liệu của bạn và muốn sử dụng cookie để cải thiện trải nghiệm của bạn.