Thực đơn
trang chủWindows 7

Màu xanh trong css. 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

>>Quản lý màu sắc

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

Các phương pháp mô tả và xử lý màu sắc khác nhau về mục đích thể hiện cuối cùng. Ví dụ, chúng ta hãy so sánh cách thể hiện màu sắc trong in ấn và màn hình máy tính. Trong trường hợp đầu tiên, cơ sở được lấy trắng màu của giấy sau đó áp dụng ba màu cơ bản: màu xanh da trời, màu tím Và màu vàng. Trộn lẫn với nhau và với màu trắng của giấy theo các tỷ lệ khác nhau, ba màu cơ bản này cho ra các sắc thái màu khác nhau, ngoại trừ màu đen tuyền hoặc nếu hoàn toàn không có sơn thì chúng sẽ cho ra giấy trắng. Nếu chúng ta thêm màu đen cho chúng, chúng ta sẽ nhận được CMYK-một phương pháp truyền màu khi thu được màu cần thiết bằng cách trừ các màu còn thiếu khỏi màu trắng.

Trong trường hợp thứ hai, căn cứ được lấy đen màu của màn hình điều khiển, mỗi ô trong đó phát sáng theo một trong ba màu: màu đỏ-màu đỏ, màu xanh lá-màu xanh lá cây và màu xanh da trời-màu xanh da trời. Sau đó, trong trường hợp hoàn toàn không có bất kỳ ánh sáng nào, chúng ta sẽ có một màu màn hình đen thuần túy và bất kỳ màu nào được yêu cầu đều được tính theo tỷ lệ của từng màu trong số ba màu. Trong trường hợp này chúng ta sẽ nhận được RGB-Phương pháp truyền màu. Màu cơ bản có thể dao động từ 0 trước 255 , hoặc từ 0% trước 100% hoặc có thể được biểu diễn dưới dạng giá trị thập lục phân. Trong hình bên dưới, bạn có thể thấy kết quả của việc trộn các màu cơ bản.

Hệ thống số thập lục phân, không giống như hệ thống số thập phân, không có mười chữ số mà có mười sáu - do đó có tên như vậy. Theo đó, chỉ có thể có các biến thể không lặp lại của sự kết hợp hai chữ số - 256 , để tiếp tục chuỗi số sau 9 những lá thư từ MỘT trước F, do đó, chuỗi sẽ trông như thế này -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Để chuyển đổi số từ hệ thống số này sang hệ thống số khác và ngược lại, hãy sử dụng máy tính bên dưới. Giá trị lớn nhất ở đây có thể là FF - 255 .

Trong trường hợp này, màu được chỉ định bởi ba số thập lục phân, mỗi số bao gồm hai chữ số. Số đầu tiên xác định cường độ màu đỏ màu sắc, trung bình màu xanh lá, thứ cuối cùng- màu xanh da trời màu sắc. Tất cả các số có thể nhận các giá trị trong phạm vi từ 00 trước FF(từ 0 đến 255). Ví dụ: màu xanh lá cây được cho là #00FF00, màu đỏ giống như #FF0000, màu xanh - giống như #0000FF, màu trắng - giống như #FFFFFF, sự vắng mặt hoàn toàn của màu sắc hoặc màu đen được đưa ra là #000000 .

Trong biểu mẫu bên dưới, bạn có thể chỉ định bất kỳ giá trị thập lục phân nào cho từng màu trong số ba màu và xem kết quả trộn chúng bằng cách nhấp vào trường đầu ra.

MÀU ĐỎMÀU XANH LÁMÀU XANH DA TRỜI
0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f
...bấm vào đây

Ví dụ về một số giá trị màu RGB thập lục phân: chuyển màu đỏ, xanh lam và xanh lục.

xem mã số xem mã số xem mã số xem mã số xem mã số xem mã số
#010000 #800000 #000100 #008000 #000001 #000080
#100000 #900000 #001000 #009000 #000010 #000090
#200000 #A00000 #002000 #00A000 #000020 #0000A0
#300000 #B00000 #003000 #00B000 #000030 #0000B0
#400000 #C00000 #004000 #00C000 #000040 #0000C0
#500000 #D00000 #005000 #00D000 #000050 #0000D0
#600000 #E00000 #006000 #00E000 #000060 #0000E0
#700000 #FF0000 #007000 #00FF00 #000070 #0000FF

Chỉ định màu bằng cách sử dụng chuỗi ký tự

Để dễ sử dụng, một số màu và sự kết hợp của chúng đã được gán tên được tất cả các trình duyệt nhận dạng và có thể đặt nhiều màu trong số chúng theo tên. Bảng dưới đây hiển thị một số tên màu:

xem Tên xem Tên xem Tên xem Tên
Trắng Màu đỏ Quả cam Màu vàng
Màu xanh lá Màu xanh da trời Màu tím Đen
Aliceblue đồ cổ màu trắng Thủy Aquamarine
Azure Be bánh quy Blanchedalmond
màu xanh tím Màu nâu Gỗ lớn Xanh chói
Biểu đồ Sô cô la San hô Màu xanh hoa ngô đồng
Râu ngô màu đỏ thẫm lục lam Xanh đậm
màu lục lam đậm Darkgoldenrod Màu xám đen Màu xanh lá cây đậm
Vải kaki màu thẫm màu đỏ tươi ô liu xanh Màu cam đậm
Darkorchid Đỏ sẫm cá hồi đen màu xanh nước biển đậm
Darkslateblue Darkslategray màu ngọc lam tối Màu tím đậm
Màu hồng đậm Bầu trời xanh thẳm Dimray Dodgerblue
Gạch lửa hoa trắng Rừng xanh hoa fuschia
Gainsboro ma trắng Vàng Goldenrod
Xám màu vàng xanh mật ngọt hotpink
màu đỏ Ấn Độ xanh đậm Ngà voi kaki
Hoa oải hương má hồng oải hương chanh chiffon Màu xanh nhạt
ánh sáng san hô Ánh sáng lục lam ánh sánglạnhrodmàu vàng Màu xanh lợt
Xám nhạt Màu hồng nhạt cá hồi ánh sáng Ánh sáng xanh biển
Ánh sáng xanh ánh sángmàu xám Ánh sáng thép xanh Màu vàng nhạt
Chanh xanh chanh xanh Lanh Màu đỏ tươi
Bỏ rơi Aquamarine trung bình Xanh nhẹ hoa lan trung bình
màu tím vừa Màu xanh biển trung bình Trung bìnhđá phiến màu xanh trung bình
màu ngọc lam trung bình Màu tím trung bình Màu xanh nửa đêm kem bạc hà
hoa tầm gửi người da trắng Navajo Hải quân dây buộc cổ
Ôliu Oliverab Màu đỏ cam phong lan
Palegoldenrod Xanh nhạt màu ngọc lam màu tím nhạt
đu đủ Đào Peru Hồng
Mận màu xanh bột Màu nâu hồng Xanh đậm
Yên xe màu nâu Màu xanh biển Vỏ sò Sienna
Bạc Trời xanh Màu xanh đá phiến Phiến đá xám
Tuyết Xuân xanh Màu xanh thép Tân
màu xanh mòng két Cây kế Cà chua màu ngọc lam
màu tím Lúa mì Khói trắng màu vàng xanh
Danh sách các chữ thường có tên màu khá phong phú và quá đủ. Nếu bạn cần đặt màu nền khác thường đến mức thậm chí không có tên, bạn có thể sử dụng giá trị thập lục phân.

Sử dụng bảng màu an toàn

Thật không may, trên các nền tảng khác nhau, với các cài đặt hệ thống khác nhau, việc tái tạo màu sắc chính xác là một vấn đề. Vấn đề là trình duyệt luôn cố gắng điều chỉnh bảng màu của tài liệu phù hợp với cài đặt hệ thống và khả năng giám sát, bằng cách trộn màu độc lập và thay thế chúng. Kết quả là đôi khi người dùng không nhìn thấy chính xác những gì quản trị trang web muốn hiển thị cho mình. Một cách thoát khỏi tình huống này đã được tìm ra bằng cách sử dụng bảng màu, mỗi màu trong đó được đảm bảo hiển thị như nhau bởi tất cả các trình duyệt trên các nền tảng khác nhau. Đây là cái gọi là đảm bảo bảng màu, còn được gọi là an toàn bảng màu. Bảng màu này bao gồm các màu có thành phần màu có các giá trị sau: 00 ,33 ,66 ,99 , CC,FF, bằng mọi cách có thể 216 sự kết hợp của họ.

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

Vlad Merzhevich

Trong HTML, màu sắc được chỉ định theo một trong hai cách: sử dụng mã thập lục phân và theo tên của một số màu nhất định. Phương pháp dựa trên hệ thống số thập lục phân được sử dụng chủ yếu vì nó là phương pháp phổ biến nhất.

Màu thập lục phân

HTML sử dụng số thập lục phân để chỉ định màu sắc. 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ó. Các số sẽ như sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Các số từ 10 đến 15 được thay thế bằng chữ cái Latinh. Trong bảng 6.1 cho thấy sự tương ứng giữa số thập phân và số thập lục phân.

Các số lớn hơn 15 trong hệ thập lục phân được hình thành bằng cách kết hợp hai số thành một (Bảng 6.2). Ví dụ: số 255 ở dạng thập phân tương ứng với số FF ở dạng thập lục phân.

Để tránh nhầm lẫn khi xác định hệ thống số, số thập lục phân được đặt trước ký hiệu băm #, ví dụ #aa69cc. Trong trường hợp này, trường hợp nào không quan trọng nên cho phép viết #F0F0F0 hoặc #f0f0f0.

Một màu điển hình được sử dụng trong HTML trông như thế này.

Ở đây màu nền của trang web được đặt thành #FA8E47. Ký hiệu băm # ở phía trước một số có nghĩa là số thập lục phân. Hai chữ số đầu tiên (FA) xác định thành phần màu đỏ của màu, chữ số thứ ba đến thứ tư (8E) xác định thành phần màu xanh lá cây và hai chữ số cuối (47) xác định thành phần màu xanh lam. Kết quả cuối cùng sẽ là màu này.

F.A. + 8E + 47 = FA8E47

Mỗi màu trong số ba màu - đỏ, lục và lam - có thể nhận các giá trị từ 00 đến FF, tạo ra tổng cộng 256 sắc thái. Như vậy, tổng số màu có thể là 256x256x256 = 16.777.216 tổ hợp. Một mô hình màu dựa trên các thành phần màu đỏ, lục và lam được gọi là RGB (đỏ, lục, lam; đỏ, lục, lam). Mô hình này là mô hình phụ gia (từ add - add), trong đó việc cộng cả ba thành phần tạo thành màu trắng.

Để điều hướng màu thập lục phân dễ dàng hơn, hãy tính đến một số quy tắc.

  • Nếu giá trị của các thành phần màu giống nhau (ví dụ: #D6D6D6), thì kết quả sẽ là tông màu xám. Con số càng cao thì màu càng nhạt, với các giá trị nằm trong khoảng từ #000000 (đen) đến #FFFFFF (trắng).
  • Màu đỏ tươi được hình thành nếu thành phần màu đỏ được đặt ở mức tối đa (FF) và các thành phần còn lại được đặt về 0. Màu có giá trị #FF0000 là sắc đỏ đỏ nhất có thể. Điều tương tự cũng đúng với màu xanh lá cây (#00FF00) và xanh lam (#0000FF).
  • Màu vàng (#FFFF00) được tạo ra bằng cách trộn màu đỏ và xanh lá cây. Điều này có thể thấy rõ trên bánh xe màu (Hình 6.1), trong đó trình bày các màu cơ bản (đỏ, lục, lam) và các màu bổ sung hoặc bổ sung. Chúng bao gồm màu vàng, lục lam và tím (còn gọi là màu đỏ tươi). Nói chung, bất kỳ màu nào cũng có thể thu được bằng cách trộn các màu gần với nó. Do đó, màu lục lam (#00FFFF) thu được bằng cách kết hợp màu xanh lam và xanh lục.

Cơm. 6.1. vòng tròn màu

Màu sắc dựa trên giá trị thập lục phân không cần phải được lựa chọn theo kinh nghiệm. Với mục đích này, một trình soạn thảo đồ họa có thể hoạt động với các mô hình màu khác nhau, chẳng hạn như Adobe Photoshop, là phù hợp. Trong bộ lễ phục. Hình 6.2 hiển thị cửa sổ chọn màu trong chương trình này; giá trị thập lục phân thu được của màu hiện tại được viền bằng một đường. Bạn có thể sao chép và dán nó vào mã của mình.

Cơm. 6.2. Cửa sổ chọn màu trong Photoshop

Màu web

Nếu bạn đặt chất lượng hiển thị màu của màn hình thành 8 bit (256 màu), thì cùng một màu có thể được hiển thị khác nhau trong các trình duyệt khác nhau. Điều này là do cách hiển thị đồ họa, khi trình duyệt hoạt động với bảng màu riêng và không thể hiển thị màu không có trong bảng màu của nó. Trong trường hợp này, màu sắc được thay thế bằng sự kết hợp của các pixel khác, gần với nó, các màu bắt chước màu đã cho. Để đảm bảo màu sắc được giữ nguyên trên các trình duyệt khác nhau, một bảng màu được gọi là màu web đã được giới thiệu. Màu web là những màu mà mỗi thành phần - đỏ, lục và lam - được đặt thành một trong sáu giá trị - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Giá trị thập lục phân của thành phần này được chỉ định trong ngoặc. Tổng số màu từ tất cả các kết hợp có thể có là 6x6x6 - 216 màu. Màu web ví dụ là #33FF66.

Đặc điểm chính của màu web là nó xuất hiện giống nhau trên tất cả các trình duyệt. Hiện tại, mức độ liên quan của màu sắc trên web là rất nhỏ do chất lượng màn hình được cải thiện và khả năng mở rộng của chúng.

Màu sắc theo tên

Để tránh phải nhớ một bộ số, bạn có thể sử dụng tên các màu sắc thông dụng để thay thế. Trong bảng 6.3 hiển thị tên các tên màu phổ biến.

Bàn 6.3. Tên một số màu sắc
Tên màu Màu sắc Sự miêu tả Giá trị thập lục phân
đen Đen #000000
màu xanh da trời Màu xanh da trời #0000FF
hoa vân anh Màu tím nhạt #FF00FF
xám Màu xám đen #808080
màu xanh lá Màu xanh lá #008000
chanh xanh Màu xanh lợt #00FF00
Bỏ rơi Đỏ sẫm #800000
Hải quân Xanh đậm #000080
Ôliu Ôliu #808000
màu tím Màu tím đậm #800080
màu đỏ Màu đỏ #FF0000
bạc Xám nhạt #C0C0C0
màu xanh mòng két Xanh lam #008080
trắng Trắng #FFFFFF
màu vàng Màu vàng #FFFF00

Việc bạn chỉ định màu theo tên của nó hay bằng cách sử dụng số thập lục phân không quan trọng. Những phương pháp này có tác dụng như nhau. Ví dụ 6.1 cho thấy cách đặt màu nền và màu văn bản của trang web.

Ví dụ 6.1. Màu nền và văn bản

Màu sắc

Văn bản mẫu

Trong ví dụ này, màu nền được đặt bằng thuộc tính bgcolor của thẻ và màu văn bản thông qua thuộc tính văn bản. Để đa dạng, thuộc tính văn bản được đặt thành số thập lục phân và thuộc tính bgcolor được đặt thành từ khóa dành riêng teal .

Số thập lục phân được sử dụng để chỉ định màu sắc. 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ó. Các số sẽ như sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Các số từ 10 đến 15 được thay thế bằng chữ cái Latinh. Các số lớn hơn 15 trong hệ thập lục phân được hình thành bằng cách kết hợp hai số thành một. Ví dụ: số 255 ở dạng thập phân tương ứng với số FF ở dạng thập lục phân. Để tránh nhầm lẫn khi xác định hệ thống số, ký hiệu băm # được đặt trước số thập lục phân, ví dụ #666999. Mỗi màu trong số ba màu - đỏ, lục và lam - có thể nhận các giá trị từ 00 đến FF. Do đó, ký hiệu màu được chia thành ba thành phần #rrggbb, trong đó hai ký hiệu đầu tiên biểu thị thành phần màu đỏ của màu, hai ký hiệu ở giữa - xanh lục và hai ký hiệu cuối cùng - xanh lam. Được phép sử dụng dạng viết tắt #rgb, trong đó mỗi ký tự phải được nhân đôi. Vì vậy, mục #fe0 nên được coi là #ffee00.

Bằng tên

trình duyệt web IE Trình duyệt Chrome Opera Cuộc đi săn Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Trình duyệt hỗ trợ một số màu theo tên của chúng. Trong bảng 1 hiển thị tên, mã thập lục phân, giá trị RGB, HSL và mô tả.

Bàn 1. Tên màu sắc
Tên Màu sắc Mã số RGB HSL Sự miêu tả
trắng #ffffff hoặc #fff rgb(255,255,255) hsl(0.0%,100%) Trắng
bạc #c0c0c0 rgb(192,192,192) hsl(0.0%,75%) Xám
xám #808080 rgb(128,128,128) hsl(0.0%,50%) Màu xám đen
đen #000000 hoặc #000 rgb(0,0,0) hsl(0.0%,0%) Đen
Bỏ rơi #800000 rgb(128,0,0) hsl(0.100%,25%) Đỏ sẫm
màu đỏ #ff0000 hoặc #f00 rgb(255,0,0) hsl(0,100%,50%) Màu đỏ
quả cam #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Quả cam
màu vàng #ffff00 hoặc #ff0 rgb(255,255,0) hsl(60,100%,50%) Màu vàng
Ôliu #808000 rgb(128,128,0) hsl(60,100%,25%) Ôliu
chanh xanh #00ff00 hoặc #0f0 rgb(0,255,0) hsl(120,100%,50%) Màu xanh lợt
màu xanh lá #008000 rgb(0,128,0) hsl(120,100%,25%) Màu xanh lá
nước #00ffff hoặc #0ff rgb(0,255,255) hsl(180,100%,50%) Màu xanh da trời
màu xanh da trời #0000ff hoặc #00f rgb(0,0,255) hsl(240,100%,50%) Màu xanh da trời
Hải quân #000080 rgb(0,0,128) hsl(240,100%,25%) Xanh đậm
màu xanh mòng két #008080 rgb(0,128,128) hsl(180,100%,25%) Xanh lam
hoa vân anh #ff00ff hoặc #f0f rgb(255,0,255) hsl(300,100%,50%) Hồng
màu tím #800080 rgb(128,0,128) hsl(300,100%,25%) màu tím

Sử dụng RGB

trình duyệt web IE Trình duyệt Chrome Opera Cuộc đi săn Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Bạn có thể xác định màu bằng cách sử dụng các giá trị màu đỏ, xanh lục và xanh lam theo số thập phân. Mỗi thành phần trong số ba thành phần màu có giá trị từ 0 đến 255. Cũng được phép chỉ định màu theo tỷ lệ phần trăm, với 100% tương ứng với số 255. Đầu tiên, chỉ định từ khóa rgb, sau đó chỉ định các thành phần màu trong ngoặc đơn , được phân tách bằng dấu phẩy, ví dụ rgb(255 , 128, 128) hoặc rgb(100%, 50%, 50%).

RGBA

trình duyệt web IE Trình duyệt Chrome Opera Cuộc đi săn Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Định dạng RGBA có cú pháp tương tự như RGB, nhưng bao gồm kênh alpha chỉ định độ trong suốt của phần tử. Giá trị 0 là hoàn toàn trong suốt, 1 là mờ đục và giá trị trung gian như 0,5 là nửa trong suốt.

RGBA đã được thêm vào CSS3, vì vậy mã CSS phải được xác thực theo phiên bản này. Cần lưu ý rằng tiêu chuẩn CSS3 vẫn đang được phát triển và một số tính năng có thể thay đổi. Ví dụ: màu ở định dạng RGB được thêm vào thuộc tính màu nền được xác thực nhưng màu được thêm vào thuộc tính nền không còn hợp lệ. Đồng thời, trình duyệt hiểu khá chính xác màu sắc của cả hai thuộc tính.

HSL

trình duyệt web IE Trình duyệt Chrome Opera Cuộc đi săn Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Tên của định dạng HSL bắt nguồn từ sự kết hợp của các chữ cái đầu tiên Hue (màu sắc), Saturate (độ bão hòa) và Lightness (độ sáng). Hue là giá trị màu trên bánh xe màu (Hình 1) và được tính bằng độ. 0° tương ứng với màu đỏ, 120° tương ứng với màu xanh lá cây và 240° tương ứng với màu xanh lam. Giá trị màu sắc có thể thay đổi từ 0 đến 359.

Cơm. 1. Bánh xe màu

Độ bão hòa là cường độ của màu và được đo bằng phần trăm từ 0% đến 100%. Giá trị 0% biểu thị không có màu và có màu xám, 100% là giá trị tối đa cho độ bão hòa.

Độ sáng chỉ định mức độ sáng của màu và được chỉ định theo tỷ lệ phần trăm từ 0% đến 100%. Giá trị thấp làm cho màu tối hơn và giá trị cao làm cho màu nhạt hơn; giá trị cực trị 0% và 100% tương ứng với màu đen và trắng.

HSLA

trình duyệt web IE Trình duyệt Chrome Opera Cuộc đi săn Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Định dạng HSLA có cú pháp tương tự như HSL, nhưng bao gồm kênh alpha để chỉ định độ trong suốt của phần tử. Giá trị 0 là hoàn toàn trong suốt, 1 là mờ đục và giá trị trung gian như 0,5 là nửa trong suốt.

Các giá trị màu RGBA, HSL và HSLA được thêm vào CSS3, vì vậy vui lòng kiểm tra mã của bạn để biết tính hợp lệ của phiên bản khi sử dụng các định dạng này.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Màu sắc

Cảnh báo

Tất cả các phương pháp bắt sư tử được liệt kê trên trang web đều mang tính lý thuyết và dựa trên phương pháp tính toán. Các tác giả không đảm bảo sự an toàn của bạn khi sử dụng chúng và từ chối mọi trách nhiệm về kết quả. Hãy nhớ rằng, sư tử là kẻ săn mồi và là loài động vật nguy hiểm!

Ơi!

Kết quả của ví dụ này được hiển thị trong Hình. 2.

Cơm. 2. Màu sắc trên trang web

HEX/HTML

Màu HEX không là gì ngoài biểu diễn thập lục phân của RGB.

Màu sắc được biểu diễn dưới dạng ba nhóm chữ số thập lục phân, trong đó mỗi nhóm chịu trách nhiệm về màu riêng của mình: #112233, trong đó 11 là màu đỏ, 22 là màu xanh lá cây, 33 là màu xanh lam. Tất cả các giá trị phải nằm trong khoảng từ 00 đến FF.

Nhiều ứng dụng cho phép ký hiệu màu thập lục phân được rút gọn. Nếu mỗi nhóm trong số ba nhóm chứa các ký tự giống nhau, ví dụ #112233, thì chúng có thể được viết là #123.

  1. h1 (màu: #ff0000; ) /* đỏ */
  2. h2 ( màu: #00ff00; ) /* xanh */
  3. h3 ( màu: #0000ff; ) /* xanh */
  4. h4 ( color: #00f; ) /* cùng màu xanh, viết tắt */

RGB

Không gian màu RGB (Đỏ, Xanh lục, Xanh lam) bao gồm tất cả các màu có thể được tạo ra bằng cách trộn màu đỏ, xanh lục và xanh lam. Mô hình này phổ biến trong nhiếp ảnh, truyền hình và đồ họa máy tính.

Giá trị RGB được chỉ định dưới dạng số nguyên từ 0 đến 255. Ví dụ: rgb(0,0,255) được hiển thị dưới dạng màu xanh lam vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các tham số khác được đặt thành 0.

Một số ứng dụng (đặc biệt là trình duyệt web) hỗ trợ ghi phần trăm giá trị RGB (từ 0% đến 100%).

  1. h1 ( màu: rgb(255, 0, 0); ) /* đỏ */
  2. h2 ( màu: rgb(0, 255, 0); ) /* xanh */
  3. h3 ( màu: rgb(0, 0, 255); ) /* xanh */
  4. h4 ( color: rgb(0%, 0%, 100%); ) /* cùng màu xanh, mục nhập phần trăm */

Giá trị màu RGB được hỗ trợ trong tất cả các trình duyệt chính.

RGBA

Gần đây, các trình duyệt hiện đại đã học cách làm việc với mô hình màu RGBA - một phần mở rộng của RGB có hỗ trợ kênh alpha, xác định độ mờ của đối tượng.

Giá trị màu RGBA được chỉ định là: rgba(red, green, blue, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).

  1. h1 ( color: rgb(0, 0, 255); ) /* xanh lam trong RGB thông thường */
  2. h2 ( color: rgba(0, 0, 255, 1); ) /* cùng màu xanh lam trong RGBA, vì độ mờ: 100% */
  3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* độ mờ: 50% */
  4. h4 ( color: rgba(0, 0, 255, .155); ) /* độ mờ: 15,5% */
  5. h5 ( color: rgba(0, 0, 255, 0); ) /* hoàn toàn trong suốt */

RGBA được hỗ trợ trong IE9+, Firefox 3+, Chrome, Safari và Opera 10+.

HSL

Mô hình màu HSL là sự thể hiện của mô hình RGB trong hệ tọa độ hình trụ. HSL thể hiện màu sắc theo cách trực quan và dễ đọc hơn so với RGB thông thường. Mô hình này thường được sử dụng trong các ứng dụng đồ họa, bảng màu và phân tích hình ảnh.

HSL là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Lightness/Luminance (độ sáng/độ sáng/độ sáng, đừng nhầm lẫn với độ sáng).

Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là tỷ lệ phần trăm của độ sáng (từ 0% đến 100%).

  1. h1 ( màu: hsl(120, 100%, 50%); ) /* xanh */
  2. h2 ( màu: hsl(120, 100%, 75%); ) /* xanh nhạt */
  3. h3 ( màu: hsl(120, 100%, 25%); ) /* xanh đậm */
  4. h4 ( color: hsl(120, 60%, 70%); ) /* xanh nhạt */

HSL được hỗ trợ trong IE9+, Firefox, Chrome, Safari và Opera 10+.

HSLA

Tương tự như RGB/RGBA, HSL có chế độ HSLA hỗ trợ kênh alpha để biểu thị độ mờ của đối tượng.

Giá trị màu HSLA được chỉ định là: hsla(màu sắc, độ bão hòa, độ sáng, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).

  1. h1 ( color: hsl(120, 100%, 50%); ) /* màu xanh lá cây trong HSL bình thường */
  2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* màu xanh lá cây tương tự trong HSLA, vì độ mờ: 100% */
  3. h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* độ mờ: 50% */
  4. h4 ( color: hsla(120, 100%, 50%, .155); ) /* độ mờ: 15,5% */
  5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* hoàn toàn trong suốt */

CMYK

Mô hình màu CMYK thường gắn liền với việc in và in màu. CMYK (không giống như RGB) là một mô hình trừ, nghĩa là giá trị cao hơn gắn liền với màu tối hơn.

Màu sắc được xác định bằng tỷ lệ màu lục lam (Cyan), đỏ tươi (Magenta), vàng (Yellow), có thêm màu đen (Key/blacK).

Mỗi con số xác định một màu trong CMYK đại diện cho phần trăm mực của một màu nhất định tạo nên sự kết hợp màu sắc, hay chính xác hơn là kích thước của điểm màn hình được xuất ra trên máy sắp chữ trên phim có màu đó (hoặc trực tiếp trên tấm in trong trường hợp CTP).

Ví dụ: để có được màu PANTONE 7526, bạn sẽ trộn 9 phần lục lam, 83 phần đỏ tươi, 100 phần vàng và 46 phần đen. Điều này có thể được ký hiệu như sau: (9,83,100,46). Đôi khi các ký hiệu sau được sử dụng: C9M83Y100K46 hoặc (9%, 83%, 100%, 46%) hoặc (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (còn gọi là HSV) cũng tương tự như HSL nhưng là hai mẫu màu khác nhau. Cả hai đều dựa trên hình học hình trụ, nhưng HSB/HSV dựa trên mô hình "hexcone", trong khi HSL dựa trên mô hình "bi-hexcone". Các nghệ sĩ thường thích sử dụng mẫu này hơn, người ta thường chấp nhận rằng thiết bị HSB/HSV gần với cảm nhận màu sắc tự nhiên hơn. Đặc biệt, mô hình màu HSB được sử dụng trong Adobe Photoshop.

HSB/HSV là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Brightness/Value (độ sáng/giá trị).

Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là phần trăm độ sáng (từ 0% đến 100%).

XYZ

Mô hình màu XYZ (CIE 1931 XYZ) là một không gian toán học thuần túy. Không giống như RGB, CMYK và các mô hình khác, trong XYZ các thành phần chính là “tưởng tượng”, nghĩa là bạn không thể kết hợp X, Y và Z với bất kỳ bộ màu nào để trộn. XYZ là mẫu chính cho hầu hết các mẫu màu khác được sử dụng trong lĩnh vực kỹ thuật.

PHÒNG THÍ NGHIỆM

Mô hình màu LAB (CIELAB, “CIE 1976 L*a*b*”) được tính toán từ không gian CIE XYZ. Mục tiêu thiết kế của Lab là tạo ra một không gian màu trong đó các thay đổi màu sắc sẽ tuyến tính hơn theo nhận thức của con người (so với XYZ), nghĩa là, cùng một sự thay đổi về giá trị tọa độ màu ở các vùng khác nhau của không gian màu sẽ tạo ra cảm giác thay đổi màu sắc tương tự.

Nhìn kỹ vào bản vẽ. Nền của cửa sổ thả xuống được làm mờ. Đây là một kỹ thuật thiết kế khá phổ biến. Hãy suy nghĩ về cách thực hiện điều này.

Nhiệm vụ

Làm cho màu trong mờ trên nhiều trình duyệt.

Giải pháp

Ý nghĩ đầu tiên trong tình huống này là sử dụng hình ảnh png24 với độ mờ đặt trước cho nền. Nhưng hình ảnh này là hoàn toàn không cần thiết. Bạn có thể làm tốt mà không cần nó (và do đó không cần yêu cầu thêm tới máy chủ). Chúng ta vẫn cố gắng tìm giải pháp tối ưu.

Ý nghĩ thứ hai là sử dụng . Nhưng trong trường hợp này nó không thuận tiện lắm. Rốt cuộc, không chỉ nền mà cả các dòng chữ cũng sẽ trở nên mờ. Có, trên thực tế, toàn bộ cửa sổ cùng một lúc.

Tất nhiên, bạn có thể thử thêm một vùng chứa bổ sung và chỉ áp dụng độ mờ cho nó, nhưng phần tử HTML này sẽ chỉ nhằm mục đích trang trí và rõ ràng là sẽ dư thừa. Có thể làm mà không có nó?

Tất nhiên bạn có thể! Nếu bạn sử dụng RGBA.

Định dạng mô tả màu RGBA

CSS3 cho phép bạn chỉ định màu bằng các hàm RGB và RGBA. Trong trường hợp này, chúng ta phải chỉ ra tỷ lệ của từng thành phần màu mà một byte được phân bổ (từ 0 đến 255, trong trường hợp ai đó không biết).

Cú pháp cho trường hợp này rất đơn giản:

Nền: rgb(0, 255, 0); /*màu xanh thuần khiết*/

Đối với RGBA, tham số thứ tư được thêm vào - độ trong suốt alpha (từ 0 đến 1).

Bối cảnh: rgba(255, 0, 0, 0,5); /*màu đỏ thuần với độ trong suốt 50% */

Đây rồi, giải pháp cho vấn đề của chúng ta. Chỉ cần đặt màu nền bằng rgba và mọi thứ sẽ trông như chúng ta muốn. Không có hình ảnh và các yếu tố không cần thiết!

Tôi có thể lấy những con số này ở đâu?

Bạn có thể xem các thành phần của màu sắc bằng công cụ Eyedropper của Photoshop.


Giới thiệu về khả năng tương thích giữa nhiều trình duyệt

Vì hàm RGB cũ hơn nhiều so với RGBA và đã có từ thời tiêu chuẩn CSS2, nên để bảo vệ khỏi các trình duyệt cổ xưa nhất, bạn có thể sử dụng cấu trúc trùng lặp sau:

SomeBlock ( nền: rgb(255, 0, 0); nền: rgba(255, 0, 0, 0.5); )

Với cách tiếp cận này, ông cố của các trình duyệt hiện đại sẽ không có độ mờ nhưng bản thân màu sắc sẽ vẫn chính xác.

Bạn sẽ phải chăm sóc IE riêng biệt. Những con lừa không hiểu RGBA cho đến tận phiên bản 8.

Như mọi khi: đất cho nông dân, nhà máy cho công nhân, và con lừa là chiếc nạng! BẰNG .

Tất nhiên, trong điều kiện chiến đấu, chúng tôi đưa quy tắc này vào một CSS riêng mà chúng tôi kết nối.

SomeBlock ( nền: trong suốt; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Bí quyết là chỉ định các màu bắt đầu và kết thúc giống nhau (ff0000 - đỏ) và tận dụng thực tế là bạn có thể đặt kênh alpha cho độ dốc trong bộ lọc này (trong ví dụ, giá trị là 80).

Để tham khảo: bộ lọc sử dụng hệ thập lục phân và mã cho màu mờ hoàn toàn là FF (ở dạng thập phân là 255). Theo đó, thập lục phân 80 là số thập phân 128, tức là độ trong suốt 50%.

Đã thử nghiệm trong:

  • TỨC LÀ 6-9
  • Firefox 3+
  • Opera 10+
  • Safari 4
  • Trình duyệt Chrome