Màu sắc trong HTML

Trong HTML, màu sắc được chỉ định bằng tên màu có sẵn hoặc bằng các giá trị RGB, HEX, HSL, RGBA, HSLA.

• Bảng mã màu chuẩn cho lập trình viên, nhà thiết kế

Tên màu sắc trong HTML

Trong HTML, màu sắc có thể được xác định bằng tên màu. HTML hỗ trợ 140 màu chuẩn. 

Dưới đây là tên 148 màu trong HTML, bạn có thể thử từng tên để biết màu sắc chính xác sẽ hiển thị trên trang web như thế nào nhé.

• AliceBlue
• AntiqueWhite
• Aqua
• Aquamarine
• Azure
• Beige
• Bisque
• Black
• BlanchedAlmond
• Blue
• BlueViolet
• Brown
• BurlyWood
• CadetBlue
• Chartreuse
• Chocolate
• Coral
• CornflowerBlue
• Cornsilk
• Crimson
• Cyan
• DarkBlue
• DarkCyan
• DarkGoldenRod
• DarkGray
• DarkGrey
• DarkGreen
• DarkKhaki
• DarkMagenta
• DarkOliveGreen
• DarkOrange
• DarkOrchid
• DarkRed
• DarkSalmon
• DarkSeaGreen
• DarkSlateBlue
• DarkSlateGray
• DarkSlateGrey
• DarkTurquoise
• DarkViolet
• DeepPink
• DeepSkyBlue
• DimGray
• DimGrey
• DodgerBlue
• FireBrick
• FloralWhite
• ForestGreen
• Fuchsia
• Gainsboro
• GhostWhite
• Gold
• GoldenRod
• Gray
• Grey
• Green
• GreenYellow
• HoneyDew
• HotPink
• IndianRed
• Indigo
• Ivory
• Khaki
• Lavender
• LavenderBlush
• LawnGreen
• LemonChiffon
• LightBlue
• LightCoral
• LightCyan
• LightGoldenRodYellow
• LightGray
• LightGrey
• LightGreen
• LightPink
• LightSalmon
• LightSeaGreen
• LightSkyBlue
• LightSlateGray
• LightSlateGrey
• LightSteelBlue
• LightYellow
• Lime
• LimeGreen
• Linen
• Magenta
• Maroon
• MediumAquaMarine
• MediumBlue
• MediumOrchid
• MediumPurple
• MediumSeaGreen
• MediumSlateBlue
• MediumSpringGreen
• MediumTurquoise
• MediumVioletRed
• MidnightBlue
• MintCream
• MistyRose
• Moccasin
• NavajoWhite
• Navy
• OldLace
• Olive
• OliveDrab
• Orange
• OrangeRed
• Orchid
• PaleGoldenRod
• PaleGreen
• PaleTurquoise
• PaleVioletRed
• PapayaWhip
• PeachPuff
• Peru
• Pink
• Plum
• PowderBlue
• Purple
• RebeccaPurple
• Red
• RosyBrown
• RoyalBlue
• SaddleBrown
• Salmon
• SandyBrown
• SeaGreen
• SeaShell
• Sienna
• Silver
• SkyBlue
• SlateBlue
• SlateGray
• SlateGrey
• Snow
• SpringGreen
• SteelBlue
• Tan
• Teal
• Thistle
• Tomato
• Turquoise
• Violet
• Wheat
• White
• WhiteSmoke
• Yellow
• YellowGreen

Màu nền

Phần tử có thể được đặt màu nền như bạn đã thấy khi học về thuộc tính Style.

<p style="background-color:DodgerBlue;">Xin chào</p>
<p style="background-color:Tomato;">Quản trị mạng là...</p>

Xin chào

Quản trị mạng là...

Màu văn bản

Màu chữ trong HTML cũng được dùng theo cách tương tự.

<p style="color:Tomato;">Xin chào</p>
<p style="color:DodgerBlue;">Quản trị mạng...</p>
<p style="color:MediumSeaGreen;">Học HTML...</p>

Xin chào

Quản trị mạng...

Học HTML...

Màu viền

Đây là ví dụ tạo màu viền cho phần tử.

<p style="border:2px solid Tomato;">Xin chào</p>
<p style="border:2px solid DodgerBlue;">Xin chào</p>
<p style="border:2px solid Violet;">Xin chào</p>

Xin chào

Xin chào

Xin chào

Giá trị màu

Trong HTML, màu sắc còn có thể được chỉ định bằng các giá trị màu RGB, HEX, HSL, RGBA hay HSLA. Tương tự như việc sử dụng tên màu “Tomato” (màu đỏ cà chua), có thể dùng các giá trị sau.

<p style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</p>
<p style="background-color:#ff6347;">#ff6347</p>
<p style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</p>

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Mã màu cho ra màu đỏ cà chua nhưng với độ trong suốt 50%.

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

rgba(255, 99, 71, 0.5)

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

Giá trị RGB

Một màu trong HTML có thể được chỉ định bằng các giá trị RGB. theo cú pháp

rgb(red, green, blue)

Mỗi thông số red (đỏ), green (xanh lá cây), blue (xanh dương) cho biết mức độ của màu đó, nằm trong khoảng từ 0 tới 255. Ví dụ rgb(255, 0, 0) là màu đỏ vì đỏ có giá trị cao nhất còn xanh lá cây và xanh dương là 0. Giá trị màu đen là (0, 0, 0) và giá trị màu trắng là (255, 255, 255)

Hãy thử kết hợp các giá trị để cho ra màu. Gam màu xám được tạo bằng cách dùng 3 giá trị bằng nhau.

<p style="background-color:rgb(0, 0, 0); color:rgb(255, 255, 255);">rgb(0, 0, 0)</p>
<p style="background-color:rgb(60, 60, 60); color:rgb(255, 255, 255);">rgb(60, 60, 60)</p>
<p style="background-color:rgb(120, 120, 120); color:rgb(255, 255, 255);">rgb(120, 120, 120)</p>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

Giá trị HEX

Màu sắc trong HTML cũng có thể được chỉ định bằng giá trị hệ thập lục phân (hexadecimal) dưới dạng:

#rrggbb

Trong đó rr (red), gg (green) và bb (blue) là các giá trị hệ thập lục phân, nằm giữa 00 và ff (tương tự 0 - 255 trong hệ thập phân). #ff0000 sẽ là màu đỏ vì đỏ có giá trị cao nhất (ff) còn 2 màuxanh lá cây và xanh dương có giá trị bằng 0.

<p style="background-color:#ff0000; color:#ffffff;">#ff0000</p>
<p style="background-color:#3cb371; color:#ffffff;">#3cb371</p>

#ff0000

#3cb371

Gam màu cũng được dùng bằng cách cho 3 giá trị bằng nhau.

Giá trị HSL

Màu sắc cũng có thể được chỉ định bằng các giá trị vùng màu (hue), độ bão hòa (saturation) và độ sáng (lightness) viết tắt thành HSL, dưới dạng

hsl(hue, saturation, lightness)

• Vùng màu là mức độ của màu trên vòng màu sắc, từ 0 tới 360. 0 là đỏ, 120 là xanh lá và 240 là xanh dương.
• Độ bão hòa là giá trị phần trăm, thể hiện độ tinh khiết của màu, 0% nghĩa là gam xám và 100% là màu tinh khiết.
• Độ sáng đo bằng phần trăm, 0% là đen, 50% là không sáng không tối và 100% là trắng.

<p style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(240, 100%, 50%); color:#ffffff;">hsl(240, 100%, 50%)</p>
<p style="background-color:hsl(39, 100%, 50%); color:#ffffff;">hsl(39, 100%, 50%)</p>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(39, 100%, 50%)

Độ bão hòa

Độ bão hòa dùng để mô tả độ tinh khiết, đậm đặc của màu.

• 100% là tinh khiết hoàn toàn, không có ám xám.
• 50% là 50% xám, nhưng vẫn có thể nhìn thấy màu.
• 0% là hoàn toàn xám, không thể thấy màu nữa.

<p style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(0, 80%, 50%); color:#ffffff;">hsl(0, 80%, 50%)</p>
<p style="background-color:hsl(0, 50%, 50%); color:#ffffff;">hsl(0, 50%, 50%)</p>
<p style="background-color:hsl(0, 20%, 50%); color:#ffffff;">hsl(0, 20%, 50%)</p>
<p style="background-color:hsl(0, 0%, 50%); color:#ffffff;">hsl(0, 0%, 50%)</p>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 50%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Độ sáng

Độ sáng cho biết bạn muốn lấy màu sáng đến mức nào, 0% nghĩa là không sáng (đen), 50% là không sáng không tối còn 100% là sáng hoàn toàn (trắng).

<p style="background-color:hsl(0, 100%, 0%); color:#ffffff;">hsl(0, 100%, 0%)</p>
<p style="background-color:hsl(0, 100%, 20%); color:#ffffff;">hsl(0, 100%, 20%)</p>
<p style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(0, 100%, 80%); color:#ffffff;">hsl(0, 100%, 80%)</p>
<p style="background-color:hsl(0, 100%, 100%); color:#000000;">hsl(0, 100%, 100%)</p>

hsl(0, 100%, 0%)

hsl(0, 100%, 20%)

hsl(0, 100%, 50%)

hsl(0, 100%, 80%)

hsl(0, 100%, 100%)

Để có màu gam xám thường đặt độ bão hòa và vùng màu về 0, độ sáng từ 0% tới 100% để lấy sắc xám tối/sáng hơn.

<p style="background-color:hsl(0, 0%, 0%); color:#ffffff;">hsl(0, 0%, 0%)</p>
<p style="background-color:hsl(0, 0%, 25%); color:#ffffff;">hsl(0, 0%, 25%)</p>
<p style="background-color:hsl(0, 0%, 50%); color:#ffffff;">hsl(0, 0%, 50%)</p>
<p style="background-color:hsl(0, 0%, 70%); color:#ffffff;">hsl(0, 0%, 70%)</p>

hsl(0, 0%, 0%)

hsl(0, 0%, 25%)

hsl(0, 0%, 50%)

hsl(0, 0%, 70%)

Giá trị RGBA

Giá trị màu RGBA là phần mở rộng của màu RGB, bổ sung thêm kênh alpha - xác định độ trong suốt của màu, với công thức:

rgba (red, green, blue, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không trong suốt).

<p style="background-color:rgba(255, 99, 71, 0); color:#000000;">rgba(255, 99, 71, 0)</p>
<p style="background-color:rgba(255, 99, 71, 0.4); color:#000000;">rgba(255, 99, 71, 0.4)</p>
<p style="background-color:rgba(255, 99, 71, 0.8); color:#000000;">rgba(255, 99, 71, 0.8)</p>
<p style="background-color:rgba(255, 99, 71, 1); color:#000000;">rgba(255, 99, 71, 1)</p>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Giá trị màu HSLA

Giá trị màu HSLA là bản mở rộng của HSL, bổ sung thêm kênh alpha - xác định độ trong suốt của màu, với công thức:

hsl(hue, saturation, lightness, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không trong suốt).

<p style="background-color:hsl(9, 100%, 64%, 0); color:#000000;">hsl(9, 100%, 64%, 0)</p>
<p style="background-color:hsl(9, 100%, 64%, 0.4); color:#000000;">hsl(9, 100%, 64%, 0.4)</p>
<p style="background-color:hsl(9, 100%, 64%, 0.8); color:#000000;">hsl(9, 100%, 64%, 0.8)</p>
<p style="background-color:hsl(9, 100%, 64%, 1); color:#000000;">hsl(9, 100%, 64%, 1)</p>

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

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

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

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

Bài trước: Thẻ chú thích trong HTML 

Bài sau: Tạo kiểu cách cho HTML với CSS