RGB màu cam. Hướng dẫn HTML. Màu sắc RGB. Bảng màu an toàn

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 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ả.

Sử dụng RGB

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

Đị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

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

Đị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ả 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

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.

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 thái đỏ 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 bạn.

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.

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

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 .

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); ) /* màu 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ự.

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à 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ã hex 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.

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

• bằng tên,
• theo giá trị thập lục phân,
• ở định dạng RGB và RGBA,
• ở định dạng HSL và HSLA.

Đặt màu theo tên

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

Đây là một ví dụ về việc sử dụng tên màu, tên màu được lấy từ bảng mở rộng.

Đâ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 bổ sung. Bằng tiếng Anh phép cộng- phép cộng. RGB là tên viết tắt của các từ tiếng Anh: Red, Green, Blue - đỏ, lục, lam). Từ đó, rõ ràng là trong mô hình RGB, màu sắc được tổng hợp bằng cách thêm ba màu (đỏ, lục, lam) với số lượng khác nhau.

Bằng cách trộn các màu đỏ, xanh lá cây và xanh lam, bạn có thể thu được hàng 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.

Vào vấn đề.

Để đặt thuộc tính ở định dạng này, hãy sử dụng ký hiệu rgb(r, g, b) , trong đó r, g, b là ba kênh cho mỗi màu (đỏ, lục, lam). Giá trị cho mỗi kênh được đặt trong phạm vi từ 0 đến 255.

Mã ví dụ.

Để làm cho mọi thứ rõ ràng, đây là một ví dụ về mã:

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

Giải thích chẳng hạn.

Ở đầu trang chúng ta tạo lớp div.rgb, nó cần cho các khối được tạo bởi thẻ

được hiển thị ở kích thước yêu cầu: 240px x 40px. Chúng tôi gán cho thuộc tính line-height một giá trị 40px, nghĩa là bằng 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

ở tâm thẳng đứng. Chúng ta căn giữa văn bản theo chiều ngang bằng cách sử dụng quy tắc ( căn chỉnh văn bản: giữa;).

Tiếp theo, trong mã chúng ta đặt màu nền của khối

sử dụng thuộc tính style, sử dụng thuộc tính nền và gán giá trị cho rgb(255, 0, 0) , rgb(0, 255, 0) và rgb(0, 0, 255) . Nghĩa 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 0.

Hãy thử chỉnh sửa ví dụ này và chỉ định các giá trị của riêng bạn, ví dụ 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 màu sắc - định dạng 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 - kênh A hoặc alpha. Kênh này thiết lập độ trong suốt của màu sắc. Các giá trị của nó được đặt trong phạm vi từ 0 đến 1. Giá trị 0 tương ứng với độ trong suốt hoàn toàn, 1 - độ mờ hoàn toàn (màu sẽ giống như được chỉ định trong ba kênh RGB đầu tiên) và các giá trị trung gian ​​như 0,4 hoặc 0,6 - độ trong mờ ở các mức độ khác nhau.

Mã ví dụ.

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

Mã này trông giống như mã sau, sử dụng mô hình RGB để chỉ định giá trị màu:

Đây là kết quả của anh ấy:

Giá trị kênh alpha bằng 0 làm cho bất kỳ màu nào trở nên vô hình - hoàn toàn trong suốt; giá trị bằng một sẽ chuyển màu trong mã RGB mà không thay đổi. Thuộc tính rgba(255,0,0,1.0) hiển thị màu đỏ rgb(255, 0, 0) .

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

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

Để biểu thị mã màu, các chữ số thập phân thông thường từ 0 đến 9 được sử dụng làm chữ số thập lục phân và các chữ cái Latinh từ A đến F được sử dụng để biểu thị các số từ 10 đến 15, nghĩa là (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Để rõ ràng, hãy đặt cái này vào một bảng:

Để viết các số thập lục phân lớn hơn F (15 trong hệ thập phân), cũng như trong hệ thập phân, họ cũng sử dụng kết hợp của hai chữ số, nhưng đã là thập lục phân, điều này là hiển nhiên. Vì vậy, để viết số thập phân 255 theo ký hiệu thập lục phân, hãy sử dụng ký hiệu FF.

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

Để chỉ định một màu ở dạng thập lục phân, hãy đặt dấu “#” trước giá trị số, ví dụ: #FFC0CB. Bản thân giá trị #FFC0CB bao gồm ba chữ số thập lục phân FF, C0 và CB. Ý nghĩa của mục này giống như cài đặt màu ở định dạng RGB (rgb(r, g, b)) - mỗi chữ số thập lục phân trong mã HEX biểu thị độ bão hòa màu trong kênh của mô hình RGB.

#FF0000

#00FF00

#0000FF

Mã này sẽ hiển thị các yếu tố sau:

Và đây là hình ảnh với kết quả từ phần "Cài đặ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.

Cho phép ký hiệu rút gọn mã màu HEX: số có 6 chữ số có thể được viết dưới dạng số có 3 chữ số. Điều này chỉ hợp lệ khi hai chữ số trong giá trị màu của một kênh được lặp lại.

Nghĩa là, cách viết tắt sau đây được chấp nhận:

Ví dụ: màu #ff22aa có thể được viết là #f2a hoặc màu #44aa22 có thể được viết là #4a2.

Đặt màu bằng HSL

CSS3 có định dạng mới để chỉ định màu sắc.

Định dạng HSL là viết tắt của các từ tiếng Anh: Hue (hue), Saturate (bão hòa) và Lightness (độ sáng).

Hue trong HSL là giá trị của một màu trên bánh xe màu đặc biệt (Hình 2) và được xác định bằng độ. Nếu chúng ta so sánh 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ây và 240° tương ứng với màu xanh lam.

Giá trị màu sắc sẽ thay đổi trong khoảng từ 0 đến 359.

Hình 2. Bánh xe màu HSL.

Giá trị thứ hai - độ bão hòa (Saturate) được đặt dưới dạng phần trăm. Ở độ bão hòa 100%, màu sắc càng “ngon ngọt” càng tốt; khi chỉ báo độ bão hòa di chuyển về 0%, màu sẽ trở nên xỉn hơn và chuyển sang màu xám.

Giá trị thứ ba, Độ sáng, cũng được đặt dưới dạng phần trăm. Tỷ lệ phần trăm càng cao thì màu sẽ càng sáng. Các giá trị cực trị 0% và 100% sẽ lần lượt biểu thị các màu đen (không có ánh sáng) và trắng (phơi sáng quá mức) và việc chọn màu nào từ bánh xe màu trong kênh đầu tiên không quan trọng. Giá trị độ sáng màu tối ưu là 50%.

Cài đặt màu bằng HSLA

Định dạng HSLA có liên quan đến HSL, giống như RGB liên quan đến RGBA. Ở định dạng HSLA, như trong RGBA, một kênh alpha được thêm vào, kênh này chịu trách nhiệm về độ trong suốt của màu.

Màu được chỉ định ở định dạng HSL dễ đọc hơn. Chúng ta có thể nói rằng nó là trực quan. Ví dụ: mã hsl(120,60%,50%) có thể biểu thị màu cuối cùng nếu có hình ảnh của bánh xe màu HSL trong bộ nhớ. Điều tương tự cũng 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ỉ trở nên rõ ràng sau khi nó được hiển thị trên màn hình.

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

Somebloсk ( màu nền: rgb(255,50,50); màu nền: rgba(255,50,50,0.85) )

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

• Internet
• Chương trình
• Hướng dẫn
• Trình duyệt
• Windows 10
• Android
• iOS
• Sự liên quan

Những ghi chú cuối cùng

Hướng dẫn cập nhật phần mềm trên Supra Smart TV

Tạo bản phân phối ứng dụng Windows trong Inno Setup

Các chương trình vẽ miễn phí trên máy tính và máy tính bảng Chương trình vẽ trên PC Nga

Vẽ bằng chuột trên máy tính

Làm cách nào để kết hợp các tập tin thành một tập tin?

Phổ biến

Điện thoại kỹ thuật số isdn. Công nghệ ISDN. ISDN cơ bản

Máy tính xách tay 15" mạnh mẽ nhất

Chạy bất kỳ chương trình nào với tư cách quản trị viên

Tin tức

2024-04-29 01:40:22

Đặt lại bộ định tuyến: phương pháp và hậu quả

2024-04-29 01:40:22

Tự cấu hình đĩa vệ tinh để nhận HOTBIRD

2024-04-28 01:39:23

Andrey Belyanin - Vụ án gã hề tỉnh táo Vụ án gã hề say rượu

2024-04-28 01:39:23

Bệnh do virus - danh sách các bệnh thông thường và các loại virus nguy hiểm nhất. Các phương thức lây nhiễm của virus

2024-04-28 01:39:23

Làm cách nào tôi có thể biết ông tôi đã chiến đấu ở đâu trong Thế chiến thứ hai và ông đã nhận được những giải thưởng gì?