Kết nối

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

6.147 lượt xem 
 Cập nhật lần cuối: 08/08/2017 lúc 14:36:04
Thể loại: HTML/HTML5, Thiết kế Web 

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.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 12: Màu sắc trong HTML. https://www.dammio.com/2017/08/04/htmlhtml5-phan-12-mau-sac-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 12: Màu sắc trong HTML},
    year = {2017},
    url = {https://www.dammio.com/2017/08/04/htmlhtml5-phan-12-mau-sac-html},
    urldate = {2025-02-07}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Nam Hải
Nam Hải
5 năm trước

đã hiểu Giá trị HEX hơn rồi, lúc trước thì hiểu mờ mờ mòe ảo mảo, may quá

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x