Màu sắc trong HTML

Giới thiệu

Màu sắc trong HTML được xác định bằng cách xác định trước tên màu hoặc các giá trị RGB, HEX, HSL, RGBA, HSLA.

Tên màu

Trong HTML, một màu có thể được xác định bằng cách dùng tên màu.

Ví dụ

HTML hỗ trợ 140 tên màu tiêu chuẩn.

Màu nền

Bạn có thể đặt màu nền cho các phần tử HTML với background-color.

Ví dụ

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Màu chữ trong văn bản

Bạn có thể đặt màu chữ trong văn bản với color.

Ví dụ

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Màu viền

Bạn có thể đặt màu viền cho phần tử với border.

Ví dụ

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Hello World

Hello World

Hello World

Giá trị màu

Trong HTML, các màu có thể được chỉ ra bằng các giá trị RGB, HEX, HSL, RGBA và HSLA.

Ví dụ

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Ba phần tử <div> sau có màu nền tương ứng với các giá trị RGB, HEX và HSL:

Hai phần tử <div> sau có màu nền tương ứng với các giá trị RGBA và HSLA, bổ sung thêm giá trị Alpha vào màu (độ trong suốt bằng 50%):

Kết luận

Qua đây là một số chia sẻ về màu sắc trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.