HEX (hệ thập lục phân) là mã sáu ký tự đứng sau dấu thăng: #E8635A. Mỗi cặp ký tự đại diện cho kênh Đỏ, Lục và Lam theo ký hiệu cơ số 16 (từ 00 đến FF).

Về mặt chức năng, nó giống hệt RGB — chỉ khác cách viết. #E8635A chính là rgb(232, 99, 90). HEX đơn giản là cách viết gọn hơn của các giá trị RGB.

Bạn đang viết CSS cho một trang đích. Nhà thiết kế đưa bạn một bộ hướng dẫn phong cách kèm màu thương hiệu. Bạn viết:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX hoàn hảo ở đây: gọn, dễ đọc và được hỗ trợ ở mọi nơi.

RGB là viết tắt của Red, Green, Blue — ba màu ánh sáng mà màn hình pha trộn để tạo ra mọi màu bạn nhìn thấy. Mỗi kênh có giá trị từ 0 đến 255. rgb(232, 99, 90) nghĩa là 232 đơn vị đỏ, 99 đơn vị lục và 90 đơn vị lam.

RGB là nền tảng của toàn bộ màu kỹ thuật số. HEX chỉ là RGB viết theo ký hiệu khác. HSL là một phép biến đổi RGB thân thiện với con người. Mọi thứ trên màn hình của bạn cuối cùng đều trở thành các giá trị RGB gửi đến từng điểm ảnh.

Bạn đang xây dựng một ứng dụng React Native và cần một lớp phủ bán trong suốt:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB kèm alpha là lựa chọn tự nhiên — trực tiếp, dễ đọc và là định dạng gốc của bộ dựng hình.

HSL là viết tắt của Hue, Saturation, Lightness (sắc độ, độ bão hòa, độ sáng):

hsl(4, 75%, 63%) nghĩa là: sắc độ ngả đỏ (4°), rất rực (bão hòa 75%) và hơi sáng (63%).

Bạn đang xây dựng một hệ thống thiết kế bằng Tailwind CSS và cần một thang màu nhất quán:

--brand-50: hsl(4, 75%, 95%); --brand-100: hsl(4, 75%, 90%); --brand-200: hsl(4, 75%, 80%); --brand-500: hsl(4, 75%, 63%); --brand-700: hsl(4, 75%, 43%); --brand-900: hsl(4, 75%, 25%);

Cùng sắc độ, cùng độ bão hòa, khác độ sáng. Một thang màu hoàn hảo trong 30 giây. Thử làm vậy với HEX xem.

CMYK là viết tắt của Cyan, Magenta, Yellow, Key (đen). Nó mô tả màu như hỗn hợp mực in lên giấy trắng. Mỗi giá trị chạy từ 0% đến 100%: 0, 57, 61, 9 nghĩa là 0% lục lam, 57% đỏ tươi, 61% vàng và 9% đen.

Khác với RGB (cộng thêm ánh sáng để tạo màu), CMYK trừ bớt từ nền giấy trắng. Càng nhiều mực = màu càng tối. Đó là lý do nó được gọi là mô hình màu trừ.

Bạn đã thiết kế một áp phích trong Illustrator. Trước khi gửi cho nhà in, bạn chuyển tài liệu sang chế độ màu CMYK (File → Document Color Mode → CMYK Color), kiểm tra cảnh báo ngoài dải màu và chỉnh lại những sắc lam điện đã ngả thành xanh mòng két đục. Tệp PDF cuối cùng được lưu ở CMYK kèm hồ sơ ICC của nhà in.

Đây là lỗi kinh điển của người mới. Bạn thiết kế một áp phích rực rỡ trong Photoshop ở chế độ RGB, gửi cho nhà in, và bản in trông nhợt nhạt — nhất là màu lục và lam. Hãy luôn chuyển sang CMYK trước khi xuất file in, và kiểm tra cảnh báo dải màu.

Nếu thiết kế của bạn cần lớp phủ bán trong suốt, đổ bóng hay hiệu ứng glassmorphism, hãy chuyển sang RGBA hoặc HSLA. HEX 6 chữ số tiêu chuẩn không mang thông tin độ mờ, còn HEX 8 chữ số hiếm khi được dùng vì khó đọc.

"#3B82F6 nhưng sáng hơn 20%" đòi hỏi chuyển đổi, tính toán rồi chuyển đổi ngược. Trong HSL: chỉ cần tăng độ sáng thêm 20%. Token thiết kế, trình tạo chủ đề và các biến CSS hiện đại hoạt động tốt hơn hẳn với HSL.

Một thương hiệu được định nghĩa bằng CMYK cho in ấn sẽ trông khác đi khi chuyển thô sang HEX cho web. Cách làm đúng: so màu trên màn hình bằng mắt với bản in, rồi định nghĩa các giá trị HEX riêng cho môi trường số. Bộ nhận diện thương hiệu nên có cả hai.

Không khác về màu — chỉ khác về ký hiệu. HEX viết cùng các giá trị Đỏ/Lục/Lam theo cơ số 16. #FF0000 giống hệt rgb(255, 0, 0). HEX gõ ngắn hơn; RGB dễ chỉnh sửa bằng lập trình hơn và hỗ trợ kênh alpha (RGBA).

Bất cứ khi nào sản phẩm cuối được in trên vật liệu vật lý — giấy, bìa cứng, vải, nhựa. Nếu nó chỉ ở trên màn hình, hãy dùng RGB (hoặc HEX/HSL). Nếu đem đi in, hãy chuyển sang CMYK ở bước xuất file.

Với hệ thống thiết kế, chủ đề giao diện và thao tác chỉnh màu — có. Với việc trao đổi nhanh và sao chép vào công cụ — HEX thực dụng hơn. Chúng mô tả cùng những màu như nhau; HSL chỉ sắp xếp thông tin theo cách khớp với cách con người nghĩ về màu (sắc độ → độ rực → độ sáng).

Có. Color Picker Camera: HEX RGB lấy màu từ camera hoặc ảnh của bạn và hiển thị đồng thời HEX, RGB, HSL và CMYK. Chạm vào giá trị bất kỳ để sao chép. Nó hoạt động như một máy tính định dạng màu ngoài đời thực — một lần chụp, bốn định dạng.