Mã màu hex là gì: cách #RRGGBB hoạt động

Mã màu hex hoạt động thế nào

Mọi màu trên màn hình đều được pha từ ánh sáng đỏ, xanh lá và xanh dương. Mã hex ghi cường độ của từng loại ánh sáng bằng hai ký tự sau dấu #: đỏ trước, rồi xanh lá, rồi xanh dương. Đó chính là mẫu #RRGGBB.

Các ký tự này thuộc hệ thập lục phân, cách đếm dùng 16 chữ số: từ 0 đến 9, tiếp theo là a (10), b (11), c (12), d (13), e (14) và f (15). Một cặp biểu diễn được 256 giá trị, từ 00 (0) đến ff (255), đúng bằng phạm vi của rgb().

Để đổi một cặp sang số thông thường, lấy chữ số đầu nhân với 16 rồi cộng chữ số thứ hai. Dưới đây là #1e90ff, màu CSS dodgerblue, ở bốn định dạng, sau đó là phép tính cho từng cặp.

Vậy #1e90ff là rgb(30, 144, 255): một chút đỏ, khá nhiều xanh lá và xanh dương tối đa, cộng lại thành màu xanh da trời tươi. Ba cặp, mỗi cặp 256 giá trị, cho ra tổng cộng 16.777.216 màu.

Mã hex viết tắt 3 và 4 chữ số

Khi hai chữ số của mỗi cặp giống nhau, bạn có thể viết mỗi cặp một lần. #ffcc00 thành #fc0, và trình duyệt sẽ nhân đôi từng chữ số trở lại. #1e90ff không có dạng viết tắt, vì 1e và 90 không phải cặp chữ số lặp.

Dạng viết tắt chỉ bao được 4.096 trong số 16,7 triệu màu. Dạng bốn chữ số thêm độ mờ đục theo cùng cách, nên #f008 nghĩa là #ff000088.

Độ mờ đục trong hex: mã hex 8 chữ số có alpha

Mã tám chữ số thêm cặp thứ tư cho alpha, tức độ mờ đục: #RRGGBBAA. 00 là trong suốt hoàn toàn, ff là đục hoàn toàn. Mọi trình duyệt hiện hành đều hỗ trợ dạng này trong CSS, cùng với dạng viết tắt bốn chữ số #RGBA.

Để có cặp alpha, nhân độ mờ đục với 255, làm tròn thành số nguyên rồi đổi sang hex. 50% cho ra 127,5, làm tròn thành 128, viết là 80. Dưới đây là bảng đầy đủ, áp dụng cho #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Có hai điểm cần lưu ý. Thứ nhất, 80 là 128 trên 255, tức 50,2%, không phải đúng 50%: alpha trong hex chỉ có 256 mức, nên phần lớn các mức phần trăm tròn chỉ là giá trị gần đúng. Thứ hai, Android đặt alpha lên đầu. Trong tài nguyên màu của Android, #801e90ff có nghĩa giống #1e90ff80 trong CSS.

Cách đọc mã hex bằng mắt

Bạn có thể đoán màu mà không cần chuyển đổi gì. Hãy nhìn chữ số đầu tiên của mỗi cặp, vì nó mang gần như toàn bộ thông tin.

• Chữ số đầu lớn nhất cho biết ánh sáng nào chiếm ưu thế. #d2691e có d ở kênh đỏ, 6 ở xanh lá và 1 ở xanh dương, nên đó là màu nâu cam.
• Hai kênh cao sẽ pha với nhau: đỏ và xanh lá thành vàng, xanh lá và xanh dương thành xanh lơ (cyan), đỏ và xanh dương thành hồng tím (magenta) hoặc tím.
• Ba cặp bằng nhau cho ra màu xám. #333333 là xám đậm, #999999 là xám nhạt. Các cặp gần bằng nhau, như #708090, cho ra màu trầm, ngả xám.
• Chữ số nhìn chung cao nghĩa là màu sáng, thấp nghĩa là màu tối. Khi cả ba cặp từ c0 trở lên, màu sẽ rất nhạt. Khi cả ba từ 30 trở xuống, màu sẽ rất tối.
• Cùng một con số, xanh lá trông sáng hơn xanh dương nhiều. #00ff00 có độ sáng OKLCH là 0,866, còn #0000ff chỉ 0,452.

Vì sao #808080 không phải màu xám giữa

#808080 nằm đúng chính giữa về mặt con số: 128 trên 255 ở mọi kênh. Nhưng nó không trông như nằm giữa đen và trắng. Độ sáng OKLCH của nó là 0,600, nên mắt thấy nó đã đi được 60% quãng đường tới màu trắng.

Giá trị hex vốn đã được mã hóa theo đường cong sRGB, gần giống cách mắt cảm nhận nhưng không hoàn toàn. #808080 phát ra khoảng 21,6% lượng ánh sáng của màu trắng, và các mô hình cảm nhận đặt điểm giữa thị giác thấp hơn: OKLCH ở #636363, CIELAB ở #777777.

Điều này quan trọng với chữ. Chữ xám #808080 trên nền trắng chỉ đạt 3,95:1 và không đạt WCAG AA cho chữ nội dung. #767676 là màu xám sáng nhất đạt 4,5:1, còn #777777, sáng hơn chỉ một nấc, đã không đạt với 4,48:1.

Chữ hoa hay chữ thường, có hay không có #

Mã hex không phân biệt chữ hoa chữ thường. #1E90FF, #1e90ff và #1E90ff là cùng một màu trong CSS, SVG và các công cụ thiết kế. Hãy chọn một kiểu và dùng thống nhất ở mọi nơi, để khi tìm trong code bạn thấy hết mọi chỗ dùng. Chữ thường là lựa chọn phổ biến trong CSS.

Dấu # là một phần của cú pháp CSS, không phải của màu. Figma và nhiều công cụ thiết kế hiển thị mã không có dấu này, còn các ngôn ngữ lập trình thường viết nó như một con số với tiền tố 0x, ví dụ trong Flutter, Color(0xFF1E90FF) bắt đầu bằng cặp alpha.

Cách lấy mã hex của một màu trên màn hình

Hãy dùng công cụ hút màu (eyedropper): công cụ đọc màu dưới con trỏ chuột và hiển thị mã của nó. Các công cụ này đều miễn phí và phần lớn đã được cài sẵn.

• Chrome và Edge: mở DevTools bằng F12, bấm vào ô màu bất kỳ trong bảng Styles và dùng biểu tượng ống hút để lấy màu trên trang.
• PickShade: công cụ chọn màu ở trang chủ có nút hút màu trên Chrome và Edge, lấy được màu ở bất kỳ đâu trên màn hình.
• Windows: cài Microsoft PowerToys và nhấn Win + Shift + C để mở Color Picker.
• macOS: mở Digital Color Meter trong Applications, Utilities. Chuyển sang sRGB, rồi chọn View, Display Values, as Hexadecimal.
• Figma, Photoshop và phần lớn ứng dụng thiết kế: nhấn I để dùng công cụ hút màu.
• Trong ảnh chụp hoặc ảnh màn hình: mở ảnh trong công cụ lấy màu từ ảnh và bấm vào điểm ảnh bất kỳ. Ảnh vẫn nằm trên thiết bị của bạn.

Giá trị lấy được có thể lệch vài đơn vị so với bản gốc, vì màn hình áp dụng hồ sơ màu và ảnh bị nén. Khi cần giá trị chính xác, hãy sao chép từ file thiết kế hoặc từ CSS, đừng lấy từ ảnh chụp màn hình.

Hỏi đáp