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

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

Bài liên quan

Tạo Popular Posts Widget nhiều màu sắc trong blogspot với CSS

Popular Posts Widget là một widget cho phép chủ blog đăng những bài viết được xem nhiều nhất trong tháng, trong tuần hoặc tất cả thời gian cho khách viếng thăm blog của họ. Widget này có sẵn trong blogspot và chúng ta có thể dễ dàng cho nó hiển thị ngoài trang chủ. Mặc định nó sẽ hiển thị hình ...

Trịnh Tiến Mạnh viết 18:24 ngày 04/10/2018

Tên màu sắc trong HTML

Bảng dưới đây là tên, mã màu sắc được hơn 140 trình duyệt web hỗ trợ hiển thị: Tên màu Mã HEX Shades Mix AliceBlue #F0F8FF shades mix AntiqueWhite #FAEBD7 shades mix Aqua #00FFFF shades mix Aquamarine ...

Vũ Văn Thanh viết 15:11 ngày 07/09/2018

Màu sắc trong CSS3

Màu sắc trong CSS3 CSS hỗ trợ tên màu sắc, hexadecimal và RGB. Ngoài ra, CSS3 cũng giới thiệu: màu RGBA màu HSL màu HSLA opacity Trình duyệt hỗ trợ Các con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các giá trị / thuộc tính ...

Trịnh Tiến Mạnh viết 14:46 ngày 07/09/2018

Tìm hiểu qua tâm lí học về màu sắc trong thiết kế web

Trong thiết kế web, màu sắc ảnh hưởng trực tiếp tới cách hiểu, cảm nhận và hành vi của người dùng. Có thể bạn có chút hiểu biết cơ bản về tâm lí học màu sắc nhưng những gì chúng ta biết vẫn còn mang tính phỏng đoán chủ quan. Mỗi người đều có một cách hiểu riêng về màu sắc dựa vào ...

Tạ Quốc Bảo viết 17:35 ngày 31/08/2018

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

Hoàng Hải Đăng viết 11:10 ngày 22/08/2018
0