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

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.

Xem kết quả

Text Color

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

Ví dụ

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

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.

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.

Xem kết quả

Border Color

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

Ví dụ

 style = "border:2 px solid Tomato;">Hello World

style = “border:2 px solid DodgerBlue;”>Hello World

style = “border:2 px solid Violet;”>Hello World

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

sau có màu background của chúng tương ứng với các giá trị RGB, HEX và HSL:

rgb ( 255,99,71 )

# ff6347

hsl ( 9,100 %, 64 % )

Hai phần tử HTML

sau có màu nền được đặt bằng các giá trị RGBA và HSLA, 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ụ

 style = "background-color:# ff6347;">#ff6347

style = “background-color:hsl ( 9, 100 %, 64 % );”>hsl(9, 100%, 64%)

style = “background-color:rgba ( 255, 99, 71, 0.5 );”>rgba(255, 99, 71, 0.5)

style = “background-color:hsla ( 9, 100 %, 64 %, 0.5 );”>hsla(9, 100%, 64%, 0.5)

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, GREEN và BLUE.

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 hoàn toàn 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àu

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ụ

 style = "background-color:rgb ( 255, 0, 0 );">rgb(255, 0, 0)

style = “background-color:rgb ( 0, 0, 255 );”>rgb(0, 0, 255)

style = “background-color:rgb ( 60, 179, 113 );”>rgb(60, 179, 113)

style = “background-color:rgb ( 238, 130, 238 );”>rgb(238, 130, 238)

style = “background-color:rgb ( 255, 165, 0 );”>rgb(255, 165, 0)

style = “background-color:rgb ( 106, 90, 205 );”>rgb(106, 90, 205)

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 lập bằng cách sử dụng những giá trị màu bằng nhau cho cả ba tham số :

Ví dụ

 style = "background-color:rgb ( 60, 60, 60 );">rgb(60, 60, 60)

style = “background-color:rgb ( 100, 100, 100 );”>rgb(100, 100, 100)

style = “background-color:rgb ( 140, 140, 140 );”>rgb(140, 140, 140)

style = “background-color:rgb ( 180, 180, 180 );”>rgb(180, 180, 180)

style = “background-color:rgb ( 200, 200, 200 );”>rgb(200, 200, 200)

style = “background-color:rgb ( 240, 240, 240 );”>rgb(240, 240, 240)

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ụ

 style = "background-color:rgba ( 255, 99, 71, 0 );">rgba(255, 99, 71, 0)

style = “background-color:rgba ( 255, 99, 71, 0.2 );”>rgba(255, 99, 71, 0.2)

style = “background-color:rgba ( 255, 99, 71, 0.4 );”>rgba(255, 99, 71, 0.4)

style = “background-color:rgba ( 255, 99, 71, 0.6 );”>rgba(255, 99, 71, 0.6)

style = “background-color:rgba ( 255, 99, 71, 0.8 );”>rgba(255, 99, 71, 0.8)

style = “background-color:rgba ( 255, 99, 71, 1 );”>rgba(255, 99, 71, 1)

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) và BB (blue) chỉ định các thành phần của màu.

Giá trị HEX color

Chúng ta hoàn toàn có thể sử dụng hệ màu thập lục phân để xác lập giá trị sắc tố 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ụ

 style = "background-color:# ff0000;">#ff0000

style = “background-color:# 0000 ff;”>#0000ff

style = “background-color:# 3 cb371;”>#3cb371

style = “background-color:# ee82ee;”>#ee82ee

style = “background-color:# ffa500;”>#ffa500

style = “background-color:# 6 a5acd;”>#6a5acd

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 lập bằng cách sử dụng những giá trị bằng nhau cho cả ba tham số

Ví dụ

 style = "background-color:# 404040;">#404040

style = “background-color:# 686868;”>#686868

style = “background-color:# a0a0a0;”>#a0a0a0

style = “background-color:# bebebe;”>#bebebe

style = “background-color:# dcdcdc;”>#dcdcdc

style = “background-color:# f8f8f8;”>#f8f8f8

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 sắc tố hoàn toàn có thể được chỉ định bằng cách sử dụng phối hợp giữa những tham số : sắc tố, độ 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ụ

style = "background-color:hsl ( 0, 100 %, 50 % );">hsl(0, 100%, 50%)

style = “background-color:hsl ( 240, 100 %, 50 % );”>hsl(240, 100%, 50%)

style = “background-color:hsl ( 147, 50 %, 47 % );”>hsl(147, 50%, 47%)

style = “background-color:hsl ( 300, 76 %, 72 % );”>hsl(300, 76%, 72%)

style = “background-color:hsl ( 39, 100 %, 50 % );”>hsl(39, 100%, 50%)

style = “background-color:hsl ( 248, 53 %, 58 % );”>hsl(248, 53%, 58%)

Xem kết quả

Độ bão hòa

Độ bão hòa hoàn toàn có thể được miêu 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 tất cả chúng ta vẫn hoàn toàn có thể nhìn thấy sắc tố .
0 % : là màu xám trọn vẹn, tất cả chúng ta không còn nhìn thấy sắc tố nữa .

Ví dụ

 style = "background-color:hsl ( 0, 100 %, 50 % );">hsl(0, 100%, 50%)

style = “background-color:hsl ( 0, 80 %, 50 % );”>hsl(0, 80%, 50%)

style = “background-color : hsl ( 0, 60 %, 50 % );”>hsl(0, 60%, 50%)

style = “background-color:hsl ( 0, 40 %, 50 % );”>hsl(0, 40%, 50%)

style = “background-color:hsl ( 0, 20 %, 50 % );”>hsl(0, 20%, 50%)

style = “background-color:hsl ( 0, 0 %, 50 % );”>hsl(0, 0%, 50%)

Xem kết quả

Độ sáng

Độ đậm nhạt của một màu hoàn toàn có thể được miêu tả bằng mức độ ánh sáng tất cả chúng ta mong ước cho sắc tố, 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 vừa đủ ( trắng ) .

Ví dụ

 style = "background-color:hsl ( 0, 100 %, 0 % );">hsl(0, 100%, 0%)

style = “background-color:hsl ( 0, 100 %, 25 % );”>hsl(0, 100%, 25%)

style = “background-color:hsl ( 0, 100 %, 50 % );”>hsl(0, 100%, 50%)

style = “background-color:hsl ( 0, 100 %, 75 % );”>hsl(0, 100%, 75%)

style = “background-color:hsl ( 0, 100 %, 90 % );”>hsl(0, 100%, 90%)

style = “background-color:hsl ( 0, 100 %, 100 % );”>hsl(0, 100%, 100%)

Xem kết quả

Màu xám

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

Ví dụ

 style = "background-color:hsl ( 0, 0 %, 20 % );">hsl(0, 0%, 20%)

style = “background-color:hsl ( 0, 0 %, 30 % );”>hsl(0, 0%, 30%)

style = “background-color:hsl ( 0, 0 %, 40 % );”>hsl(0, 0%, 40%)

style = “background-color:hsl ( 0, 0 %, 60 % );”>hsl(0, 0%, 60%)

style = “background-color:hsl ( 0, 0 %, 70 % );”>hsl(0, 0%, 70%)

style = “background-color:hsl ( 0, 0 %, 90 % );”>hsl(0, 0%, 90%)

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 từ 0,0 ( trọn vẹn trong suốt ) đến 1,0 ( trọn vẹn không trong suốt ) .

Ví dụ

 style = "background-color:hsla ( 9, 100 %, 64 %, 0 );">hsla(9, 100%, 64%, 0)

style = “background-color:hsla ( 9, 100 %, 64 %, 0.2 );”>hsla(9, 100%, 64%, 0.2)

style = “background-color:hsla ( 9, 100 %, 64 %, 0.4 );”>hsla(9, 100%, 64%, 0.4)

style = “background-color:hsla ( 9, 100 %, 64 %, 0.6 );”>hsla(9, 100%, 64%, 0.6)

style = “background-color:hsla ( 9, 100 %, 64 %, 0.8 );”>hsla(9, 100%, 64%, 0.8)

style = “background-color:hsla ( 9, 100 %, 64 %, 1 );”>hsla(9, 100%, 64%, 1)

Xem kết quả