Làm thế nào để bạn nhận diện một màu? Mã Hex - một chuỗi ngắn gồm sáu ký tự có thể cho bạn biết tất cả những gì bạn cần.

• Tìm hiểu về khái niệm Responsive Web Design (RWD - Thiết kế web đáp ứng)
• Tìm hiểu về một số loại giao diện người dùng cơ bản
• Webflow: Nền tảng phát triển web của tương lai
• Lập trình Web năm 2021 cần học những gì để trở thành “cao thủ”?
• Hỏi-đáp CNTT: Cần gì để thiết kế một website hoàn chỉnh?

Làm việc với màu sắc trong HTML tương đối đơn giản. Với một vài CSS declaration* đơn giản, bạn có thể thay đổi màu của bất kỳ văn bản hoặc nền nào trên trang web của mình. Nhưng làm thế nào để bạn chỉ định một màu? Câu trả lời cho câu hỏi này sẽ dẫn chúng ta đến khái niệm mã màu hệ thập lục phân (hexadecimal color codes).

*Declaration: khối khai báo bao gồm thuộc tính (property) và giá trị (value).

Nếu bạn đã làm việc với HTML hoặc CSS trước đây, chắc chắn bạn đã nghe đến thuật ngữ mã hex. Nhưng chính xác thì mã hex là gì? Một số ví dụ về mã hex là gì? Sự khác biệt giữa mã hex và mã màu RGB là gì?

1. Mã Hex là gì?

Khi mới bắt đầu làm việc với màu, bạn có thể sử dụng giao diện đồ họa để chọn màu áp dụng cho các phần tử trên trang của mình. Khi bạn bắt đầu nhìn vào mã bên dưới thay vì chỉ nhìn vào trình chỉnh sửa đồ họa của mình, bạn sẽ thấy các màu sắc xuất hiện dưới dạng chuỗi ký tự. Các chuỗi như vậy được gọi là mã hex; chúng trông giống như thế này: #FF0092

Bạn có thể chỉ định màu trong CSS theo một vài cách khác nhau. Bạn có thể sử dụng tên của một số màu được xác định trước như red (đỏ) và darkmagenta (đỏ sẫm). Tuy nhiên, để chỉ định các sắc thái màu chính xác, bạn sẽ cần sử dụng một phép đo chính xác hơn: một giá trị số.

CSS cung cấp hai tùy chọn chính: RGB và hex. Trong cả hai định dạng, bạn chỉ định số lượng màu đỏ, xanh lá cây và xanh lam tạo nên màu cuối cùng. RGB sử dụng ba số trong khoảng từ 0 đến 255. Hex cũng tương tự, nhưng với một cơ số (16) thay vì số thập phân (10) mà bạn quen dùng.

Hex sử dụng các chữ cái AF, ngoài các chữ số 0-9, cho tổng cộng 16 biểu tượng. A trong hệ thập lục phân (hex) tương đương với 10 trong hệ thập phân. F trong hệ thập lục phân là 15 trong hệ thập phân.

>>> Xem thêm: Cách tìm giá trị Hex của bất kỳ màu nào trên màn hình của bạn

2. Mã màu Hex hoạt động như thế nào?

Ở dạng cơ bản nhất của nó, mã hex là đại diện cho bao nhiêu màu đỏ, xanh lục và xanh lam tồn tại trong một màu. Một mã hex bao gồm sáu ký tự. Hai chữ số đầu tiên liên quan đến lượng màu đỏ có trong hỗn hợp, hai chữ số tiếp theo liên quan đến lượng màu xanh lá cây, và hai chữ số cuối cùng phản ánh lượng màu xanh lam. Mã hệ lục phân đề cập đến các màu cụ thể, cho phép các nhà thiết kế và nhà phát triển dễ dàng giao tiếp về cách phối màu.

Với các giá trị 16 × 16 (256) cho mỗi thành phần màu, sau đó có thể kết hợp 256 × 256 × 256. Trong hệ thập lục phân, chúng nằm trong khoảng từ #000000 (đen tuyền) đến #FFFFFF (trắng tinh).

3. Cách đọc mã màu Hex

Rất dễ để hiểu mã màu hex. Hãy lấy ví dụ về # FF5733. Đầu tiên, chia sáu ký tự thành ba phần, mỗi phần chứa hai ký tự. Như bạn đã biết, hai phần đầu tiên đại diện cho màu đỏ, hai phần thứ hai đại diện cho màu xanh lá cây, và hai phần thứ ba đại diện cho màu xanh lam. Vì vậy, trong ví dụ của chúng tôi:

• Thành phần màu đỏ, RR, có giá trị FF.
• Thành phần màu xanh lá cây, GG, là 57.
• Thành phần màu xanh lam, BB, là 33.

Bây giờ, để tìm cường độ của các phân đoạn màu này, bạn cần tính số thập lục phân bằng cách sử dụng ba bước sau:

1. Nhân ký tự thập lục phân đầu tiên của RR với 16. Nếu ký tự là một chữ cái, hãy chuyển nó thành giá trị tương ứng. Trong trường hợp này, ký tự đầu tiên F là 15. Vì vậy, với ví dụ của chúng tôi, bạn đang nhân 15 × 16 bằng 240.
2. Tiếp theo, thêm ký tự thứ hai của RR. Một lần nữa, hãy chuyển đổi một chữ cái thành giá trị tương ứng của nó nếu cần. Trong ví dụ của chúng tôi, ký tự thứ hai là F bằng 15.
3. Sau khi hoàn tất, hãy cộng các tổng để nhận một giá trị duy nhất. Nếu bạn thêm 240 và 15 từ ví dụ của chúng tôi, bạn sẽ thấy giá trị của FF là 255.

Lặp lại công thức tương tự cho hai phân đoạn còn lại, GG ký hiệu là 57 và BB ký hiệu là 33. Nếu các phép tính thủ công có vẻ quá “hại não”, bạn luôn có thể sử dụng công cụ chuyển đổi hex sang RGB (như BinaryHex Converter) để đọc màu. Bạn sẽ thấy rằng giá trị # FF5733 tương đương với rgb (255, 87, 51) .

>>> Xem thêm: Làm việc với màu sắc trong CSS

4. Tại sao mã màu Hex lại được ưa chuộng như vậy?

Mặc dù có một số mô hình màu khác nhau (RGB, CMYK, HSL), mã màu hex có lẽ là cách được sử dụng rộng rãi nhất. Điều này là do chúng đơn giản và dễ hiểu.

Định dạng có chiều rộng cố định cũng rất hữu ích. Mã màu hex luôn có độ dài bảy ký tự, bao gồm cả ký hiệu # đứng đầu .

Màu hệ lục phân rất hiệu quả, chỉ sử dụng bảy ký tự này để đại diện cho hơn 16 triệu màu. Và phân biệt giữa những màu này là một quá trình đơn giản.

5. Hex so với RGB: Có sự khác biệt nào không?

Hệ thống mã hóa màu RGB sử dụng ba số thập phân để biểu thị cường độ tương đối của màu đỏ, xanh lục và xanh lam. Nó sử dụng các chữ số 0-9.

Hex cũng sử dụng ba số để biểu thị màu đỏ, xanh lá cây và xanh lam, nhưng nó sử dụng thêm các chữ số (AF) để phục vụ cho cơ số 16. Không có sự khác biệt về màu sắc kết quả, chúng chỉ đơn giản là các định dạng khác nhau để truyền đạt cùng một thông tin.

>>> Xem thêm: 19 ví dụ về tạo màu nền gradient bằng CSS

6. Mã Hex được sử dụng để làm gì?

Một loạt các ứng dụng khác nhau sử dụng RGB, từ màn hình tivi đến thiết bị di động, trò chơi và bảng hiệu. Bạn sẽ chủ yếu thấy mã màu hex trong thiết kế web và các chương trình đồ họa khác.

Bạn cũng có thể xem mã hex là một cách phổ biến để xác định màu sắc. Nhiều trang web sử dụng chúng để xác định một màu cụ thể vì chúng ngắn và chính xác. 

Kết luận

Mã màu hex không phải là điều thú vị nhất trên thế giới, nhưng cần hiểu về chúng nếu bạn đang làm việc trong lĩnh vực thiết kế web. Khả năng làm việc với các mã màu hex sẽ làm cho công việc thiết kế của bạn dễ dàng hơn nhiều.

>>> Nếu bạn đang có nhu cầu học lập trình trực tuyến, tìm hiểu ngay tại đây:

>>> Xem thêm bài viết:

Đại học trực tuyến? Tại sao nên chọn học đại học trực tuyến thay vì đại học offline?

5 điều có thể bạn chưa biết về học lập trình trực tuyến FUNiX

Review khóa học trực tuyến FUNiX FPT đang được nhiều bạn trẻ lựa chọn

FUNiX đào tạo lập trình trực tuyến cung cấp nhân sự tập đoàn FPT

5 Điểm đáng chú ý tại khóa học lập trình trực tuyến FPT – FUNiX

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/hex-code-what-is-it/