Màu sữa html. Màu sắc trong "MTA": bạn cần biết điều gì? Mã màu

Mã màu trong CSS được sử dụng để chỉ định màu sắc. Thông thường, mã màu hoặc giá trị màu được sử dụng để đặt màu cho màu nền trước của một phần tử (ví dụ: màu văn bản, màu liên kết) hoặc màu nền của một phần tử (màu nền, màu khối). Chúng cũng có thể được sử dụng để thay đổi màu của nút, đường viền, điểm đánh dấu, di chuột và các hiệu ứng trang trí khác.

Bạn có thể chỉ định giá trị màu của mình ở nhiều định dạng khác nhau. Bảng sau liệt kê tất cả các định dạng có thể có:

Các định dạng được liệt kê được mô tả chi tiết hơn dưới đây.

Màu CSS - Mã Hex

Mã màu thập lục phân là một đại diện sáu chữ số của màu sắc. Hai chữ số đầu tiên (RR) đại diện cho giá trị màu đỏ, hai chữ số tiếp theo đại diện cho giá trị màu xanh lá cây (GG) và hai chữ số cuối cùng đại diện cho giá trị màu xanh lam (BB).

Màu CSS - Mã Hex ngắn

Mã màu hex ngắn là một dạng ký hiệu sáu ký tự ngắn hơn. Ở định dạng này, mỗi chữ số được lặp lại để tạo ra giá trị màu gồm sáu chữ số tương đương. Ví dụ: #0F0 trở thành #00FF00.

Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa nào như Adobe Photoshop, Core Draw, v.v.

Mỗi mã màu thập lục phân trong CSS sẽ được bắt đầu bằng dấu băm "#". Dưới đây là ví dụ về cách sử dụng ký hiệu thập lục phân.

Màu CSS - Giá trị RGB

Giá trị RGB là mã màu được đặt bằng thuộc tính rgb(). Thuộc tính này nhận ba giá trị: mỗi giá trị cho màu đỏ, xanh lục và xanh lam. Giá trị có thể là số nguyên, từ 0 đến 255 hoặc phần trăm.

Ghi chú: Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính màu rgb(), vì vậy không nên sử dụng nó.

Dưới đây là ví dụ hiển thị nhiều màu sử dụng giá trị RGB.

Trình tạo mã màu

Bạn có thể tạo hàng triệu mã màu bằng dịch vụ của chúng tôi.

Màu sắc an toàn của trình duyệt

Dưới đây là bảng gồm 216 màu an toàn nhất và độc lập với máy tính nhất. Những màu này trong CSS có phạm vi từ mã thập lục phân 000000 đến FFFFFF. Chúng an toàn khi sử dụng vì chúng đảm bảo rằng tất cả các máy tính hiển thị màu chính xác khi làm việc với bảng màu 256.

Bảng màu "an toàn" trong CSS
#000000 #000033 #000066 #000099 #0000CC#0000FF
#003300 #003333 #003366 #003399 #0033CC#0033FF
#006600 #006633 #006666 #006699 #0066CC#0066FF
#009900 #009933 #009966 #009999 #0099CC#0099FF
#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF
#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF
#330000 #330033 #330066 #330099 #3300CC#3300FF
#333300 #333333 #333366 #333399 #3333CC#3333FF
#336600 #336633 #336666 #336699 #3366CC#3366FF
#339900 #339933 #339966 #339999 #3399CC#3399FF
#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF
#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF
#660000 #660033 #660066 #660099 #6600CC#6600FF
#663300 #663333 #663366 #663399 #6633CC#6633FF
#666600 #666633 #666666 #666699 #6666CC#6666FF
#669900 #669933 #669966 #669999 #6699CC#6699FF
#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF
#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF
#990000 #990033 #990066 #990099 #9900CC#9900FF
#993300 #993333 #993366 #993399 #9933CC#9933FF
#996600 #996633 #996666 #996699 #9966CC#9966FF
#999900 #999933 #999966 #999999 #9999CC#9999FF
#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF
#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF
#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF
#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF
#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF
#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF
#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF
#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF
#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF
#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF
#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF
#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF
#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF
#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

Trong HTML, màu sắc có thể được chỉ định theo ba cách:

Đặt màu trong HTML theo tên của nó

Một số màu có thể được chỉ định theo tên của chúng, sử dụng tên màu bằng tiếng Anh làm giá trị. Các từ khóa phổ biến nhất: đen, trắng, đỏ, xanh lá cây, xanh dương, v.v.:

Màu văn bản – đỏ

Các màu phổ biến nhất của tiêu chuẩn World Wide Web Consortium (W3C):

Màu sắcTênMàu sắcTên Màu sắcTên Màu sắcTên
Đen Xám Bạc Trắng
Màu vàng Chanh xanh Thủy hoa vân anh
Màu đỏ Màu xanh lá Màu xanh da trời Màu tím
Bỏ rơi Ôliu Hải quân màu xanh mòng két

Ví dụ về việc sử dụng tên màu khác nhau:

Ví dụ: chỉ định màu theo tên của nó

  • Hãy tự mình thử xem"

Tiêu đề trên nền đỏ

Tiêu đề trên nền màu cam

Tiêu đề trên nền vôi

Chữ trắng trên nền xanh

Tiêu đề trên nền đỏ

Tiêu đề trên nền màu cam

Tiêu đề trên nền vôi

Chữ trắng trên nền xanh

Chỉ định màu bằng RGB

Khi hiển thị các màu khác nhau trên màn hình, bảng màu RGB được sử dụng làm cơ sở. Bất kỳ màu nào cũng thu được bằng cách trộn ba màu cơ bản: R - đỏ, G - xanh, B - màu xanh. Độ sáng của mỗi màu được cung cấp bởi một byte và do đó có thể lấy các giá trị từ 0 đến 255. Ví dụ: RGB(255,0,0) được hiển thị dưới dạng màu đỏ vì màu đỏ được đặt ở giá trị cao nhất (255) và phần còn lại được đặt thành 0 Bạn cũng có thể đặt màu theo phần trăm. Mỗi thông số cho biết mức độ sáng của màu tương ứng. Ví dụ: các giá trị rgb(127, 255, 127) và rgb(50%, 100%, 50%) sẽ đặt cùng màu xanh lục trung bình:

Ví dụ: Chỉ định màu bằng RGB

  • Hãy tự mình thử xem"

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Đặt màu theo giá trị thập lục phân

Giá trị R G B cũng có thể được chỉ định bằng cách sử dụng các giá trị màu thập lục phân (HEX) ở dạng: #RRGGBB trong đó RR (đỏ), GG (xanh lục) và BB (xanh lam) 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 ) . Hệ thập lục phân, không giống như hệ thập phân, dựa trên số 16, như tên gọi của nó. Hệ thập lục phân sử dụng các ký hiệu sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ở đây các số từ 10 đến 15 được thay thế bằng các chữ cái Latinh. Các số lớn hơn 15 trong hệ thập lục phân được biểu diễn bằng cách kết hợp hai ký tự thành một giá trị. Ví dụ: số cao nhất 255 ở dạng thập phân tương ứng với giá trị FF cao nhất ở dạng thập lục phân. Không giống như hệ thập phân, số thập lục phân được bắt đầu bằng ký hiệu băm. # , ví dụ: #FF0000 được hiển thị là màu đỏ vì màu đỏ được đặt ở giá trị cao nhất (FF) và các màu còn lại được đặt ở giá trị tối thiểu (00). Dấu hiệu sau ký hiệu băm # Bạn có thể gõ cả chữ hoa và chữ thường. Hệ thập lục phân cho phép bạn sử dụng dạng viết tắt #rgb, trong đó mỗi ký tự tương đương với double. Vì vậy, mục #f7O nên được coi là #ff7700.

Ví dụ: Màu HEX

  • Hãy tự mình thử xem"

màu đỏ: #FF0000

màu xanh lá cây: #00FF00

màu xanh: #0000FF

màu đỏ: #FF0000

màu xanh lá cây: #00FF00

màu xanh: #0000FF

đỏ+xanh=vàng: #FFFF00

đỏ+xanh=tím: #FF00FF

xanh lá cây+xanh dương=lục lam: #00FFFF

Danh sách các màu phổ biến (tên, HEX và RGB):

tên tiêng Anh Tên tiếng Nga Vật mẫu HEX RGB
dền dền #E52B50 229 43 80
Hổ phách Hổ phách #FFBF00 255 191 0
Thủy Xanh lam #00FFFF 0 255 255
Azure Azure #007FFF 0 127 255
Đen Đen #000000 0 0 0
Màu xanh da trời Màu xanh da trời #0000FF 0 0 255
Bondi xanh Nước biển Bondi #0095B6 0 149 182
Thau Thau #B5A642 181 166 66
Màu nâu Màu nâu #964B00 150 75 0
màu xanh thiên thanh Azure #007BA7 0 123 167
Mùa xuân xanh đậm Mùa xuân xanh đậm #177245 23 114 69
ngọc lục bảo ngọc lục bảo #50C878 80 200 120
Cà tím Cà tím #990066 153 0 102
hoa vân anh hoa vân anh #FF00FF 255 0 255
Vàng Vàng #FFD700 250 215 0
Xám Xám #808080 128 128 128
Màu xanh lá Màu xanh lá #00FF00 0 255 0
xanh đậm xanh đậm #4B0082 75 0 130
Ngọc Ngọc #00A86B 0 168 107
Chanh xanh Chanh xanh #CCFF00 204 255 0
Malachite Malachite #0BDA51 11 218 81
Hải quân Xanh đậm #000080 0 0 128
đất son đất son #CC7722 204 119 34
Ôliu Ôliu #808000 128 128 0
Quả cam Quả cam #FFA500 255 165 0
Quả đào Quả đào #FFE5B4 255 229 180
Quả bí ngô Quả bí ngô #FF7518 255 117 24
Màu tím màu tím #800080 128 0 128
Màu đỏ Màu đỏ #FF0000 255 0 0
Nghệ tây Nghệ tây #F4C430 244 196 48
Biển xanh Biển xanh #2E8B57 46 139 87
Đầm lầy xanh Bolotny #ACB78E 172 183 142
màu xanh mòng két Xanh lam #008080 0 128 128
Siêu biển Siêu biển #120A8F 18 10 143
màu tím màu tím #8B00FF 139 0 255
Màu vàng Màu vàng #FFFF00 255 255 0

Mã màu (nền) theo độ bão hòa và màu sắc.

Thật không may, vẫn chưa thể hiển thị cảm giác vị giác trên trang web. Nhưng điều này có thể được bù đắp hoàn toàn với sự trợ giúp của màu sắc. Xét cho cùng, màu html cho phép bạn hiển thị bất kỳ sắc thái nào trong số hàng triệu sắc thái. Vì thế " bút chì màu Có nhiều hơn bảy trong bộ của anh ấy.

Cách phối màu trong html

Trong html, màu sắc có thể được chỉ định theo một số định dạng:

1. Là giá trị thập lục phân – mã được chỉ định trong hệ thống số thập lục phân được sử dụng. Các mã màu như vậy trong html bao gồm ba cặp số thập lục phân. Mỗi cặp chịu trách nhiệm về độ bão hòa của bóng với màu chính của nó:

  • Cặp số đầu tiên chịu trách nhiệm về màu đỏ;
  • Cặp thứ hai dành cho nội dung màu xanh lục;
  • Cái sau là dành cho nội dung màu xanh lam của nó.

Dấu băm được đặt ở đầu mã (trước các số). Đây là mã màu thập lục phân. Ngoài các số từ 1 đến 9, hệ thống số này còn sử dụng các chữ cái thuộc bảng chữ cái Latinh (A, B, C, D, E, F).

Ví dụ: mã màu trắng trong html sẽ có dạng #FFFFFF:

2. Từ khóa - HTML hiện hỗ trợ khoảng 147 từ khóa. Nhưng không phải tất cả những từ này là duy nhất. Một số trong số họ đề cập đến cùng một màu sắc.

Màu xám được thể hiện bằng hai từ khóa: grey và grey. Mã thập lục phân của chúng (HEX) có cùng giá trị #808080.

Ví dụ:

#808080




3. Ở định dạng RGB - mã hóa màu này trong html dựa trên việc sử dụng ba giá trị, được đặt trong phạm vi từ 0 đến 255. Mỗi giá trị xác định độ bão hòa của màu sắc với một trong các màu chính:

  • R – đỏ (đỏ);
  • G – xanh lá cây (xanh lá cây);
  • B – xanh lam (xanh lam).

Số màu ở định dạng RGB được viết dưới dạng sau: rgb(0, 210, 100).

màu nền:rgb(100,186,43)


4. Ở định dạng RGBA - đây là định dạng RGB cải tiến, trong đó giá trị thứ tư chỉ định độ trong suốt của màu dưới dạng phân số thập phân từ 0 đến 1.

Ví dụ sử dụng:

màu nền:rgba(100,86,143,0.2)

màu nền:rgba(100,86,143,0.5)

màu nền:rgba(100,86,143,0.8)

màu nền:rgba(100,86,143,1)


Bảng màu HTML và trình tạo màu

Với nhiều định dạng cài đặt màu sắc như vậy, bạn rất dễ bị nhầm lẫn. Vì vậy, một bảng màu đặc biệt đã được phát minh. Nó cung cấp 147 tên chính của các sắc thái màu cùng với mã tuân thủ trong tất cả các tiêu chuẩn màu chính. Ngoài ra, mỗi trường đều được trang bị một thanh để lựa chọn màu sắc trực quan. Một trong những bảng này được trình bày trên trang web colorcheme.ru:


Nhưng ngay cả với cấu trúc phù hợp này, việc chọn màu phù hợp vẫn có thể khó khăn. Và thực tế không phải là bảng mã màu sẽ chứa mã màu bạn cần.

Để vượt qua trở ngại này và giúp việc chọn màu phù hợp trở nên dễ dàng nhất có thể, các dịch vụ web tương tác đã được phát triển. Giao diện người dùng của họ có thể hơi khác nhau.

Trên trang web html-color-codes.info, trình tạo màu trông như thế này:


Và trong dịch vụ color-picker.appsmaster.co, công cụ này được triển khai hơi khác một chút:


Độ bão hòa của từng màu trong trình tạo được đặt bằng các thanh trượt đặc biệt. Nhìn trực quan, bóng râm được hiển thị bằng màu của khung và hình chữ nhật ở phía bên trái. Ở phía dưới có 3 trường hiển thị mã màu ở dạng cơ bản.

Nhưng trình tạo màu không chỉ có sẵn trên các trang web chuyên biệt. Hầu như tất cả các biên tập viên đồ họa đều được trang bị một công cụ tương tự. Ví dụ: Photoshop:


Biện pháp phòng ngừa an toàn khi làm việc với màu sắc

Và điều này đã cách đây rất lâu, trở lại thời đại card màn hình chỉ hỗ trợ 256 màu. Vào thời xa xưa đó, hệ điều hành chỉ có thể hiển thị một số sắc thái 8-bit nhất định mà không bị biến dạng.

Sau đó, một bảng màu an toàn tuyệt vời đã được phát triển. Nó chỉ định 216 sắc thái có thể được hiển thị mà không bị biến dạng trong bất kỳ trình duyệt nào vào thời điểm đó. Và cho đến ngày nay điều này" bản thảo tuyệt vời» vẫn có sẵn trên một số tài nguyên:


Ngày nay mọi thứ đã thay đổi. Vì vậy, mọi quy tắc an toàn khi làm việc với màu sắc trong html đều bị hủy bỏ hoàn toàn. Xét cho cùng, phần cứng máy tính hiện đại hỗ trợ hơn 16 triệu sắc thái khác nhau. Và 216 màu an toàn đã chìm vào quên lãng.

Những dữ liệu này được xác nhận đầy đủ bằng số liệu thống kê. Đánh giá theo đó, vào năm 2014, chỉ có 0,5% người dùng có máy tính chỉ hỗ trợ 256 sắc thái.

Khái niệm cơ bản về sự hài hòa màu sắc

Không phải tất cả chúng ta đều được trời phú cho một cảm giác hài hòa tự nhiên về vị giác. Vì vậy, việc lựa chọn màu sắc phù hợp có thể là một thách thức thực sự. Tuy nhiên, khen ngợi khoa học, cô ấy thậm chí còn có thể mô tả sự hài hòa của màu sắc dưới dạng một số cách phối hợp. Tất cả đều dựa trên việc sử dụng bánh xe màu. Lược đồ chọn màu hài hòa trong html:

  • Phối màu song song - khi cả hai sắc thái trong bánh xe màu song song;
  • Sơ đồ bộ ba - tất cả các góc của hình tam giác đều dựa trên một trong các màu;
  • Đơn sắc - khi một số sắc thái gần giống nhau được chọn;
  • Analog là phiên bản cao cấp hơn của mạch đơn sắc. Trong trường hợp này, các sắc thái cùng màu nằm ở một khoảng cách nhất định.

Việc triển khai tất cả các chương trình này được trình bày rõ ràng trong dịch vụ Paletton.com. Nó cho phép bạn dễ dàng chọn một màu sắc hài hòa.

Mã Minecraft màu sắc hoặc Minecraft định dạng, cho phép bất kỳ người chơi nào thêm hoa và định dạng văn bản theo mọi cách có thể trực tiếp trong Minecraft. Mã màu từ &0-9 - đến &a-f. Thêm chúng trước văn bản của bạn. Tin nhắn từ người chơi có thể chứa mã màu cho phép bạn thêm màu vào câu của mình.

Màu sắc và mã định dạng

Dấu và (&) theo sau là số thập lục phân trong tin nhắn báo hiệu máy khách chuyển đổi màu khi hiển thị văn bản. Ngoài ra, văn bản có thể được định dạng bằng & theo sau là một chữ cái. Bạn có thể thêm các màu khác nhau vào sách, khối lệnh, tên máy chủ, mô tả máy chủ (motd), tên thế giới, bảng hiệu và thậm chí cả tên người chơi.

Rất dễ dàng để định dạng văn bản của bạn trong cấu hình hoặc trong trò chơi bằng biểu đồ màu bên dưới. &r được sử dụng để đặt lại tất cả các mã, tức là &mAAA&rBBB sẽ được hiển thị dưới dạng AAA BBB.

Chúng tôi trình bày bảng mã màu hiện có trong Minecraft để bạn thuận tiện:

Mã sốTênTên kỹ thuậtMàu biểu tượngMàu bóng biểu tượng
RGBlục giácRGBlục giác
&0 Đenđen0 0 0 000000 0 0 0 000000
&1 Xanh đậmxanh đậm0 0 170 0000AA0 0 42 00002A
&2 Màu xanh lá cây đậmMàu xanh lá cây đậm0 170 0 00AA000 42 0 002A00
&3 Màu xanh đậmdark_aqua0 170 170 00AAA0 42 42 002A2A
&4 Đỏ sẫmđỏ sẫm170 0 0 AA000042 0 0 2A0000
&5 Màu tím đậmmàu tím đậm170 0 170 AA00AA42 0 42 2A002A
&6 Vàngvàng255 170 0 FFAA0042 42 0 2A2A00
&7 Xámxám170 170 170 AAAAAA42 42 42 2A2A2A
&8 Màu xám đenmàu xám đen85 85 85 555555 21 21 21 151515
&9 Màu xanh da trờimàu xanh da trời85 85 255 5555FF21 21 63 15153F
&MộtMàu xanh lámàu xanh lá85 255 85 55FF5521 63 21 153F15
&bXanh lamnước85 255 255 55FFFF21 63 63 153F3F
&cMàu đỏmàu đỏ255 85 85 FF555563 21 21 3F1515
&dMàu tím nhạtmàu tím nhạt255 85 255 FF55FF63 21 63 3F153F
&eMàu vàngmàu vàng255 255 85 FFFF5563 63 21 3F3F15
&fTrắngtrắng255 255 255 FFFFFF63 63 63 3F3F3F

Đôi khi nó là cần thiết gạch chân, gạch bỏ, điểm nổi bật bất kỳ văn bản nào. Điều này được thực hiện bằng cách sử dụng định dạng văn bản. Nó được sử dụng giống hệt như màu sắc (chúng ta đặt trước văn bản mã số, ví dụ &lMinecraft = Minecraft.

Để thuận tiện cho bạn, bên dưới là bảng mã định dạng:

Mã sốTên
&kvăn bản ma thuật
&lHình nhỏ
&mvăn bản gạch ngang
&Nvăn bản được gạch chân
&oVăn bản in nghiêng
& rVăn bản không có định dạng

CSS không được hiểu). Vì vậy, người quản trị web tương lai chỉ cần nghiên cứu Các công cụ HTML cho phép bạn thay đổi màu sắc, ví dụ: để tạo ra các bản tin e-mail tươi sáng và đầy màu sắc sẽ thu hút sự chú ý của đối tượng mục tiêu của trang web.

Bài đăng này khá dài, nhưng từ đó bạn sẽ tìm hiểu về tất cả các tính năng kỹ thuật khi làm việc với màu sắc bằng HTML. Chúng ta sẽ bắt đầu ghi bằng cách hiểu câu hỏi: tại sao chúng ta cần làm nổi bật các thành phần nhất định của trang HTML bằng màu sắc? Sau đó, chúng ta sẽ nói về mô hình RGB, mô hình này cho phép bạn đặt màu trong HTML bằng cách sử dụng các mã đặc biệt (đồng thời, chúng ta sẽ xem xét mã màu thập phân và giá trị màu HTML thập lục phân). Cũng từ bài đăng này, bạn sẽ tìm hiểu về bảng màu và cũng hiểu tại sao không có bảng màu trong HTML. Và ở cuối ấn phẩm này sẽ có ví dụ về thay đổi màu nền, văn bản và liên kết.

Sử dụng màu sắc trong HTML

Các trang web sẽ nhàm chán và không thú vị nếu không có hình ảnh, như chúng ta đã nói rất chi tiết và chi tiết trước đó. Nhưng hình ảnh có một nhược điểm đáng kể: mỗi hình ảnh là một hình ảnh bổ sung và do đó, tải thêm lên máy chủ.

Tôi muốn lưu ý rằng tôi không sử dụng một hình ảnh nào để thiết kế blog WordPress của mình; bố cục được thiết kế hoàn toàn bằng màu sắc. Giống nhau thôi Hôm nay chúng ta sẽ nói về màu sắc trong HTML. Màu sắc trong HTML được sử dụng cho các mục đích khác nhau, ví dụ: chúng ta có thể thiết kế bố cục trang web bằng cách làm nổi bật một số mục nhất định bằng màu này hoặc màu khác.

Bằng cách sử dụng màu sắc, chúng tôi có thể tập trung sự chú ý của khách truy cập vào một văn bản hoặc khối cụ thể của trang web. Lưu ý rằng nó cũng được xác định bằng cách sử dụng màu sắc theo cách mà người dùng có thể hiểu được: anh ta đã nhấp vào liên kết nào, liên kết nào anh ta chưa truy cập và anh ta hiện đang truy cập trang HTML nào.

Hãy cẩn thận sử dụng màu sắc để thiết kế tài liệu HTML, không phải tất cả các màu đều đi cùng nhau và không phải màu nào cũng làm hài lòng khách truy cập trang web của bạn. Nhưng tốt hơn hết bạn nên hỏi các nhà thiết kế web về những điều tinh tế này; bài viết này sẽ giúp bạn hiểu các tính năng kỹ thuật cho phép bạn kiểm soát màu sắc của các thành phần trang HTML.

Nhưng bạn không nên quên rằng thiết kế nên được tách biệt khỏi nội dung, vì vậy tốt hơn nên sử dụng CSS để xử lý màu sắc trên các trang HTML, nhưng chúng ta sẽ nói về điều này trong một bài viết khác. Bây giờ chúng ta sẽ thấy HTML có những công cụ nào để kiểm soát màu sắc trên các trang của trang web?.

Trong ngành CNTT, có rất nhiều mô hình màu sắc để thao tác màu sắc. Mô hình biểu diễn màu được sử dụng rộng rãi nhất là mô hình RGB. Chúng ta sẽ nói về một số tính năng của model này tại đây và sẽ có một ấn phẩm riêng để giới thiệu chi tiết hơn về RGB. Dưới đây bạn sẽ tìm thấy danh sách các mô hình màu được sử dụng trong CNTT (không chỉ HTML và CSS):

  1. Mô hình RGB. Mô hình này đã trở nên rất phổ biến và có lẽ là một trong những cách thuận tiện và phổ biến nhất để thao tác màu sắc của các phần tử HTML.
  2. Mô hình RGBA. Mô hình này rất giống với mô hình RGB, nhưng bao gồm kênh alpha cho màu sắc. Điểm đặc biệt của mô hình RGBA là nó cho phép bạn điều chỉnh không chỉ màu sắc của phần tử HTML mà còn cả độ trong suốt của nó do sự hiện diện của kênh alpha. Mô hình RGBA đã được thêm vào CSS3 và không được các trình duyệt cũ hỗ trợ.
  3. Mẫu HSL. Điểm đặc biệt của mô hình HSL là chúng tôi đặt màu bằng cách sử dụng các tham số của nó: màu sắc, độ phẳng và độ sáng. Mô hình này có phần khó hiểu hơn mô hình RGB.
  4. Mô hình HSLA. Mô hình này rất giống với mô hình HSL, nhưng cũng giống như mô hình RGBA, nó cho phép bạn làm việc với kênh màu alpha, vì vậy khi sử dụng HSLA, chúng ta không chỉ có thể đặt màu của phần tử HTML trên trang mà còn cả độ trong suốt của nó .
  5. Mẫu HSV (HSB). Không nên nhầm lẫn mô hình này với mô hình HSL. Lưu ý rằng bốn mô hình đầu tiên có thể được sử dụng trong HTML hoặc CSS để thiết kế trang web, nhưng mô hình HSV thì không. HSV được thiết kế bởi một trong những người sáng lập Pixar vào năm 1978 và rất giống HSL.
  6. Mô hình CMY hoặc CMYK. Model này được sử dụng trong tất cả các máy in màu để in. Mô hình CMYK dựa trên quy tắc in trên các tờ giấy trắng. Bất kỳ màu CMYK nào cũng có được bằng cách trộn Cyan (xanh nhạt, xanh ngọc), Magenta (đỏ tươi) và vàng. Mỗi màu trong mô hình CMY có đặc tính độ mờ (lượng mực), được đo bằng phần trăm. Nhưng ngoài ba màu được liệt kê, mẫu CMYK còn sử dụng màu đen.

Tất cả các mô hình màu ở trên đều phụ thuộc vào phần cứng, nghĩa là nếu bạn đặt màu của phần tử HTML bằng mô hình RGB hoặc HSL, thì không thể nói chắc chắn sắc thái màu chính xác mà khách truy cập vào trang web của bạn sẽ nhìn thấy, vì màn hình của tất cả người dùng đều khác nhau và chúng truyền tải màu sắc khác nhau. Cũng lưu ý rằng tất cả các mô hình trên đều dựa trên mô hình RGB và bất kỳ màu nào được chỉ định trong bất kỳ mô hình nào (ngoại trừ HSLA và RGBA do có kênh alpha) đều có thể được chuyển đổi thành RGB.

Nếu chúng ta nói về các mô hình chuyển màu độc lập với phần cứng thì đáng chú ý là mô hình LAB. Vì vậy, chúng ta tạm dừng làm việc với màu sắc trong HTML bằng cách làm quen với một số mô hình màu. Lưu ý rằng các trình duyệt chỉ “hiểu” bốn mô hình đầu tiên: HSL, RGB, HSLA và RGBA. Do đó, chúng ta chỉ có thể kiểm soát màu sắc của các phần tử HTML bằng các mô hình này.

Màu sắc của phần tử HTML được hình thành như thế nào: một số tính năng của mô hình RGB

Hãy tìm ra nó màu sắc của phần tử HTML được hình thành như thế nào và với một số tính năng của mô hình RGB. Lưu ý rằng chúng ta sẽ nói về mô hình RGB, cũng như các mô hình khác được sử dụng để thiết kế trang web sau trong các bài viết riêng biệt.

Vì vậy, mô hình RGB là viết tắt của Red, Green, Blue. Mô hình RGB dựa trên nguyên tắc cộng tính. Nguyên tắc này là để có được bất kỳ màu nào, màu được thêm vào màu đen. Để hiểu rõ hơn, hãy tưởng tượng rằng màn hình của bạn là một bức tường màu đen và bạn có ba đèn chiếu: đèn đầu tiên tỏa sáng màu đỏ, đèn thứ hai tỏa sáng màu xanh lá cây và đèn thứ ba tỏa sáng màu xanh lam. Bạn có thể điều chỉnh độ sáng của từng đèn chiếu bằng thước đo có số từ 0 đến 255. Theo đó, nếu bạn đặt đèn chiếu về 0, đèn sẽ tắt và không sáng, nếu giá trị là 255 thì đèn chiếu sẽ cho màu sáng nhất có thể. .

Vì vậy, hóa ra là nếu bạn chiếu đèn màu đỏ và xanh lục vào cùng một điểm, thì bạn sẽ nhận thấy một điểm màu vàng trên bức tường đen. Nếu kết hợp màu đỏ và xanh lam, bạn sẽ có màu tím, còn nếu kết hợp xanh lá cây và xanh lam, điểm sáng trên bức tường đen sẽ có màu Lục lam, nhưng nếu bạn hướng cả ba đèn chiếu vào một điểm thì điểm sáng sẽ có màu trắng.

Nguyên tắc được mô tả ở trên làm nền tảng cho mô hình RGB và được sử dụng để thao tác màu sắc trong các phần tử HTML trên một trang trong trình duyệt.

Thuộc tính HTML để thay đổi màu của phần tử: màu nền của phần tử và màu của văn bản bên trong phần tử

Được sử dụng để làm cho các thành phần trang trở nên độc đáo. Sử dụng thuộc tính HTML, chúng ta có thể thao tác màu sắc của các phần tử:

  1. Màu thuộc tính HTML. Thuộc tính này cho phép bạn thay đổi màu sắc của văn bản bên trong phần tử HTML. Thuộc tính có thể lấy các giá trị ở dạng tên màu HTML và mã mô hình RGB theo ký hiệu thập lục phân và thập phân. Thuộc tính màu là thuộc tính HTML duy nhất cho phép bạn thay đổi màu văn bản bên trong một số thành phần HTML.
  2. Thuộc tính văn bản HTML. Thuộc tính này là thuộc tính thẻ duy nhất . Nhãn cùng với thẻ Và hình thức . Nếu bạn còn nhớ, bên trong thùng chứa các phần tử được đặt sau đó được trình duyệt hiển thị trong khu vực xem. Thuộc tính văn bản cho phép bạn chỉ định Màu văn bản mặc định cho toàn bộ trang HTML.
  3. Thuộc tính HTML bgcolor. Nó cũng là một thuộc tính HTML duy nhất và cho phép bạn thay đổi màu nền của một số thành phần HTML.
  4. Thuộc tính HTML vlink. Thuộc tính này là duy nhất và chỉ áp dụng cho thẻ để thay đổi màu của liên kết mà người dùng đã truy cập.
  5. Liên kết thuộc tính HTML. Thuộc tính này cũng là duy nhất và chỉ áp dụng cho thẻ . Thuộc tính alink thay đổi màu của liên kết HTML đang hoạt động.
  6. Thuộc tính liên kết HTML. Thuộc tính liên kết chỉ được sử dụng cùng với thẻ và dùng để thay đổi màu sắc của các liên kết trang HTML mà người dùng chưa truy cập.

Xin lưu ý: không nên sử dụng các thuộc tính để thay đổi màu của các thành phần HTML vì có các biểu định kiểu xếp tầng cho phép bạn tách thiết kế của trang web khỏi nội dung của nó.

Sử dụng mã màu thập phân trong HTML

Vì vậy, chúng ta đã nói về thực tế là bạn có thể đặt độ sáng của màu của đèn sân khấu bằng cách sử dụng thước đặc biệt có các hình vẽ được đánh số từ 0 đến 255. Bây giờ hãy xem điều này sẽ giúp chúng ta thay đổi màu của các phần tử HTML như thế nào. Vấn đề là chúng ta có thể thay đổi màu văn bản bên trong phần tử HTML hoặc màu nền trong HTML bằng mã thập phân như sau:

Nếu bạn tạo một tài liệu HTML trong đó phần chứa nội dung được mô tả, như trong ví dụ, bạn sẽ thấy:

  1. Màu nền của tài liệu HTML bây giờ là màu xanh lục: bgcolor=”rgb (0,255,0)”.
  2. Màu văn bản của trang HTML sẽ chuyển sang màu xanh lam: text=”rgb (0,0,255)”.
  3. Màu HTML của liên kết mà người dùng chưa truy cập sẽ có màu trắng: link=”rgb (255,255,255)”.
  4. Màu của liên kết hiện đang mở sẽ là màu đen: alink=”rgb (0,0,0)”.
  5. Và màu của liên kết HTML đã truy cập sẽ có màu đỏ: vlink=”rgb (255,0,0)”.

Xin lưu ý: không ai cấm bạn điều chỉnh “công suất đèn pha” theo ý mình, bạn có thể đặt màu HTML, ví dụ: theo cách này:

rgb(94, 85, 50)

Và nhận được màu sắc ngạc nhiên trẻ con. Đây chính là điểm đặc biệt, linh hoạt và tiện lợi của mô hình RGB. Màn hình của bạn là một bức tường đen với các đèn chiếu sáng trên đó và bạn có thể điều chỉnh công suất của các đèn chiếu này cũng như tạo tất cả các loại màu nền, văn bản và liên kết bằng cách sử dụng các thuộc tính HTML trong hệ thống ký hiệu thập phân hoặc bạn cũng có thể nói: sử dụng mã màu thập phân.

Trong thực tế Thật sai lầm khi nói mã màu thập phân trong HTML, nói thì đúng hơn Mã màu thập phân RGB, vì mô hình này không chỉ được sử dụng để thiết kế các trang web bằng HTML và CSS.

Giá trị màu HTML thập lục phân

Việc đặt màu của các phần tử HTML bằng mã thập phân của mô hình RGB không thuận tiện lắm (và hiện tại, không phải tất cả các trình duyệt đều hỗ trợ phương pháp xử lý màu này), vì bản ghi sẽ không nhỏ gọn nhất; sẽ thuận tiện hơn nhiều khi đặt màu của các phần tử HTML bằng cách sử dụng các giá trị thập lục phân. Trong hình ảnh bên dưới, bạn có thể thấy các giá trị thập phân được chuyển đổi thành thập lục phân như thế nào.

Đối với những người chưa quen với hệ thập lục phân, nên giải thích một chút để các bạn có thể dễ dàng thao tác màu của các phần tử HTML bằng mã mô hình RGB thập lục phân. Thứ nhất, hệ thống số thập phân được đặt tên như vậy vì bất kỳ số nào cũng có thể thu được bằng cách kết hợp mười chữ số (thuật ngữ rất quan trọng: có sự khác biệt giữa một số và một chữ số): 0, 1, 2, 3, 5, 6, 7, 8, 9.

Trong hệ thập lục phân, bất kỳ số nào cũng có thể được viết bằng cách sử dụng kết hợp mười sáu chữ số: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Để dễ hiểu, bạn có thể giả sử a là mười và f là mười lăm. Ví dụ, số mười sáu sẽ được viết dưới dạng thập lục phân như sau: 10. Và số 255 sẽ được viết là ff.

Bây giờ hãy xem chúng ta có thể làm thế nào đặt màu của các phần tử HTML bằng giá trị thập lục phân, hãy lặp lại ví dụ trước của chúng ta, thay thế mã màu thập phân bằng mã thập lục phân tương ứng của chúng:

< body alink = ”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”>

Ghi chú: viết màu trong HTML ở định dạng thập lục phân có phần gọn hơn hơn ở số thập phân, đó là số đầu tiên. Thứ hai: công suất của mỗi đèn chiếu được đặt theo số từ 0 đến 255. Để viết số 255 cần có hai chữ số ở định dạng thập lục phân (ff = 250), do đó độ sáng của từng kênh màu (đèn chiếu sáng của chúng tôi được gọi chính xác là kênh màu, kênh màu) được đặt bằng hai chữ số từ 0 đến f.

Xin lưu ý: độ sáng của từng kênh màu được đặt riêng, nhưng nếu chúng ta tưởng tượng rằng đây là một số duy nhất thì số tối đa có thể có trong hệ thống số thập lục phân của mô hình RGB là ffffff, nó sẽ cho chúng ta màu trắng và trong hệ thập phân là: 16.777.215. Số lượng màu sắc và sắc thái này cho phép bạn thiết lập/sử dụng mô hình RGB. Con số này xuất phát từ việc mỗi kênh màu có 256 giá trị độ sáng (từ 0 đến 255), lần lượt là: 256 * 256 * 256 = 16.777.215.

Các giá trị màu HTML thập lục phân gọn hơn và rõ ràng hơn, hầu hết các nhà thiết kế web và thiết kế bố cục đều sử dụng giá trị thập lục phân để thao tác màu trong HTML, vì vậy chúng tôi khuyên bạn không nên làm quen với dạng thập phân của ký hiệu màu mà hãy sử dụng ngay hệ thập lục phân.

Rõ ràng là lúc đầu, một nhà thiết kế hoặc nhà thiết kế bố cục mới làm quen sẽ khó điều hướng dạng thập lục phân của ký hiệu màu, vì vậy hầu như bất kỳ trình soạn thảo đồ họa nào cũng có cái gọi là bảng màu, cho phép bạn chọn màu mong muốn và nhận được màu đó. mã cho các mô hình màu khác nhau trong các hệ thống số khác nhau.

Một số trình soạn thảo văn bản, chẳng hạn như , có phần mở rộng bảng màu rất tiện dụng khi bạn muốn chọn nhanh một màu và thay đổi nó. Tôi không thể nói bất cứ điều gì về vấn đề này.

Tên màu trong HTML

Thuộc tính HTML có thể lấy làm giá trị không chỉ mã thập phân và giá trị thập lục phân, mà còn có những tên hoa đặc biệt. Thay đổi màu của các thành phần HTML bằng tên của nó không phải là một ý tưởng hay. Thứ nhất, đằng sau tên màu trong HTML là mã mô hình RGB và thứ hai, mỗi trình duyệt hiển thị màu của thành phần HTML được chỉ định bởi tên khác nhau, điều đó chỉ phụ thuộc vào mong muốn của các nhà phát triển trình duyệt.

Đó là lý do tại sao không nên sử dụng tên màu trong HTML. Kiểu RGB phụ thuộc vào phần cứng và màu được chỉ định theo tên tùy thuộc vào trình duyệt và thậm chí cả phiên bản của nó. Hãy thử đặt màu của các thành phần trang HTML bằng tên:

< body alink = ”black ”link = ”#white” vlink=”đỏ” bgcolor=”xanh” text=”xanh”>

Như bạn hiểu, có rất nhiều màu sắc và sắc thái. Điều đáng lưu ý ở đây là các thuộc tính HTML không cho phép bạn đặt độ dốc; CSS có tùy chọn này, nhưng chúng ta sẽ nói về điều đó trong một bài đăng khác. Và nhiều màu trong HTML đều có tên. Bạn có thể tìm thấy bảng tên màu trong HTML và mã RGB của chúng trên trang web của tôi.

Bảng trên cho thấy phần tử HTML sẽ có màu gì nếu bạn chỉ định nó bằng tên. Bảng này chứa 16 màu và tên của chúng đã được W3C phê duyệt và phải được hiển thị giống nhau trong mọi trình duyệt. Nhưng trên thực tế, trong HTML, bạn có thể sử dụng khoảng 200 tên màu được hỗ trợ bởi các trình duyệt chính, chẳng hạn như: Opera, Chrome, Firefox, Safari, Internet Explorer (tuyên bố này gây nhiều tranh cãi về sau).

Bảng màu HTML

Trong thực tế không có bảng màu trong HTML. Chúng ta hãy nhớ định nghĩa của bảng từ. Bảng màu là một tấm bảng mỏng nhỏ có hình tứ giác hoặc hình bầu dục, trên đó người nghệ sĩ trộn sơn và thu được đủ loại màu sắc. Đôi khi một lỗ được tạo ra trên bảng màu cho ngón tay cái để cầm thoải mái. Bạn sẽ tìm thấy hình ảnh của bảng màu bên dưới. Đó là lý do tại sao không có bảng màu trong HTML.

Nhưng trong nhiều trình soạn thảo văn bản khác nhau có plugin bảng màu sự giúp đỡ đó chọn nhanh màu của phần tử HTML. Ngoài ra còn có một bảng màu trong các trình soạn thảo đồ họa, vì nó không thuận tiện và thú vị cho người thiết kế ngồi tính toán: màu nào sẽ xuất hiện ở độ sáng này hoặc độ sáng kia của kênh này hoặc kênh kia. Trong hình bên dưới, bạn có thể thấy bảng màu đơn giản nhất của trình soạn thảo Paint.

Lưu ý rằng nhiều mô-đun và plugin bảng màu cho phép bạn lấy mã màu không chỉ ở định dạng RGB/RGBA mà còn ở định dạng của các kiểu máy khác. Nhớ rằng không có bảng màu trong HTMLồ, trừ khi bạn là một nghệ sĩ tận tâm và bạn gọi bảng màu của trang HTML là những màu đóđược sử dụng để trang trí nó (xét cho cùng, đôi khi bảng màu đề cập đến những màu mà một nghệ sĩ cụ thể sử dụng hoặc những màu được sử dụng để tạo ra một bức tranh cụ thể).

Học cách thay đổi màu văn bản trong HTML

Chúng tôi có rất nhiều lý thuyết về màu sắc trong HTML, hãy bắt tay vào luyện tập và thử sức làm việc với màu sắc của các phần tử HTML. Điều đầu tiên chúng ta sẽ học làm là thay đổi màu văn bản trong tài liệu HTML sử dụng các thuộc tính và thẻ đặc biệt. Mở bất kỳ trình soạn thảo nào và viết đoạn mã sau vào đó:

Thay đổi màu văn bản trong tài liệu HTML

Học cách làm việc với màu sắc trong HTML

Thay đổi màu văn bản

Để thay đổi màu của văn bản, chúng ta có thể sử dụng thuộc tính duy nhất của thành phần văn bản BODY và ​​cũng có thể sử dụng thành phần FONT và thuộc tính màu của nó. Văn bản này sẽ có màu xám.

< ! DOCTYPE html >

< html lang = "ru-RU" >

< head >

< meta charset = "UTF-8" >

< title >Thay đổi màu văn bản trong tài liệu HTML< / title >

< link rel = "stylesheet" type = "text/css" href = "style.css" / >

< / head >

< body text = "#ff0000" >

< h1 > < font color = "rgb(0,255,0)" >Học cách làm việc với màu sắc trong HTML< / font > < / h1 >

< h2 > < font color = "yellow" >Thay đổi màu văn bản< / font > < / h2 >

< p >Để thay đổi màu văn bản, chúng ta có thể sử dụng một màu duy nhất

thuộc tính văn bản BODY của phần tử và cũng sử dụng phần tử FONT

< / body >

< / html >

Tôi sẽ lưu file này dưới dạng color.html và khuyên bạn đừng quên . Ghi màu trong hệ thống số thập phân không được Chrome, Firefox và Opera hỗ trợ, nhưng IE hiểu ký hiệu màu này và đánh dấu tiêu đề HTML bằng màu xanh lục:

Điều đúng cần nói không phải là thay đổi màu văn bản trong HTML mà là thay đổi màu phông chữ trong HTML. Về