Color trong html
Color trong HTML đượ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
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>
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>
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>
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, HEX và HSL:
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ị 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ụ
<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>
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 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ụ
<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>
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>
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>
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 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>
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>
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>
Độ 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>
Độ 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>
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>
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>