Màu văn bản HTML

Hướng dẫn HTML

Màu văn bản HTML

Thêm màu vào văn bản HTML của bạn thật dễ dàng! Trong hướng dẫn ngắn này, chúng tôi sẽ đề cập đến cách thay đổi màu của văn bản HTML bằng mã màu Hex, tên màu HTML, giá trị RGB và HSL.

Màu văn bản sử dụng mã màu Hex

Cách tô màu văn bản HTML phổ biến nhất là sử dụng mã màu thập lục phân (viết tắt là mã Hex). Chỉ cần thêm thuộc tính kiểu vào thành phần văn bản bạn muốn tô màu - một đoạn trong ví dụ bên dưới - và sử dụng thuộc tính màu với mã Hex của bạn.

html

<body>
	<p style="color:#FF0000";>Red paragraph text</p>
</body>

Bạn không có mã Hex? Đừng lo lắng, hãy sử dụng bộ chọn màu của chúng tôi để duyệt hàng triệu màu với mã màu Hex và hơn thế nữa.

Màu văn bản sử dụng tên màu HTML

HtmlTextColorPage.paragraphs.2.contents.0

html

<body>
	<p style="color:red;">Red paragraph text</p>
</body>

Màu văn bản sử dụng giá trị màu RGB

Ngày nay, việc sử dụng các giá trị RGB đang là xu hướng thịnh hành, nhưng nó cũng dễ dàng như mã Hex hoặc tên màu. Chèn các giá trị RGB của bạn vào tham số rgb() sau thuộc tính màu. Bạn có thể sử dụng công cụ chọn màu của chúng tôi để nhận các giá trị RGB ngoài mã Hex.

html

<body>
	<p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>

Khi sử dụng giá trị RGB trong trang web của mình, bạn cũng có thể chỉ định độ mờ. Thay vì rgb(), hãy sử dụng rgba() - a dành cho alpha, kênh màu kiểm soát độ mờ - và sau ba giá trị màu của bạn, thêm giá trị thứ tư cho độ mờ, trên thang điểm từ 0 - 1 (0 cho hoàn toàn trong suốt, 1 cho hoàn toàn mờ đục).

html

<body>
	<p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>

Màu văn bản sử dụng giá trị màu HSL

Phương pháp thứ tư để thêm màu là sử dụng các giá trị HSL. Tương tự như cú pháp RGB được mô tả ở trên, HSL sử dụng tiền tố hsl() và ba giá trị cho màu sắc, độ bão hòa và độ sáng. Màu sắc được thể hiện trên thang điểm từ 0 - 360, trong khi độ bão hòa và độ sáng đều có tỷ lệ phần trăm từ 0% đến 100%.

html

<body>
	<p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>

Cũng giống như RGB, khi sử dụng HSL bạn có thể sửa đổi độ mờ của màu ngay trong thuộc tính color. Sử dụng tiền tố hsla() và bao gồm giá trị thứ tư trong khoảng từ 0 đến 1 cho mức độ mờ mà bạn cần.

html

<body>
	<p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>

Chia sẻ với bạn bè của bạn!

Tweet
Post
LinkedIn
Reddit

Tweet Post LinkedIn Reddit