Rgb màu nâu. Màu sắc trong các kiểu có thể được đặt theo các cách khác nhau: Trong 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 đặt theo ba cách:

Màu nhiệm vụ trong HTML bằng tên của nó

Một số màu có thể được đặt theo tên của chúng bằng cách sử dụng màu tên bằng tiếng Anh như một giá trị. Các từ khóa phổ biến nhất: Đen (Đen), Trắng (Trắng), Đỏ (Đỏ), Xanh lục (Xanh lục), Xanh lam (Xanh lam) và DR:

Màu văn bản - Đỏ

Màu sắc phổ biến nhất của Tiêu chuẩn Hiệp hội Web World World World (Hiệp hội web World World World World World, 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 Vôi. Aqua. Fuchsia.
Đỏ Màu xanh lá. Màu xanh da trời Màu tím.
Bỏ rơi. Ôliu. HẢI QUÂN. Teal.

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

Ví dụ: Nhiệm vụ màu theo tên của nó

  • Hãy thử nó "

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

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

Tiêu đề trên nền Lyme

Văn bản trắng trên nền màu xanh

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

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

Tiêu đề trên nền Lyme

Văn bản trắng trên nền màu xanh

Nhiệm vụ 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 lấy làm cơ sở. Bất kỳ màu nào thu được bằng cách trộn ba chính: R - đỏ (đỏ), G - xanh lục (xanh), Màu xanh (màu xanh). Độ sáng của mỗi màu được đặt 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 cài đặt với giá trị cao nhất của nó (255) và phần còn lại được đặt thành 0. Bạn cũng có thể đặt một màu trong phần trăm. Mỗi tham số chỉ mức độ sáng của màu tương ứng. Ví dụ: giá trị RGB (127, 255, 127) và RGB (50%, 100%, 50%) sẽ đặt màu bão hòa màu xanh lá cây giống nhau:

Ví dụ: Màu tác vụ bằng RGB

  • Hãy thử nó "

rGB (127, 255, 127)

rGB (50%, 100%, 50%)

RGB (127, 255, 127)

RGB (50%, 100%, 50%)

Đặt màu trong thập lục phân

Giá trị Ở r G. B. Cũng cũng có thể được liệt kê các giá trị màu Hexadecimal (hex) trong biểu mẫu: #rrggggbb, trong đó RR (Đỏ), GG (Xanh lục) và BB (màu xanh) là các giá trị thập lục phân từ 00 đến FF (giống như thập phân 0 -255). Hệ thống thập lục phân, trái ngược với hệ số thập phân, dựa trên tên từ tên của nó, trong số 16. Hệ thống thập lục phân sử dụng các dấu hiệu sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, và, B, C, D, E, F. Ở đây các số từ 10 đến 15 được thay thế bằng các chữ Latin. Các số có nhiều hơn 15 trong một hệ thống thập lục phân được liên kết với hai ký tự thành một giá trị. Ví dụ, số 255 cao nhất trong hệ số thập phân tương ứng với giá trị FF cao nhất trong hệ thống thập lục phân. Ngược lại với hệ thập phân, trước thập lục phân, biểu tượng mạng cho # Ví dụ: # FF0000 được hiển thị dưới dạng màu đỏ, vì màu đỏ được cài đặ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 biểu tượng mạng Lưới # Bạn có thể quay số Uppercase và dòng. Hệ thống thập lục phân cho phép dạng viết tắt của biểu mẫu #RGB, trong đó mỗi ký tự tương đương với gấp đôi. Vì vậy, việc ghi # F7O nên được coi là # FF7700.

Ví dụ: Màu lục giác

  • Hãy thử nó "

ĐỎ: # FF0000

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

màu xanh: # 0000FF

ĐỎ: # FF0000

Màu xanh lá cây: # 00ff00

Màu xanh: # 0000FF

Đỏ + Xanh \u003d Vàng: # FFFF00

Đỏ + xanh \u003d tím: # ff00ff

Màu xanh lá cây + xanh \u003d Màu xanh: # 00ffff

Danh sách các màu rộng rãi (tên, hex và rgb):

tên tiêng Anh Tên tiếng Nga. Mẫu vật Hex. RGB.
dền Amarante. # E52B50. 229 43 80
Hổ phách. Hổ phách. # FBF00. 255 191 0
Aqua. Sin-xanh # 00ffff. 0 255 255
Azure. Azure. # 007fff. 0 127 255
Đen. Người da đen #000000 0 0 0
Màu xanh da trời Màu xanh da trời # 0000FF. 0 0 255
Bondi Blue. Bondi nước biển # 0095B6. 0 149 182
Thau. Thau # B5A642. 181 166 66
Nâu. nâu # 964B00. 150 75 0
Cerulean. Azure. # 007ba7. 0 123 167
Mùa xuân đen xanh. Mùa xuân xanh #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
Fuchsia. Fuchsia. # FF00FF. 255 0 255
VÀNG. Vàng # FFD700. 250 215 0
Xám. Màu 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 bích Ngọc bích # 00A86B. 0 168 107
Vôi. Vôi # CCFF00. 204 255 0
Malachite Malachite # 0BDA51. 11 218 81
HẢI QUÂN. Xanh đậm #000080 0 0 128
Ocher. Ocher. # CC7722. 204 119 34
Ôliu. Ôliu #808000 128 128 0
trái cam trái cam # FFA500. 255 165 0
Đào. Đà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
Đỏ Đỏ # 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 màu xanh lá cây. Bolotnaya. # ACB78E. 172 183 142
Teal. Sin-xanh #008080 0 128 128
Ultraramarine. Ultramarine. # 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ã hoa (nền) trên độ bão hòa và bóng râm.

Để thiết lập màu sắc, số được sử dụng trong mã thập lục phân. Hệ thống thập lục phân, không giống như hệ thập phân, dựa trên hệ thống, như sau từ tên của nó, trong số 16. Các số sẽ là như sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Hình từ 10 đến 15 được thay thế bằng các chữ Latin. Các số có nhiều hơn 15 trong hệ thống thập lục phân được hình thành bởi sự kết hợp của hai số trong một. Ví dụ: số 255 trong hệ số thập phân tương ứng với số ff trong hệ thống thập lục phân. Để không nhầm lẫn sự nhầm lẫn trong định nghĩa của hệ thống số, biểu tượng lưới được đặt trước Hexadecimal, ví dụ # 666999. Mỗi trong số ba màu có màu đỏ, xanh lá cây và xanh dương - có thể lấy các giá trị từ 00 đến ff. Do đó, việc chỉ định màu được chia thành ba thành phần #RRGGGBB, trong đó hai ký tự đầu tiên đánh dấu thành phần màu đỏ của màu, hai trung bình - màu xanh lá cây và hai phần cuối cùng là màu xanh. Nó được phép sử dụng dạng viết tắt của #RGB, trong đó mỗi ký tự nên tăng gấp đôi. Vì vậy, việc ghi # Fe0 nên được coi là # FFE00.

Theo tiêu đề

Trình duyệt web IE. Trình duyệt Chrome. Opera. Safari. 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 tab. 1 hiển thị tên, mã thập lục phân, giá trị trong định dạng và mô tả của RGB, HSL.

Bàn. 1. Hoa tên.
Tên Màu sắc Mật mã RGB. Hsl. Sự miêu tả
trắng #FFFFFFF hoặc #fff. rGB (255,255,255) hSL (0,0%, 100%) trắng
bạc # C0c0c0. rGB (192,192,192) hSL (0,0%, 75%) Màu 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%) Người da đen
bỏ rơi. #800000 rGB (128,0,0) hSL (0,100%, 25%) Đỏ sẫm
đỏ. # FF0000 hoặc # F00 rGB (255,0,0) hSL (0,100%, 50%) Đỏ
trái cam. # FFA500. rGB (255.165,0) hSL (38,8.100%, 50%) trái 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
vôi # 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á
aqua. # 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
teal. #008080 rGB (0,128.128) hSL (180,100%, 25%) Sin-xanh
fuchsia. # 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. Safari. 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 sử dụng các giá trị của thành phần màu đỏ, xanh lá cây và xanh trong phép tính thập phân. Mỗi thành phần của ba màu lấy một giá trị từ 0 đến 255. Nó cũng được phép đặt màu theo tỷ lệ phần trăm và 100% sẽ tương ứng với số 255. Đầu tiên, từ khóa RGB được chỉ định, sau đó trong ngoặc, Các thành phần màu, chẳng hạn như RGB (255, 128, 128) hoặc RGB (100%, 50%, 50%).

RGBA.

Trình duyệt web IE. Trình duyệt Chrome. Opera. Safari. Firefox. Android. ios.
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

RGBA đã được thêm vào CSS3, vì vậy phải xác thực mã CSS phải được thực hiện 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ố khả năng trong đó có thể thay đổi. Ví dụ: màu trong định dạng RGB được thêm vào thuộc tính màu nền chuyển xác thực và nền đã được thêm vào thuộc tính. Đồng thời, các trình duyệt khá hiểu chính xác màu sắc cho cả hai thuộc tính.

Hsl.

Trình duyệt web IE. Trình duyệt Chrome. Opera. Safari. 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 được hình thành từ sự kết hợp của các chữ cái màu sắc đầu tiên (màu), bão hòa và độ sáng (Svetlota). Bóng râm là giá trị màu trong vòng tròn màu (Hình 1) và được đặt trong độ. 0 ° tương ứng với màu đỏ, 120 ° - xanh và 240 ° - màu xanh. Giá trị bóng râm có thể thay đổi từ 0 đến 359.

Quả sung. 1. Vòng tròn màu

Độ bão hòa là cường độ màu, được đo bằng tỷ lệ phần trăm từ 0% đến 100%. Giá trị 0% cho thấy sự vắng mặt của màu sắc và màu xám, giá trị độ bão hòa tối đa 100%.

Svetlota đặt bao nhiêu màu sáng và được chỉ định là tỷ lệ phần trăm từ 0% đến 100%. Các giá trị nhỏ làm cho màu tối hơn và nhẹ hơn, giá trị cực cao 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. Safari. Firefox. Android. ios.
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

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

HTML5 CSS2.1 CSS3 IE CR OP SA FX

Màu sắc

Một lời cảnh báo

Tất cả các phương thức câu cá của Lion được liệt kê trên trang web đều là lý thuyết và dựa trên các phương thức 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à loại bỏ tất cả trách nhiệm cho kết quả. Hãy nhớ rằng, Lion là một động vật ăn thịt và một động vật nguy hiểm!

Arrrgh!

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

Quả sung. 2. Màu sắc trên một trang web

Màu sắc trong ngôn ngữ CSS có thể được đặt theo nhiều cách khác nhau:

  • theo tiêu đề,
  • trong giá trị thập lục phân
  • ở định dạng RGB và RGBA,
  • Ở định dạng HSL và HSLA.

Màu tác vụ theo tên

Các trình duyệt hỗ trợ chỉ báo một số màu cho tên theo tên. Trong bảng này, một số từ khóa (tên màu tiếng Anh) được sử dụng để đặt thuộc tính màu, mã RGB, mã thập lục phân (HEX) và mã HSL.

Bàn. 1. Tên màu, mã RGB, HEX và HSL của chúng.
Tên Màu sắc RGB. Hex. Hsl. Sự miêu tả
trắng rGB (255, 255, 255) #FFFFFFF hoặc #fff. hSL (0, 0%, 100%) trắng
bạc rGB (192, 192, 192) # C0c0c0. hSL (0, 0%, 75%) Màu xám
xám. rGB (128, 128, 128) #808080 hSL (0, 0%, 50%) Màu xám đen
Đen. rGB (0, 0, 0) # 000000 hoặc # 000 hSL (0, 0%, 0%) Người da đen
bỏ rơi. rGB (128, 0, 0) #800000 hSL (0, 100%, 25%) Đỏ sẫm
đỏ. rGB (255, 0, 0) # FF0000 hoặc # F00 hSL (0, 100%, 50%) Đỏ
trái cam. rGB (255, 165, 0) # FFA500. hSL (38,8, 100%, 50%) trái cam
màu vàng rGB (255, 255, 0) # Ffff00 hoặc # ff0 hSL (60, 100%, 50%) Màu vàng
Ôliu. rGB (128, 128, 0) #808000 hSL (60, 100%, 25%) Ôliu
vôi rGB (0, 255, 0) # 00ff00 hoặc # 0f0 hSL (120, 100%, 50%) Màu xanh lợt
màu xanh lá. rGB (0, 128, 0) #008000 hSL (120, 100%, 25%) màu xanh lá
aqua. rGB (0, 255, 255) # 00FFFF hoặc # 0FF hSL (180, 100%, 50%) Màu xanh da trời
màu xanh da trời rGB (0, 0, 255) # 0000FF hoặc # 00f hSL (240, 100%, 50%) Màu xanh da trời
hẢI QUÂN. rGB (0,0,128) #000080 hSL (240, 100%, 25%) Xanh đậm
teal. rGB (0, 128, 128) #008080 hSL (180, 100%, 25%) Sin-xanh
fuchsia. rGB (255, 0, 255) # Ff00ff hoặc # f0f hSL (300, 100%, 50%) Hồng
màu tím. rGB (128, 0, 128) #800080 hSL (300, 100%, 25%) Màu tím

Đây là một mẫu sử dụng tên của màu sắc, sự phá vỡ của màu sắc được lấy từ bảng mở rộng.

RGB trong CSS.

Trung bình
nâu.
crimson.
blueviolet.
roliveRab.

Đây là cách mã này hoạt động:

Đặt màu bằng RGB

RGB là một mô hình màu phụ gia. Bằng tiếng Anh tHÊM VÀO - Thêm. RGB là tên viết tắt của các từ tiếng Anh: đỏ, xanh lá cây, xanh dương - đỏ, xanh lá cây, xanh dương). Từ đây rõ ràng là các mô hình RGB được tổng hợp bằng cách thêm ba màu (đỏ, xanh lá cây, xanh dương) với nhiều lượng khác nhau.

Trộn màu đỏ, xanh lá cây và xanh dương có thể được lấy vài triệu sắc thái. Tất cả các kết hợp có thể được lưu trữ trong bộ nhớ máy tính.

Gần hơn với kinh doanh.

Để đặt các thuộc tính ở định dạng này, bản ghi RGB (R, G, B) được sử dụng, trong đó R, G, B là ba kênh cho mỗi màu (đỏ, xanh lá cây, xanh dương). Các giá trị cho mỗi kênh được đặt trong phạm vi từ 0 đến 255.

Mã mẫu.

Để làm cho nó rõ ràng, tôi sẽ cung cấp một mã ví dụ:

RGB trong CSS.

rGB (255, 0, 0)
rGB (0, 255, 0)
rGB (0, 0, 255)

Đây là cách ví dụ này nên hoạt động:

Hình.1. Màu sắc trong RGB.

Giải thích ví dụ.

Ở đầu trang, tôi tạo một lớp div.rgb, nó cần các khối được tạo bởi thẻ được tạo

Hiển thị kích thước mong muốn: 240px đến 40px. Thuộc tính chiều cao dòng được gán một giá trị - 40px, đó là, bằng với chiều cao của khối, điều này sẽ cho phép bạn hiển thị văn bản trong khối
Ở trung tâm của dọc. Văn bản theo chiều ngang tập trung với sự trợ giúp của quy tắc ( text-Căn chỉnh: Trung tâm;).

Tiếp theo, trong mã Đặt màu nền của khối

Khi nhập thuộc tính kiểu, chúng tôi sử dụng thuộc tính nền và các giá trị được gán RGB (255, 0, 0), RGB (0, 255, 0) và RGB (0, 0, 255). Đó là, chúng tôi luân phiên tạo một kênh càng bão hòa càng tốt và các kênh còn lại không được sử dụng để tổng hợp, vì giá trị của chúng bằng NUL.

Hãy thử chỉnh sửa ví dụ này và chỉ định các giá trị của bạn, chẳng hạn như RGB (100, 100, 100).

Đặt màu bằng RGBA

CSS3 có một công cụ mới để làm việc với định dạng màu - RGBA. Nó có thể được gọi là sự phát triển của mô hình RGB, nhưng với việc bổ sung một kênh mới - a hoặc kênh alpha. Kênh này thiết lập độ trong suốt màu. Các giá trị của nó được đặt trong phạm vi từ 0 đến 1. Giá trị bằng 0 tương ứng với độ trong suốt hoàn toàn, độ mờ hoàn toàn (màu sẽ được chỉ định trong ba kênh RGB đầu tiên) và các giá trị trung gian, là 0,4 hoặc 0,6 - mờ cho các mức độ khác nhau.

Mã mẫu.

RGBA trong CSS3.

Đây là cách nó sẽ hoạt động:

Mã này để biểu diễn trực quan của nó tương tự như sau đây bằng mô hình RGB để đặt giá trị màu:

RGBA trong CSS3.

Đây là kết quả của nó:

Giá trị kênh alpha bằng với KNUA làm cho bất kỳ màu nào vô hình - hoàn toàn trong suốt, giá trị bằng một với một màu dịch màu trong mã RGB không thay đổi. Thuộc tính RGBA (255,0,0,0) cho thấy RGB đỏ (255, 0, 0).

Trong giá trị thập lục phân (mã hex)

Trong cuộc sống động đạo cuộc sống, chúng tôi sử dụng hệ số thập phân. Nguồn gốc của nó rất đơn giản - chúng tôi có mười ngón tay trong vòng tay của bạn, và nó thuận tiện để đếm trên những ngón tay theo cách của tôi. Nếu có mười chữ số trong hệ số thập phân: từ 0 đến 9 và số 10 đã xuất viện tiếp theo, thì ở số thập lục phân gồm 16 chữ số và lưu lượng tiếp theo sẽ là số 16.

Để chỉ định các mã màu dưới dạng chữ số thập lục phân, số thập phân thông thường từ 0 đến 9 được sử dụng và các chữ cái Latin từ A đến F đó là (0, 1, 2, 3, 4, 5, 2, 3, 4, 5 , 2, 7, 8, 9, A, B, C, D, E, F). Đối với sự rõ ràng, chúng tôi sẽ giảm điều này trong bảng:

Để ghi lại số thập lục phân, nhiều hơn F (15 trên hệ số thập phân), như trong hệ số thập phân, cũng sử dụng sự kết hợp của hai chữ số, nhưng đã được thập phân, đó là điều hiển nhiên. Vì vậy, để ghi lại số thập phân 255 trong một hệ thống thập lục phân sử dụng bản ghi FF.

Hệ thống thập lục phân dễ hiểu hơn với máy tính, nó xử lý các giá trị được chỉ định trong giá trị thập lục phân.

Để chỉ định màu trong hệ thống thứ 16 Riche, trước giá trị số, bạn cần đặt dấu "#", một ví dụ: # ffc0cb. Giá trị của chính # FFC0CB bao gồm ba chữ số thập lục phân FF, C0 và CB. Ý nghĩa của bản ghi này giống như việc cài đặt màu ở định dạng RGB (RGB (R, G, B)) - mỗi hình thập lục phân trong mã hex biểu thị độ bão hòa màu trong kênh mô hình RGB của nó.

Mã HEX trong CSS

# FF0000.
# 00ff00.
# 0000FF.

Mã này sẽ hiển thị các mục sau:

Nhưng bản vẽ với kết quả từ phần "Đặt màu bằng RGB" trên trang này ở trên.

Hình.1. Màu sắc trong RGB.

Chúng ta thấy rằng màu sắc giống hệt nhau.

Ghi âm viết tắt của mã HEX của màu được cho phép: Số có 6 chữ số có thể được viết dưới dạng 3 chữ số. Nó chỉ được phép trong trường hợp khi hai chữ số được lặp lại trong màu của màu của một kênh.

Đó là, việc giảm ghi âm sau đây được cho phép:

Ví dụ: Color # FF22AA được phép viết So - # F2A hoặc màu # 44aa22 được phép chỉ định trong biểu mẫu # 4A2.

Đặt màu bằng HSL

Một định dạng mới xuất hiện trong CSS3 để chỉ định màu.

Định dạng HSL là tên viết tắt từ các từ tiếng Anh: Huế (Tint), bão hòa (độ bão hòa) và độ sáng (Svetlota).

Hue to HSL là một giá trị màu trên một vòng tròn màu đặc biệt (Hình 2) và nó được đặt trong độ. Nếu bạn giữ sự tương tự với mô hình RGB, thì 0 ° tương ứng với màu đỏ, 120 ° tương ứng với màu xanh lục và 240 ° - màu xanh.

Giá trị của bóng râm sẽ được thay đổi trong phạm vi từ 0 đến 359.


Hình 2. Vòng tròn màu HSL.

Giá trị thứ hai là độ bão hòa (bão hòa) được đặt trong phần trăm. Với độ bão hòa 100%, màu sắc là "Juicy" tối đa, vì chỉ báo di chuyển độ bão hòa thành 0%, màu sắc trở nên xỉn màu và cuộn thành màu xám.

Ý nghĩa thứ ba - Lightlock (Lightness) cũng đặt phần trăm. Tỷ lệ phần trăm càng cao, màu sắc tươi sáng sẽ càng nhiều. Các giá trị cực đoan 0% và 100% sẽ được biểu thị bằng màu đen (thiếu ánh sáng) và màu trắng (chết tiệt), không quan trọng màu gì từ vòng tròn màu được chọn trong kênh đầu tiên. Tối ưu có thể được coi là một giá trị độ sáng màu là 50%.

Đặt màu bằng HSLA

Định dạng HSLA được liên kết với HSL, cũng như RGB với RGBA. Ở định dạng HSLA, như trong RGBA đã thêm kênh Alpha chịu trách nhiệm về độ trong suốt màu.

Màu được chỉ định trong định dạng HSL Đọc đơn giản hơn. Có thể nói rằng anh ta được hiểu trực giác. Ví dụ: mã HSL (120,60%, 50%) có thể được gửi một màu cuối cùng nếu có hình ảnh của vòng tròn màu HSL. Không thể nói về các định dạng RGB và HEX, mã màu được chỉ định trong các định dạng này chỉ rõ ràng sau khi trực quan hóa trên màn hình.

Các định dạng mới trong CSS3 (HSL, HSLA và RGBA) hoạt động trong các trình duyệt Bắt đầu từ phiên bản: IE 9.0, Opera 10.0 Firefox 3.0. Làm thế nào để tạo kiểu làm việc trên các trình duyệt cũ?

Một số (màu nền: RGB (255,50,50); Màu nền: RGBA (255,50,50,0,0.085))

Khi sử dụng mã như vậy trong các trình duyệt cũ, màu nền cho lớp .somebloxk, mặc dù nó sẽ không sử dụng kênh alpha, nhưng sẽ được hiển thị ở định dạng RGB.

Mã màu trong CSS được sử dụng để chỉ màu. Theo quy tắc, mã màu hoặc giá trị màu được sử dụng để cài đặt màu hoặc cho tiền cảnh của phần tử (ví dụ: màu văn bản, tham chiếu) hoặc cho nền của phần tử (màu nền, khối). Chúng cũng có thể được sử dụng để thay đổi màu của nút, viền, điểm đánh dấu, trong quá trình hướng dẫn và các hiệu ứng trang trí khác.

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

Dưới đây để biết thêm chi tiết các định dạng được liệt kê được mô tả.

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

Mã màu sáng - Đây là một bản trình bày sáu chữ số về màu sắc. Hai chữ số đầu tiên (RR) là một giá trị màu đỏ, hai chữ số sau là giá trị màu xanh lá cây (GG) và sau đó là giá trị màu xanh lam (BB).

Màu CSS - Mã hex ngắn

Mã màu hex ngắn - Đây là một hình thức ngắn hơn của ký hiệu sáu chữ số. Ở định dạng này, mỗi chữ số được lặp lại để có được giá trị màu sáu chữ số tương đương. Ví dụ: # 0f0 trở thành # 00ff00.

Giá trị hex có thể được lấy từ bất kỳ phần mềm đồ họa nào, chẳng hạn như Adobe Photoshop, Vẽ lõi, v.v.

Mỗi cổ áo hex trong CSS sẽ được chọn trước dấu hiệu "#" của Hesha. Dưới đây là những ví dụ về việc sử dụng các chỉ định thập lục phân.

Màu CSS - Giá trị RGB

Giá trị rgb. - Đây là mã màu được đặt bằng thuộc tính RGB (). Khách sạn này có ba giá trị: một cho màu đỏ, xanh lá cây và màu xanh. Giá trị có thể là một 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ợ các thuộc tính của màu RGB (), vì vậy không nên sử dụng nó.

Dưới đây là một ví dụ hiển thị một số màu bằng các 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 trình duyệt an toàn

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

Bảng "an toàn" màu sắc 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.# 33333FF.
#336600 #336633 #336666 #336699 # 3366CC.# 3366FF.
#339900 #339933 #339966 #339999 # 3399cc.# 3399FF.
# 33CC00.# 33CC33.# 33CC66.# 33cc99.# 33cccc.# 33ccff.
# 33FF00.# 33FF33.# 33FF66.# 33FF99.# 33FFCC.# 33FFFFF.
#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 # 9933C.# 9933FF.
#996600 #996633 #996666 #996699 # 9966CC.# 9966FF.
#999900 #999933 #999966 #999999 # 9999cc.# 9999FF.
# 99cc00.# 99cc33.# 99CC66.# 99cc99.# 99cccc.# 99ccff.
# 99FF00.# 99FF33.# 99FF66.# 99FF99.# 99FFCC.# 99FFFFF.
# CC0000.# CC0033.# CC0066.# CC0099.# CC00CC.# Cc00ff.
# CC3300.# CC3333.# CC3366.# CC3399.# CC33CC.# CC33FF.
# CC6600.# CC6633.# CC6666.# CC6699.# CC66CC.# CC66FF.
# CC9900.# CC9933.# CC9966.# CC9999.# Cc99cc.# Cc99ff.
# CCC00.# CCCC33.# CCCC66.# Cccc99.#Cccccc.#Cccccff.
# 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.