Màu sắc d. 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
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 bằng tên của chúng, sử dụng tên màu trên tiếng anh. 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ắc | Tên | Màu sắc | Tên | Màu sắc | Tên | Màu sắc | Tê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ụ sử dụng màu sắc khác nhau tên của:
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ó đượ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 thay thế các số từ 10 đến 15 bằng chữ 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ố lớn nhất 255 ở dạng thập phân tương ứng với giá trị FF cao nhất trong hệ 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 thành 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.
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 là giá trị xanh(GG) và giá trị sau là 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ỳ đồ họa nào phần mềm, chẳng hạn 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à không phụ thuộc vào máy tính. 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 |
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. Làm sao số lớn hơn, 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 lại về 0. Màu có giá trị #FF0000 là sắc thái đỏ nhất có thể. Tình hình cũng tương tự với màu xanh lá(#00FF00) và xanh lam (#0000FF).
- Màu vàng(#FFFF00) thu được 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ì màu tương tự có thể được hiển thị trong các trình duyệt khác nhau theo cach riêng của tôi. Đ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 cộng màu sắc từ tất cả các kết hợp có thể cho 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. TRONG khoảnh khắc này Mức độ liên quan của màu sắc 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.
| 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 hay 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
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 . 28/11/14 11.1KThậ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 bằng dải màu. 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 nhiều đị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à ý nghĩa của hệ thập lục phân mã màu. 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 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 - đó là định dạng RGB được cải tiến, trong đó giá trị thứ tư đặt độ trong suốt của màu ở biểu mẫu 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 sắc 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. Trong những khoảng thời gian xa xôi đó hệ điều hành chỉ có thể hiển thị một số sắc thái tám 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.
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 đỏ, 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ả.
| 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 sáng 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
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!
Kết quả ví dụ này thể hiện trong hình. 2.
Cơm. 2. Màu sắc trên trang web