Mã màu là vàng-xanh. Màu sắc trong kiểu có thể được chỉ định theo nhiều cách khác nhau: theo giá trị thập lục phân, theo tên, ở định dạng RGB, RGBA, HSL, HSLA. Có một số cách để thể hiện màu sắc trong thiết kế web.
Trang này chứa một bảng với các từ khóa có thể được sử dụng để biểu thị màu sắc trong các ngôn ngữ dành cho nhà phát triển Web như: HTML, CSS, JavaScript, Flash, v.v.
Trong các thông số kỹ thuật cũ cho mối quan tâm của WC3, chỉ có 16 từ khóa được chỉ định, với sự trợ giúp của màu sắc được đặt trong HTML và CSS. Ngoài ra, các thông số kỹ thuật hiện đại hơn, 130 từ khóa khác đã được thêm vào để chỉ tên màu. Bảng sau chứa tên màu cũng như mã hex và RGB mà chúng tương ứng.
Theo quy tắc CSS, tên màu không phân biệt chữ hoa chữ thường. Các mục màu IndianRed và indianred là tương đương.
Điều đáng chú ý là trong số 146 từ khóa trong bảng, thực tế có ít màu hơn trong đó. Điều này là do một số từ khóa đề cập đến cùng một màu. Do đó, tên Gray và Grey đại diện cho mã màu xám 50% #808080 và từ Magenta là từ đồng nghĩa với màu Fuchsia trong HTML, tương ứng với mã thập lục phân #FF00FF. Cũng đồng nghĩa với các từ Aqua và Cyan, chúng tương ứng với mã #00FFFF.
|
|
Các giá trị chi tiết của mô-đun màu CSS cho phép tác giả xác định màu sắc và độ mờ của các phần tử html, cũng như các giá trị của thuộc tính màu.
thuộc tính màu sắc
1. Màu ưu tiên: thuộc tính màu
Thuộc tính chỉ định màu phông chữ bằng cách sử dụng các hệ thống hiển thị màu khác nhau. Thuộc tính mô tả màu sắc của nội dung văn bản của phần tử. Ngoài ra, nó được sử dụng để cung cấp giá trị gián tiếp tiềm năng (currentColor) cho bất kỳ thuộc tính nào khác chấp nhận giá trị màu.
Tài sản được thừa kế.
2. Giá trị màu
2.1. Từ khóa chính
Danh sách từ khóa chính bao gồm các ý nghĩa sau:
Tên | HEX | RGB | Màu sắc |
---|---|---|---|
đen | #000000 | 0,0,0 | |
bạc | #C0C0C0 | 192,192,192 | |
xám | #808080 | 128,128,128 | |
trắng | #FFFFFF | 255,255,255 | |
Bỏ rơi | #800000 | 128,0,0 | |
màu đỏ | #FF0000 | 255,0,0 | |
màu tím | #800080 | 128,0,128 | |
hoa vân anh | #FF00FF | 255,0,255 | |
màu xanh lá | #008000 | 0,128,0 | |
chanh xanh | #00FF00 | 0,255,0 | |
Ôliu | #808000 | 128,128,0 | |
màu vàng | #FFFF00 | 255,255,0 | |
Hải quân | #000080 | 0,0,128 | |
màu xanh da trời | #0000FF | 0,0,255 | |
màu xanh mòng két | #008080 | 0,128,128 | |
nước | #00FFFF | 0,255,255 |
Tên màu không phân biệt chữ hoa chữ thường.
Cú pháp
Màu xanh;
2.2. Giá trị màu số
2.2.1. Màu sắc mô hình RGB
Định dạng thập lục phân của giá trị RGB là dấu # theo sau là ba hoặc sáu ký tự thập lục phân. Ký hiệu RGB gồm ba chữ số #rgb được chuyển đổi thành dạng sáu chữ số #rrggbb bằng cách sao chép các chữ số thay vì thêm số không. Ví dụ: #fb0 mở rộng thành #ffbb00 . Điều này đảm bảo rằng #ffffff màu trắng có thể được chỉ định trong mục nhập #fff ngắn và loại bỏ mọi phụ thuộc vào độ sâu màu hiển thị.
Định dạng của giá trị RGB trong ký hiệu hàm là rgb(theo sau là danh sách ba giá trị số được phân tách bằng dấu phẩy (ba giá trị số nguyên hoặc ba giá trị phần trăm) theo sau là ký hiệu). Giá trị số nguyên 255 tương ứng với 100% và F hoặc FF theo ký hiệu thập lục phân:
Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF
Ký tự khoảng trắng được phép xung quanh các giá trị số.
Có một số cách để thể hiện màu sắc trong thiết kế web.
HEX là hệ thập lục phân để biểu thị màu sắc trong cơ số 16. Đối với hệ thống này, các chữ số thập phân Ả Rập từ 0 đến 9 và các chữ cái Latinh từ A đến F được sử dụng để bổ sung cho số kỹ thuật số đến 16. Đối với thiết kế web, 16 màu chính (chính) được sử dụng, cái gọi là mã màu thập lục phân #RRGGBB, trong đó mỗi cặp chịu trách nhiệm về phần màu của nó: RR – đỏ, GG – xanh lục và BB – xanh lam. Mỗi phần màu nằm trong khoảng từ 00 đến FF.
Hai cách thể hiện màu sắc khác trong thiết kế web là: ở dạng RGB(*,*,*), trong đó mỗi phần “*” của một màu được biểu thị bằng các chữ số thập phân từ 0 đến 255 và theo tên màu bằng tiếng Anh.
Khi tạo hình ảnh màu, vấn đề chính là tái tạo chính xác màu sắc trên các loại máy tính, màn hình và trình duyệt khác nhau. Nếu trình duyệt không thể hiển thị màu chính xác, trình duyệt sẽ chọn một màu tương tự hoặc trộn nhiều màu. Và đôi khi nó có thể được thay thế bằng một số màu hoàn toàn khác.
Bàn 16 màu cơ bản, được sử dụng trong tất cả các trình duyệt
Tên | Màu sắc | lục giác | (RGB) |
Aqua (sóng biển) | #00FFFF | (000,255,255) | |
Đen | #000000 | (000,000,000) | |
Màu xanh da trời | #0000FF | (000,000,255) | |
Fuchsia (đỏ tươi) | #FF00FF | (255,000,255) | |
Xám | #808080 | (128,128,128) | |
Màu xanh lá | #008000 | (000,128,000) | |
Vôi (xanh tươi) | #00FF00 | (000,255,000) | |
Maroon (đỏ tía đậm) | #800000 | (128,000,000) | |
Hải quân (xanh đậm) | #000080 | (000,000,128) | |
Ôliu | #808000 | (128,128,000) | |
Màu tím | #800080 | (128,000,128) | |
Màu đỏ | #FF0000 | (255,000,000) | |
Bạc | #C0C0C0 | (192,192,192) | |
Teal (xám-xanh) | #008080 | (000,128,128) | |
Trắng | #FFFFFF | (255,255,255) | |
Màu vàng | #FFFF00 | (255,255,000) |
Bàn màu tím màu sắc và sắc thái của nó
Tên | Màu sắc | lục giác | (RGB) |
Màu đỏ tươi (màu đỏ tươi) | #FFCBDB | (255,203,219) | |
Màu đỏ tươi (màu đỏ tươi) | #FF0099 | (255,000,153) | |
Màu đỏ tươi (màu đỏ tươi) | #F95A61 | (249,090,097) | |
Màu hoa vân anh (fuchsia) | #FF00FF | (255,000,255) | |
Màu hoa cà (aniline tím) | #EF0097 | (239,000,151) | |
Hồng cá hồi (hồng cam) | #FF91A4 | (255,145,164) | |
Cenise (màu tím) | #DE3163 | (153,149,140) | |
Cà Tím Cà Tím (cà tím) | #990066 | (153,000,132) | |
Má hồng oải hương (hồng oải hương) |   #FFF0F5 | (255,240,245) | |
Tử đinh hương (tử đinh hương) | #C8A2C8 | (200,162,200) | |
Màu đỏ tươi (màu đỏ tươi) | #FF008F | (255,000,143) | |
Hoa Lan (hoa lan) | #DA70D6 | (218,112,214) | |
Đỏ-tím (tím-đỏ) | #C71585 | (199,021,133) | |
lạc quan (sanguine) | #92000A | (146,000,010) | |
Cây kế (màu tím) | #D8BFD8 | (185,211,238) | |
Cà tím tím (một chút màu tím) | #991199 | (153,017,153) | |
Rosa vivo (hồng đậm) | #FF007F | (255,000,127) | |
Hoa hồng oải hương (một màu tím) | #FBA0E3 | (108,123,139) | |
Mountbatten màu hồng | #997ABD | (153,122,141) |
Bàn xám màu sắc và sắc thái của nó
Tên | Màu sắc | lục giác | (RGB) |
Xám | #808080 | (128,128,128) | |
Xám | #bebebe | (190,190,190) | |
(Màu xám) | #858585 | (133,133,133) | |
Gray33 | #545454 | (084,084,084) | |
(đá xám) | #708090 | (112,128,144) | |
(Thạch anh) | #99958с | (153,149,140) | |
(Xám nhạt) | #bbbbbb | (187,187,187) | |
(Bạc) | #c0c0c0 | (192,192,192) | |
(Xám trắng) | #f0f0f0 | (240,240,240) | |
(Râu của Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
LightGray (Xám nhạt) | #d3d3d3 | (211,211,211) | |
LightStateGray() | #778899 | (119,136,153) | |
StateGray-1 (Xanh hoa ngô nhạt1) | #c6e2ff | (198,226,255) | |
StateGray-2 (Xanh hoa ngô nhạt2) | #b9d3ee | (185,211,238) | |
StateGray3() | #9fb6cd | (159,182,205) | |
StateGray4() | #6c7b8b | (108,123,139) |
Màu HTML được biểu thị bằng sáu ký tự sau ký tự gạch chéo - ví dụ: #000000. Sáu biểu tượng này đại diện cho tỷ lệ của các màu khác nhau (Đỏ, Xanh lục, Xanh lam) trong màu cuối cùng. Trên màn hình máy tính của bạn, hình ảnh được hình thành từ một số lượng lớn các điểm gọi là pixel. Mỗi pixel là một nguồn sáng nhỏ, hãy gọi nó là "đèn pin", lần lượt bao gồm ba đèn pin - đỏ, lục và lam. Bằng cách giảm hoặc tăng cường độ ánh sáng của từng đèn pin màu, chúng ta sẽ thu được màu mong muốn.
Mã màu HTML
Màu sắc trong HTML được biểu thị bằng ký hiệu thập lục phân (HEX) của màu đỏ, xanh lam và xanh lục (RGB).
Giá trị màu nhỏ nhất là 0 (thập lục phân 00). Giá trị màu cao nhất là 255 (hex FF).
Giá trị màu thập lục phân là ba chữ số bắt đầu bằng dấu #.
Mã màu (ý nghĩa)
Màu sắc | mã HEX | Mã RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
16 triệu sắc thái
Kết hợp màu đỏ, xanh lam và xanh lục với các giá trị nằm trong khoảng từ 0 đến 255 cho tỷ lệ phần trăm của mỗi màu sẽ tạo ra tổng cộng hơn 16 triệu sắc thái (256 x 256 x 256).
Hầu hết các màn hình hiện đại đều có khả năng hiển thị ít nhất 16.384 sắc thái khác nhau (màn hình LCD nói chung có khả năng hiển thị 262 nghìn 16 triệu (cập nhật tháng 10 năm 2013) màu sắc và màn hình CRT có thể hiển thị số lượng màu gần như không giới hạn).
Bảng màu bên dưới thể hiện sự thay đổi tỷ lệ của màu đỏ từ 0 đến 255 với giá trị 0 cho màu xanh lam và xanh lục:
Màu đỏ | mã HEX | Mã RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Sắc thái của màu xám
Để có được sắc thái của màu xám, người ta sử dụng tỷ lệ bằng nhau của tất cả các màu. Để giúp bạn dễ dàng chọn màu phù hợp hơn, chúng tôi cung cấp cho bạn mã màu xám
Sắc thái của màu xám | mã HEX | Mã RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128,128,128) | |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
#C0C0C0 | rgb(192,192,192) | |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
#D8D8D8 | rgb(216,216,216) | |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
#F8F8F8 | rgb(248,248,248) | |
#FFFFFF | rgb(255,255,255) |
Tên màu html trên nhiều trình duyệt (tất cả các trình duyệt)
Bộ sưu tập gồm 150 tên màu trong html, được hỗ trợ trên tất cả các trình duyệt.
Tên màu tiêu chuẩn
W3C liệt kê 16 tên màu hợp lệ cho HTML và CSS: aqua, black, blue, fuchsia, grey, green, Lime, maroon (chestnut), navy (ultramarine), olive (olive), purple (purple), red (red) , bạc (bạc), mòng két (xám), trắng (trắng) và vàng (vàng).
Khi sử dụng các màu không có trong danh sách này, sẽ chính xác hơn nếu sử dụng mã thập lục phân (HEX) hoặc mã RGB của chúng.
Màu sắc an toàn
Cách đây vài năm, khi máy tính có thể hỗ trợ tối đa 256 màu khác nhau, một danh sách 216 "Màu an toàn cho web" đã được đề xuất, trong đó 40 màu dành riêng cho hệ thống.
Bảng màu 216 màu này được tạo ra để hiển thị chính xác các màu ở chế độ bảng màu 256 màu.
Bây giờ điều này không thành vấn đề vì hầu hết các máy tính trên thế giới đều hỗ trợ hàng triệu sắc thái màu. Trong mọi trường hợp, đây là danh sách các màu này:
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 |