HTML/CSS

[W3schools Tiếng Việt] – CSS Colors | Mầu sắc trong CSS

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

Sử dụng tên mầu sắc

Trong HTML, có thể chỉ định màu bằng cách sử dụng tên màu:

Tomato Orange DodgerBlue MediumSeaGreen
Gray SlateBlue Violet LightGray

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

Background Color – Mầu Nền

Bạn có thể đặt màu nền cho các phần tử HTML: Sử dụng: background-color:mã-mầu-sắc;

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

Text Color – Mầu Chữ

Bạn có thể đặt màu văn bản: Sử dụng: color:mã-mầu-săc;

<h3 style="color:Tomato;">Hello World</h3>
<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.

Border Color – Mầu đường viền

Bạn có thể đặt màu của đường viền:

<h1 style="border:2px solid Tomato;">Viền mầu đỏ</h1>
<h1 style="border:2px solid DodgerBlue;">Viền mầu xanh</h1>
Viền mầu đỏ
Viền mầu xanh

Color Values – Giá trị mầu

Trong HTML, màu sắc cũng có thể được chỉ định bằng cách sử dụng giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA:

Ví dụ cùng một mầu “tomato” nhưng sử dụng giá trị khách nhau sẽ có mã khác nhau

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Giống như tên màu “tomato”, nhưng trong suốt 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

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>

HEX Value – Giá trị HEX

Một màu hệ thập lục phân được xác định bằng: #RRGGBB, sự kết hợp của 3 tham số: red, green, blue. Trong đó các số nguyên thập lục phân RR (đỏ), GG (xanh lục) và BB (xanh dương) màu xanh dương chỉ định các thành phần của màu. Tất cả các giá trị phải nằm trong khoảng từ 00 đến FF.

Giá trị của mỗi tham số bao gồm 2 ký tự, mỗi ký tự có thể là một số (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) hoặc một chữ cái (a, b, c, d, e, f) không phân biệt trường hợp chữ hoa hay chữ thường.

Ví dụ: giá trị # 0000ff được hiển thị dưới dạng màu xanh lam, vì thành phần màu xanh dương được đặt thành giá trị cao nhất (ff) và các giá trị khác được đặt thành 00.

Màu hiển thị Giá trị HEX
#008000
#0000FF
#FF0000
#FFA500
#000000
#00FFFF

Ví dụ:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

See the Pen HEX Value by nguyen tien (@nguyentien365) on CodePen.


(Click vào đây để xem giá trị HEX của khoảng 140 tên màu)


RGB Value –  Giá trị RGB

Trong HTML, một màu có thể được chỉ định dưới dạng giá trị RGB, sử dụng công thức này:

rgb(red,greenblue)

Mỗi thông số (red,green, blue) xác định cường độ của màu từ 0 đến 255.

Ví dụ: rgb (255, 0, 0) được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0.

Để hiển thị màu đen, tất cả thông số màu phải được đặt thành 0, như sau: rgb (0, 0, 0).

Để hiển thị màu trắng, tất cả các thông số màu phải được đặt là 255, như sau: rgb (255, 255, 255).

See the Pen RGB Bar by nguyen tien (@nguyentien365) on CodePen.

Ví dụ về các mã mầu sắc:

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

HSL Value – Giá trị HSL

Trong HTML, một màu có thể được xác định bằng cách sử dụng màu sắc, độ bão hòa và độ sáng (HSL) trong biểu mẫu:

hsl(hue, saturation, lightness)

  • Hue (mầu sắc) là một mức độ trên bánh xe màu 0 đến 360. 0 là màu đỏ, 120 là màu xanh lá cây, và 240 là màu xanh.
  • Saturation (độ bão hòa) là giá trị phần trăm, 0% có nghĩa là màu xám và 100% là màu đầy đủ.
  • Lightness (độ sáng) cũng là một tỷ lệ phần trăm, 0% là màu đen, 50% không phải là ánh sáng hoặc bóng tối, 100% là màu trắng
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Saturation

Độ bão hòa có thể được mô tả là cường độ của một màu.

100% là màu tinh khiết, không có màu xám mờ

50% là 50% màu xám, nhưng bạn vẫn có thể thấy màu sắc.

0% hoàn toàn màu xám, bạn không còn có thể thấy màu gốc nữa.

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Lightness

Độ sáng của màu có thể được mô tả là lượng ánh sáng bạn muốn cho màu, trong đó 0% nghĩa là không có ánh sáng (đen), 50% có nghĩa là 50% ánh sáng (không tối hay ánh sáng) 100% có nghĩa là sáng trắng luôn. (mầu trắng).

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

<

p style=”text-align: justify;”>Với màu HSL, độ sáng 0% có nghĩa là màu đen và 100% độ sáng có nghĩa là màu trắng.
Sắc thái của màu xám thường được xác định bằng cách thiết lập màu sắc và độ bão hòa thành 0 và điều chỉnh độ sáng từ 0% đến 100% để có được các tông tối hơn / sáng hơn:

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Với màu sắc HSL, sắc thái của màu xám được tạo bằng cách đặt độ bão hòa thành 0% và điều chỉnh độ sáng theo màu tối / ánh sáng của màu xám.


RGBA Value – Giá trị RGB-Alpha

Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh alpha – chỉ định độ mờ cho màu. Giá trị màu RGBA được chỉ định với:

rgba(red, green, blue, alpha)

Tham số alpha là một số nằm giữa 0.0 (hoàn toàn trong suốt) và 1.0 (mầu gốc):

Ví dụ:

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

HSLA Value – Giá trị HSL-Alpha

Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha – chỉ định độ mờ cho màu. Giá trị màu HSLA được xác định với:

hsla(hue,saturation, lightness, alpha)

<

p style=”text-align: justify;”>Tham số alpha là một số nằm giữa 0.0 (hoàn toàn trong suốt) và 1.0 (mầu gốc):
Ví dụ:

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Bạn có thể tạo màu trong suốt bằng cách sử dụng giá trị màu của HSLA.

Về tác giả

Tiến Đức

Để lại một bình luận