Mã Hex là gì? Mọi thư bạn cân biêt

Làm việc với màu sắc trong HTML tương đối đơn giản. Với một vài khai báo CSS đơ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ẽ đưa chúng ta xuống một lỗ hổng mà cuối cùng dẫn chúng ta đến khái niệm mã màu hệ thập lục phân.

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ì?

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 xem mã bên dưới thay vì chỉ trình chỉnh sửa đồ họa, bạn thấy rằng màu sắc xuất hiện dưới dạng các chuỗi ký tự trông kỳ lạ. Các chuỗi như vậy được gọi là mã hex; chúng trông giống như thế này:

#FF0092

Liên quan: Các thuật ngữ thiết kế đồ họa cơ bản bạn cần biết

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, chẳng hạn như màu đỏ và darkmagenta. 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 cái gì đó 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 thực hiện tương tự, chỉ với một cơ số (16) khác với 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 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.

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 có 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).

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

Dễ dàng hiểu được 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 toán 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 của nó. Trong trường hợp này, ký tự đầu tiên là 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ó nhu cầu. 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á áp đả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ị hex # FF5733 tương đương với rgb (255, 87, 51).

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 đại diện đượ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àu thập lục phân có độ dài đầy đủ luôn là bảy ký tự, bao gồm cả ký tự ở đầu # Biểu tượng.

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.

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ố để đại diện cho màu đỏ, xanh lá cây và xanh lam, nhưng nó sử dụng các chữ số phụ (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.

Liên quan: Nguyên tắc cơ bản về CSS: Làm việc với màu sắc

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à thường không rõ ràng trong ngữ cảnh.

Mã màu Hex không phải là khoa học tên lửa

Như vậy, bạn đã có những kiến ​​thức cơ bản về mã màu hex. Chúng không hẳn là khoa học cứng, nhưng chúng phục vụ một mục đích nhất định trong thiết kế (và trong thế giới công nghệ). Nếu bạn đang tìm kiếm một công cụ giúp bạn hiểu cách hoạt động của màu hex hoặc một công cụ dạy bạn về lý thuyết kết hợp RGB, thì có rất nhiều công cụ trực tuyến. Hãy nhớ rằng, chìa khóa để học bất cứ điều gì mới là thực hiện từng bước một.

Mã màu hex không phải là điều thú vị nhất trên thế giới, nhưng điều quan trọng là phải hiểu chúng nếu bạn đang làm việc trong lĩnh vực thiết kế web. Có thể 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.

Đọc tiếp

Thông tin về các Tác giả