Ý nghĩa của các hệ màu HEX, RGB, HSL trong lập trình CSS

Trong quá trình thiết kế UI/UX (Figma, Photoshop) và lập trình Frontend, việc chuyển đổi qua lại giữa các mã màu là thao tác diễn ra hàng ngày:

• Mã màu HEX: Gồm 6 hoặc 8 ký tự (VD: #FF0000). Ưu điểm là ngắn gọn, dễ copy-paste, phổ biến nhất trong lập trình Web.
• Mã màu RGB / RGBA: Đại diện cho Red - Green - Blue (Đỏ - Xanh lá - Xanh dương). Cực kỳ hữu ích khi bạn cần điều chỉnh độ trong suốt của màu sắc thông qua thông số Alpha (A).
• Mã màu HSL: Viết tắt của Hue (Màu) - Saturation (Độ bão hòa) - Lightness (Độ sáng). HSL trực quan với mắt người nhất. Bạn có thể dễ dàng tạo ra một màu tối hơn hoặc sáng hơn cùng tông bằng cách điều chỉnh phần Lightness.

Vì sao in ấn lại sử dụng hệ màu CMYK thay vì RGB?

Màn hình điện thoại/máy tính phát sáng dựa trên việc trộn 3 màu ánh sáng RGB. Tuy nhiên, trong công nghiệp in ấn (trên giấy, áo thun), máy in sử dụng 4 màu mực chính là CMYK (Cyan - Magenta - Yellow - Key/Black). Việc chuyển đổi từ hệ màu RGB trên màn hình sang mã CMYK bằng công cụ này giúp thiết kế in ra không bị sai lệch màu (bị xỉn hoặc nhạt màu).

Hướng dẫn chuyển đổi màu trong suốt (RGBA) sang mã HEX

Để biểu diễn độ trong suốt (opacity) trong mã màu HEX, bạn có thể thêm 2 ký tự vào cuối (HEX8). Ví dụ: #FF0000 (Màu đỏ 100%). Nếu muốn giảm độ đục xuống 50%, mã HEX tương ứng sẽ là #FF000080. Công cụ của chúng tôi tự động tính toán chính xác giá trị này.