color trong CSS

Color trong CSS được định nghĩa bằng cách xác định các tên màu trước hoặc với các giá trị RGB, HEX, HSL, RGBA hoặc HSLA.

Color name


Thuộc tính color trong HTML có thể được gọi chỉ định bằng tên màu của chúng

Tomato
Orange
DodgerBlue
MediumSeaGreen

 

Gray
SlateBlue
Violet
LightGray

 

Xem kết quả

Background color


Chúng ta có thể đặt màu nền cho các phần tử HTML

Ví dụ

<h1 style="background-color:DodgerBlue;">Tháp Eiffel</h1>

<p style="background-color:Tomato;">
Tháp Eiffel, biểu tượng của Paris nhìn từ bờ sông Seine. Đây là một trong những địa điểm nổi
 tiếng nhất với khách du lịch vì công trình kiến trúc hai bên bờ sông và hàng cây cao đổi màu theo mùa. N
ăm 1991, quần thể kiến trúc các công trình nằm hai bên bờ sông Seine đã được tổ chức UNESCO công nhận là 
di sản thế giới.
</p>

Xem kết quả

Text Color


Chúng ta có thể định dạng màu cho các đoạn text

Ví dụ

<h3 style="color:Tomato;">Du lịch Việt Nam</h3>

<p style="color:DodgerBlue;">Hạ Long Quảng Ninh là một trong những điểm đến hấp dẫn bậc nhất nước ta. Với 
diện tích lên đến 1.553km2 bao gồm 1.900 hòn đảo đá vôi mang nhiều hình thù đẹp mắt, sinh động.</p>

<p style="color:MediumSeaGreen;">Hội An là một trong những điểm đến hàng đầu của miền Trung với nhiều thắng 
cảnh đẹp cùng nền ẩm thực độc đáo.</p>

Xem kết quả

Border Color


Chúng ta có thể định dạng màu đường viền cho các thẻ HTML

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>

Xem kết quả

Color Value


Trong HTML, color cũng có thể được xác định bằng các giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA.

Ba phần tử HTML <div> sau có màu background của chúng tương ứng với các giá trị RGB, HEXHSL:

rgb(255,99,71)

 

#ff6347

 

hsl(9,100%,64%)

 

Hai phần tử HTML <div> sau có màu nền được đặt bằng các giá trị RGBAHSLA, các giá trị này thêm kênh Alpha vào màu (ở đây chúng ta có bổ sung thêm độ trong suốt là 50%)

rgb(255,99,71,0.5)

 

hsl(9,100%,64%,0.5)

 

Ví dụ

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

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

Xem kết quả

RGB và RGBA


Giá trị màu RGB đại diện cho các màu chủ đạo chính: RED, GREENBLUE.

Giá trị màu RGBA là phần mở rộng của RGB với tham số bổ sung Alpha (độ mờ).

Giá trị màu 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 sau:

rgb(red,green,blue)

Mỗi tham số (red,green,blue) xác định cường độ của màu với giá trị từ 0 đến 255. Nghĩa là có tất cả là 256 x 256 x 256 = 16777216 màuindecision

Ví dụ:

rgb(255,0,0) được hiển thị là màu đỏ, vì màu đỏ có trị cao nhất (255) và hai màu còn lại (green và blue) được đặt thành 0.

rgb(0,255,0) được hiển thị là màu xanh lá cây, vì màu xanh lá cây có giá trị cao nhất (255) và hai màu còn lại (red và blue) có giá trị là 0.

rgb(0,0,0) được hiển thị màu đen,  tất cả các thông số màu đặt là 0 .

rgb(255,255,255) là màu trắng, tất cả các thông số màu đặt là 255.

Ví dụ

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

Xem kết quả

Màu xám

Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị màu bằng nhau cho cả ba tham số:

Ví dụ

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

Xem kết quả

Giá trị màu RGBA

Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với tham số Alpha - xác định độ mờ cho một màu.

Giá trị màu RGBA được xác định bằng công thức sau:

rgba(red,green,blue,alpha)

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

Ví dụ

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

Xem kết quả

HEX Color


Màu hệ thập lục phân được xác định bằng cú pháp: #RRGGBB, trong đó các số nguyên thập lục phân RR (red), GG (green)BB (blue) chỉ định các thành phần của màu.

Giá trị HEX color

Chúng ta có thể sử dụng hệ màu thập lục phân để xác định giá trị màu sắc cho thuộc tính color

#rrggbb

Trong đó rr (red), gg (green) và bb (blue) là các giá trị thập lục phân từ 00 đến ff (giống như số thập phân 0-255).

#ff0000 được hiển thị là màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (ff) và hai màu còn lại (green và blue) được đặt thành 00.

#00ff00 được hiển thị là màu xanh lá cây, vì màu xanh lá cây được đặt thành giá trị cao nhất (ff) và hai màu còn lại (red và blue) được đặt thành 00.

#000000 là màu đen, vì các giá trị tham số là 00.

#ffffff là màu trắng, vì các giá trị tham số là ff.

Ví dụ

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

Xem kết quả

Màu xám

Các trạng thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả ba tham số

Ví dụ

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

Xem kết quả

HSL và HSLA color


HSL là viết tắt của màu sắc, độ bão hòa và độ sáng.

Giá trị màu HSLA là phần mở rộng của HSL với kênh Alpha (độ mờ).

Giá trị màu HSL

Trong HTML, một màu sắc có thể được chỉ định bằng cách sử dụng kết hợp giữa các tham số: màu sắc, độ bão hòa và độ đậm nhạt (HSL), cú pháp như sau.

hsl(hue,saturation,lightnes)

hue: màu sắc - là mật độ trên bánh xe màu từ 0 đến 360. 0 là màu đỏ, 120 là xanh lục và 240 là xanh lam.

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 đủ.

lightnes: độ sáng - là một giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Ví dụ

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

Xem kết quả

Độ bão hòa

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

100%: là màu tinh khiết, không có sắc thái màu xám

50%: là 50% có màu xám, nhưng chúng ta vẫn có thể nhìn thấy màu sắc.

0%: là màu xám hoàn toàn, chúng ta không còn nhìn thấy màu sắc nữa.

Ví dụ

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

Xem kết quả

Độ sáng

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

Ví dụ

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

Xem kết quả

Màu xám

Màu xám thường được xác định bằng cách đặt màu sắc và độ bão hòa thành 0, đồng thời điều chỉnh độ sáng từ 0% đến 100% để có được các sắc thái màu xám đậm hơn/nhạt hơn.

Ví dụ

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

Xem kết quả

Giá trị màu HSLA

Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh Alpha - chỉ định độ mờ cho một màu. Cú pháp như sau:

hsla(hue,saturation,lightness,alpha)

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

Ví dụ

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

Xem kết quả