[HTML/HTML5] Phần 12: Màu sắc trong HTML | DAMMIO

Trong HTML, một màu có thể được mô tả bằng cách sử dụng tên màu, giá trị RGB hay giá trị HEX.

Tên màu
Một màu sắc nào đó có thể được mô tả bằng 1 tên màu. HTML hỗ trợ 140 tên màu chuẩn. Tên màu là các giá trị tên màu bằng tiếng Anh như: red, pink, blue, yellow, white, gray, purple, … Tham khảo: https://www.dammio.com/2017/05/30/web-colors-phan-2-ten-mau-sac-trong-web/

Giá trị RGB
Ngoài việc mô tả tên màu, một màu bất kỳ có thể mô tả dưới dạng giá trị RGB, viết tắt của Red (màu đỏ), Green (màu xanh lá cây), và Blue (và màu xanh dương) theo công thức: rgb(red, green, blue). Mỗi giá trị màu red, green, và blue có giá trị từ 0 đến 255.

Ví dụ, rgb(255,0,0) là màu đỏ chuẩn, vì giá trị red có giá trị cao nhất là 255 và các giá trị khác bằng 0 (tức là không có sự xuất hiện của green và blue trong giá trị màu).

Để hiển thị màu đen, tất cả giá trị màu đều bằng 0: rgb(0,0,0). Ngược lại, để hiển thị màu trắng, các giá trị màu đều là 255: rgb(255,255,255).

Các sắc thái màu xám thường được định nghĩa với 3 giá trị bằng nhau.

Giá trị HEX
Màu sắc còn có thể định nghĩa bằng giá trị HEX, dưới dạng #RRGGBB, với RR (màu đỏ), GG (màu xanh lá), BB (màu xanh dương) với biên độ từ 00 đến FF hệ cơ số 16 (tương ứng từ 0 đến 255 trong hệ cơ số 10).

Ví dụ, #FF00000 là màu đỏ, vì red có giá trị cao nhất (FF) và các màu khác có giá trị thấp nhất (00).

Các sắc thái màu xám thường được định nghĩa với 3 giá trị bằng nhau.

Đổi giá trị RGB sang HEX và ngược lại
Để đổi 2 giá trị này rất đơn giản, bạn có sử dụng công cụ chuyển đổi sẵn có trên mạng hay đổi bằng tay như các ví dụ sau.

Để đổi màu rgb(74, 100, 23) đổi thành màu HEX thì bạn cũng đổi từng giá trị red, blue, green từ hệ thập phân sang cơ số 16 như sau:

  • 74 = 4A
  • 100 = 64
  • 23 = 17

Sau đó gom 3 tham số hex và viết liền lại được giá trị màu HEX là: #4A6417. Để đổi giá trị #4A6417 sang giá trị màu RGB, bạn cũng làm ngược lại, đổi giá trị 4A, 64, 17 từ hệ 16 sang hệ 10 và được các giá trị 74, 100, 23, sau đó viết dưới dạng: rgb(74,100,23).

Kết luận: Bài viết trình bày về màu sắc trong HTML. Bạn phải nắm vững các kiến thức màu sắc và có con mắt thẩm mỹ để thiết kế giao diện Web đẹp và chuyên nghiệp hơn.