Màu xám nhạt rgb. Hướng dẫn HTML
HEX / HTML
Một màu ở định dạng HEX không khác gì một biểu diễn hệ thập lục phân của RGB.
Màu sắc được biểu thị 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: # 112233, trong đó 11 là màu đỏ, 22 là xanh lục, 33 là xanh lam. Tất cả các giá trị phải từ 00 đến FF.
Nhiều ứng dụng chấp nhận ký hiệu viết tắt cho các màu hệ thập lục phân. Nếu mỗi nhóm trong 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.
- h1 (màu: # ff0000;) / * đỏ * /
- h2 (màu: # 00ff00;) / * xanh lá cây * /
- h3 (màu: # 0000ff;) / * xanh lam * /
- h4 (màu: # 00f;) / * cùng một màu xanh lam, tốc ký * /
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ó được bằng cách trộn đỏ, lục và 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à phần còn lại được đặt thành 0.
Một số ứng dụng (đặc biệt là trình duyệt web) hỗ trợ tỷ lệ phần trăm RGB (từ 0% đến 100%).
- h1 (màu: rgb (255, 0, 0);) / * đỏ * /
- h2 (màu: rgb (0, 255, 0);) / * xanh lá cây * /
- h3 (màu: rgb (0, 0, 255);) / * xanh lam * /
- h4 (màu: rgb (0%, 0%, 100%);) / * cùng màu xanh lam, ký hiệu 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 với sự hỗ trợ cho kênh alpha xác định độ mờ của một đối tượng.
Giá trị màu RGBA được chỉ định là: rgba (đỏ, lục, lam, 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 không trong suốt).
- h1 (màu: rgb (0, 0, 255);) / * xanh lam trong RGB bình thường * /
- h2 (color: rgba (0, 0, 255, 1);) / * cùng màu xanh lam trong RGBA vì độ mờ: 100% * /
- h3 (màu: rgba (0, 0, 255, 0,5);) / * độ mờ: 50% * /
- h4 (màu: rgba (0, 0, 255, .155);) / * độ mờ: 15,5% * /
- h5 (màu: 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à đại diện của mô hình RGB trong một hệ tọa độ hình trụ. HSL thể hiện màu sắc theo cách trực quan và dễ hiểu 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, trong 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 / sắc độ), Saturation (độ bão hòa), Lightness / Luminance (độ sáng / độ sáng / độ sáng, không bị nhầm lẫn với độ sáng).
Hue đặt 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 độ bão hòa (từ 0% đến 100%). Độ sáng là phần trăm độ đậm nhạt (từ 0% đến 100%).
- h1 (màu: hsl (120, 100%, 50%);) / * xanh lá cây * /
- h2 (màu: hsl (120, 100%, 75%);) / * xanh nhạt * /
- h3 (màu: hsl (120, 100%, 25%);) / * xanh đậm * /
- h4 (màu: 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 để chỉ định độ mờ của đối tượng.
Giá trị màu HSLA được chỉ định là: hsla (màu sắc, độ bão hòa, độ đậm nhạt, 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 không trong suốt).
- h1 (màu: hsl (120, 100%, 50%);) / * xanh lục trong HSL thông thường * /
- h2 (màu: hsla (120, 100%, 50%, 1);) / * giống màu xanh lục trong HSLA vì độ mờ: 100% * /
- h3 (màu: hsla (120, 100%, 50%, 0,5);) / * độ mờ: 50% * /
- h4 (màu: hsla (120, 100%, 50%, .155);) / * độ mờ: 15,5% * /
- h5 (màu: hsla (120, 100%, 50%, 0);) / * hoàn toàn trong suốt * /
CMYK
Mô hình màu CMYK thường được kết hợp với in màu, với in ấn. CMYK (không giống như RGB) là một mô hình trừ, có nghĩa là các giá trị cao hơn được kết hợp với các màu tối hơn.
Màu sắc được xác định bằng tỷ lệ lục lam (Cyan), đỏ tươi (Magenta), vàng (Yellow), với sự bổ sung của màu đen (Key / blackK).
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, hay nói đúng hơn, kích thước của chấm màn hình được hiển thị trên máy tạo mẫu trên phim của màu này (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 màu vàng và 46 màu đen. Điều này có thể được ký hiệu như sau: (9,83,100,46). Đôi khi họ sử dụng các ký hiệu như vậy: C9M83Y100K46, hoặc (9%, 83%, 100%, 46%) hoặc (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV
HSB (còn được gọi là HSV) tương tự như HSL, nhưng chúng là hai mô hình 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ô hình này, thường được 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 / sắc độ), Saturation (độ bão hòa), Brightness / Value (độ sáng / giá trị).
Hue đặt 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 độ 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 thuần túy toán học. 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", có nghĩa là bạn không thể ánh xạ X, Y và Z với bất kỳ tập hợp màu kết hợp nào. XYZ là mô hình chính cho hầu hết các mô hình màu khác được sử dụng trong các lĩnh vực kỹ thuật.
LAB
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 của Lab là tạo ra một không gian màu trong đó sự thay đổi màu sẽ tuyến tính hơn về mặt cảm nhận của con người (so với XYZ), nghĩa là, sự thay đổi giống nhau về các giá trị tọa độ màu ở các khu vực khác nhau của không gian màu sẽ tạo ra cùng một cảm giác thay đổi màu sắc.
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, như tên gọi của nó, dựa trên số 16. 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 các 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 trong hệ thập phân tương ứng với số FF trong hệ thập lục phân. Để tránh nhầm lẫn trong định nghĩa của hệ thống số, số thập lục phân được đặt trước ký hiệu băm #, ví dụ # 666999. Mỗi màu trong số ba màu - đỏ, xanh lục và xanh 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ý tự đầu tiên đánh dấu thành phần màu đỏ của màu, hai ký tự ở giữa đánh dấu màu xanh lục và hai ký tự cuối cùng đánh dấu màu xanh lam. Nó được phép sử dụng dạng viết tắt #rgb, trong đó mỗi ký tự phải được nhân đôi. Do đó, mục nhập # fe0 sẽ được coi là # ffee00.
bằng tên
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. Trong bảng. 1 hiển thị tên, mã hex, giá trị ở định dạng RGB, HSL và mô tả.
Tên | Màu sắc | Mật mã | RGB | HSL | Sự miêu tả |
---|---|---|---|---|---|
trắng | #fffff hoặc #fff | rgb (255,255,255) | hsl (0,0%, 100%) | trắng | |
màu 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 | |
màu đen | # 000000 hoặc # 000 | rgb (0,0,0) | hsl (0,0%, 0%) | Màu đ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 đỏ | |
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á | |
nước biển | # 00ffff hoặc # 0ff | rgb (0,255,255) | hsl (180,100%, 50%) | Màu xanh lam | |
màu xanh lam | # 0000ff hoặc # 00f | rgb (0,0,255) | hsl (240,100%, 50%) | Màu xanh lam | |
Hải quân | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | Xanh hải quân | |
mòng két | #008080 | rgb (0,128,128) | hsl (180,100%, 25%) | xanh xanh | |
hoa vân anh | # ff00ff hoặc # f0f | rgb (255,0,255) | hsl (300,100%, 50%) | Hồng | |
màu tía | #800080 | rgb (128,0,128) | hsl (300,100%, 25%) | màu tím |
Với 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 bằng cách sử dụng các giá trị màu đỏ, xanh lục và xanh lam trong các thuật ngữ 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ó thể chấp nhận được đặt màu dưới dạng phần trăm, trong khi 100% sẽ tương ứng với số 255. Đầu tiên, từ khóa rgb được chỉ định, sau đó các thành phần màu được được chỉ định trong dấu ngoặc vuông, đượ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 | 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ự về cú pháp với RGB, nhưng bao gồm một kênh alpha đặt độ trong suốt của phần tử. Giá trị 0 là hoàn toàn trong suốt, 1 là không trong suốt và giá trị trung gian như 0,5 là trong mờ.
RGBA được thêm vào CSS3, vì vậy việc 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ố tính năng của nó có thể thay đổi. Ví dụ: một màu RGB được thêm vào thuộc tính màu nền sẽ vượt qua xác thực, nhưng một màu được thêm vào thuộc tính nền thì không. Đồng thời, các trình duyệt hiểu khá chính xác về 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 đầu tiên Hue (màu sắc), Saturate (độ bão hòa) và Lightness (độ đậm nhạt). Hue là giá trị màu trên bánh xe màu (Hình 1) và được xác định bằng độ. 0 ° là màu đỏ, 120 ° là màu xanh lá cây và 240 ° là màu xanh lam. Giá trị Hue 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, được đo bằng phần trăm từ 0% đến 100%. Giá trị 0% cho biết không có màu và có màu xám, 100% là giá trị bão hòa tối đa.
Độ sáng đặt độ sáng của màu và được chỉ định theo tỷ lệ phần trăm từ 0% đến 100%. Các giá trị nhỏ làm cho màu tối hơn, trong khi các giá trị cao làm cho nó nhạt hơn, các giá trị cực đại là 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ự về cú pháp với HSL, nhưng bao gồm một kênh alpha đặt độ trong suốt của phần tử. Giá trị 0 là hoàn toàn trong suốt, 1 là không trong suốt và giá trị trung gian như 0,5 là trong mờ.
Các giá trị màu ở đị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ã xem có hợp lệ với phiên bản hay không.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Cảnh báo
Tất cả các phương pháp bắt một con sư tử được liệt kê trên trang web là lý thuyết và dựa trên các 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à một kẻ săn mồi và một con vật nguy hiểm!
Kết quả của ví dụ này được thể hiện trong Hình. 2.
Cơm. 2. Màu sắc trên trang web
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 nền trước của phần tử (ví dụ: văn bản, màu liên kết) hoặc nền của phần tử (nền, màu khối). Chúng cũng có thể được sử dụng để thay đổi màu 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ể đặt các 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 này được mô tả chi tiết hơn bên dưới.
Màu CSS - Mã Hex
Mã màu thập lục phân là một biểu diễn màu gồm sáu chữ số. Hai chữ số đầu tiên (RR) là giá trị màu đỏ, hai chữ số tiếp theo là giá trị màu xanh lá cây (GG) và hai chữ số cuối cùng là giá trị màu xanh lam (BB).
Màu sắc CSS - Mã Hex ngắn
Mã màu thập lục phân 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 đặt trước dấu thăng "#". Sau đây là các ví dụ về việc 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à một số nguyên, từ 0 đến 255 hoặc một tỷ lệ 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 bạn không nên sử dụng nó.
Dưới đây là một ví dụ hiển thị nhiều màu sử dụ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 với dịch vụ của chúng tôi.
Màu trình duyệt an toàn
Dưới đây là bảng gồm 216 màu độc lập với máy tính và an toàn nhất. Những màu này trong CSS nằm trong khoảng từ 000000 đến mã hex 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 sẽ 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 đượ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. Phương pháp được sử dụng phổ biến nhất là dựa trên hệ thập lục phân, là phương pháp phổ biến nhất.
Màu hệ thập lục phân
HTML sử dụng số thập lục phân để chỉ định màu. Hệ thập lục phân, không giống như hệ thập phân, như tên gọi của nó, dựa trên số 16. 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 các 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 trong hệ thập phân tương ứng với số FF trong hệ thập lục phân.
Để tránh nhầm lẫn trong định nghĩa của hệ thống số, số thập lục phân được đặt trước dấu thăng #, ví dụ # aa69cc. Trong trường hợp này, trường hợp không thành vấn đề, do đó có thể cho phép viết # F0F0F0 hoặc # f0f0f0.
Một màu điển hình được sử dụng trong HTML như sau.
Ở đây, màu nền của trang web được đặt thành # FA8E47. Dấu thăng # phía trước một số có nghĩa là nó ở hệ 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) thành phần màu xanh lá cây, và hai chữ số cuối cùng (47) thành phần màu xanh lam. Kết quả cuối cùng là màu này.
FA | + | 8E | + | 47 | = | FA8E47 |
Mỗi màu trong số ba màu - đỏ, xanh lá cây và xanh lam - có thể nhận các giá trị từ 00 đến FF, cuối cùng tạo thành 256 sắc thái. Như vậy, tổng số màu có thể là 256x256x256 = 16.777.216 kết hợp. Mô hình màu dựa trên các thành phần đỏ, lục và lam được gọi là RGB (đỏ, lục, lam; đỏ, lục, lam). Mô hình này là phụ gia (từ cộng - thêm vào), trong đó việc bổ sung cả ba thành phần tạo thành màu trắng.
Để điều hướng dễ dàng hơn trong các màu thập lục phâ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ì sẽ thu được màu xám. Số càng cao, màu càng nhạt và các giá trị thay đổi từ # 000000 (đen) thành #FFFFFF (trắng).
- Màu đỏ tươi được tạo thành nếu thành phần màu đỏ được tạo thành cực đại (FF) và phần còn lại của các thành phần được đặt thành 0. Màu có giá trị # FF0000 là màu đỏ đậm nhất có thể. Điều này cũng đúng với màu xanh lá cây (# 00FF00) và xanh lam (# 0000FF).
- Màu vàng (# FFFF00) thu được bằng cách trộn màu đỏ với màu xanh lá cây. Điều này được nhìn thấy rõ ràng trên bánh xe màu (Hình 6.1), nó trình bày các màu cơ bản (đỏ, xanh lá cây, xanh lam) và 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à đỏ tươi). Nói chung, có thể thu được bất kỳ màu nào bằng cách trộn các màu liền kề với nó. Vì vậy, 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 các giá trị thập lục phân không cần phải được chọn theo kinh nghiệm. Vì mục đích này, một trình chỉnh sửa đồ 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. Trên hình. 6.2 hiển thị một cửa sổ để chọn màu trong chương trình này, đường này khoanh tròn giá trị thập lục phân kết quả của màu hiện tại. Bạn có thể sao chép và dán nó vào mã của mình.
Cơm. 6.2. Bộ chọn màu trong Photoshop
Màu web
Nếu bạn đặt chất lượng 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 liên quan đến cách đồ họa được hiển thị khi trình duyệt làm việc với bảng màu của chính nó 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 đượ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àu sắc được giữ nguyên trong các trình duyệt khác nhau, một bảng màu của cái gọi là màu web đã được giới thiệu. Màu web là những màu đó, đối với mỗi thành phần - đỏ, lục và lam - một trong sáu giá trị \ u200b \ u200bis đặt - 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 dấu ngoặc. Tổng số màu từ tất cả các kết hợp có thể cho ra 6x6x6 - 216 màu. Màu web mẫu là # 33FF66.
Đặc điểm chính của màu web là nó được hiển thị giống nhau trên tất cả các trình duyệt. Hiện tại, mức độ phù hợp của màu web là rất nhỏ do chất lượng màn hình được cải thiện và mở rộng khả năng của chúng.
Màu sắc theo tên
Để không nhớ tập hợp các số, bạn có thể sử dụng tên của các màu thường dùng để thay thế. Trong bảng. 6.3 hiển thị tên của các tên màu phổ biến.
Tên màu | Màu sắc | Sự miêu tả | Giá trị hex |
---|---|---|---|
màu đen | Màu đen | #000000 | |
màu xanh lam | Màu xanh lam | # 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 | |
Vôi | màu xanh lợt | # 00FF00 | |
Bỏ rơi | Đỏ sẫm | #800000 | |
Hải quân | Xanh hải quân | #000080 | |
Ôliu | Ôliu | #808000 | |
màu tía | Màu tím đậm | #800080 | |
màu đỏ | màu đỏ | # FF0000 | |
màu bạc | xám nhạt | # C0C0C0 | |
mòng két | xanh xanh | #008080 | |
trắng | trắng | #FFFFFF | |
màu vàng | Màu vàng | # FFFF00 |
Không quan trọng bạn chỉ định màu như thế nào - theo tên của nó hoặc bằng cách sử dụng các số thập lục phân. Về hiệu quả của chúng, các phương pháp này là ngang nhau. Ví dụ 6-1 cho thấy cách đặt màu nền và màu văn bản của một 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 sắc của văn bản thông qua thuộc tính text. Đối với nhiều loại, giá trị của thuộc tính text được đặt thành số thập lục phân và bgcolor được đặt thành teal từ khóa dành riêng.>> Quản lý màu sắc
Giá trị màu RGB hệ 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ề hình ảnh cuối cùng mà chúng hướng đến. Ví dụ, chúng ta hãy so sánh các biểu diễn màu sắc cho đa ảnh và cho màn hình máy tính. Trong trường hợp đầu tiên, cơ sở là trắng màu của giấy mà sau đó ba màu cơ bản được áp dụng: màu xanh lam, màu tía 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 các sắc thái màu khác nhau, ngoại trừ màu đen tuyền, hoặc trong trường hợp không có màu hoàn toàn, chúng sẽ tạo ra giấy trắng. Nếu chúng tôi thêm màu đen vào chúng, chúng tôi nhận được CMYK- một cách để truyền tải màu khi có được màu mong muốn bằng cách lấy màu trắng trừ đi các màu còn thiếu.
Trong trường hợp thứ hai, cơ sở là màu đen màu của màn hình điều khiển, mỗi ô trong đó phát sáng một trong ba màu: màu đỏ-Màu đỏ, màu xanh lá-màu xanh lá cây và màu xanh lam-màu xanh lam. Sau đó, trong trường hợp hoàn toàn không có bất kỳ ánh sáng nào, chúng tôi nhận được màu đen tuyền của màn hình và bất kỳ màu nào trong số các màu bắt buộc được cho theo tỷ lệ của từng màu trong số ba màu. Trong trường hợp này, chúng tôi sẽ nhận được RGB- Phương pháp chuyển màu. Màu cơ bản có thể có ý nghĩa 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ố trong chuỗi chữ số của nó, mà là mười sáu - do đó có tên. Do đó, các biến thể không lặp lại của tổ hợp hai chữ số chỉ có thể là - 256 , để tiếp tục dãy chữ số sau 9 thư từ MỘT trước F, vì vậy hàng sẽ trông như thế này -
0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
Trong trường hợp này, màu được cung cấp bởi ba số thập lục phân, mỗi số 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 lam màu sắc. Tất cả các số có thể nhận các giá trị khác nhau, từ 00 trước FF(từ 0 đến 255). Ví dụ: màu xanh lá cây được cho là # 00FF00, đỏ - như # FF0000, màu xanh - như # 0000FF, trắng - như #FFFFFF, hoàn toàn không có màu sắc hoặc màu đen được cho là #000000 .
Trong biểu mẫu bên dưới, bạn có thể đặt 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 của chúng bằng cách nhấp vào trường đầu ra.
Ví dụ về một số giá trị màu RGB hệ thập lục phân: chuyển màu đỏ, xanh lam và xanh lục.
Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã |
#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 chữ viết chuỗi
Để dễ sử dụng, một số màu và sự kết hợp của chúng đã được đặt tên mà tất cả các trình duyệt đều công nhận và có thể đặt nhiều màu theo tên. Bảng dưới đây cho thấy một số tên màu:
Quang cảnh | Tên | Quang cảnh | Tên | Quang cảnh | Tên | Quang cảnh | Tên |
trắng | màu đỏ | trái cam | Màu vàng | ||||
Màu xanh lá | Màu xanh lam | Màu tía | Màu đen | ||||
Alice màu xanh lam | màu trắng cổ | Aqua | aquamarine | ||||
Azure | Be | Bisque | blanchedalmond | ||||
Tia cực tím | màu nâu | Gỗ lớn | Xanh chói | ||||
chartreuse | Sô cô la | San hô | Màu xanh hoa ngô đồng | ||||
Râu ngô | Đỏ thẫm | lục lam | xanh đậm | ||||
Darkcyan | darkgoldenrod | màu xám đen | Màu xanh lá cây đậm | ||||
Vải kaki màu thẫm | Darkmagenta | Darkolivegreen | màu cam đậm | ||||
Darkorchid | đỏ sẫm | darksalmon | Darkseagreen | ||||
xanh lam đậm | xám đen | màu lam sẫm | Màu tím đậm | ||||
Màu hồng đậm | bầu trời xanh thẳm | Dimgray | dodger xanh lam | ||||
Firebrick | Hoa trắng | rừng xanh | Fuschia | ||||
Gainsboro | ma trắng | Vàng | Goldenrod | ||||
xám | Xanh lá cây | Honeydew | hotpink | ||||
Đỏ Ấn Độ | xanh đậm | Ngà voi | Kaki | ||||
Hoa oải hương | Hoa oải hương | Lemonchiffon | xanh nhạt | ||||
san hô nhẹ | lightcyan | lightcoldenrodyellow | màu xanh lợt | ||||
xám nhạt | Màu hồng nhạt | cá hồi nhạt | Ánh sáng xanh | ||||
Lightskyblue | Lightslate xám | thép xanh nhạt | nhẹ nhàng | ||||
Vôi | Limegreen | lanh | Đỏ tươi | ||||
Bỏ rơi | mediumaquamarine | Xanh nhẹ | Phong lan trung bình | ||||
Tím vừa | Xanh lá cây trung bình | Mediumslateblue | Mediumspringgreen | ||||
xanh ngọc trung bình | tia cực tím đỏ | màu xanh nửa đêm | kẹo bạc hà | ||||
Mistyrose | Navajowhite | Hải quân | oldlace | ||||
Ôliu | Màu xám ô liu | đỏ cam | Phong lan | ||||
nhợt nhạt | Palegreen | màu xanh ngọc lam | nhợt nhạt | ||||
tàu cói | Peachpuff | Peru | Hồng | ||||
Mận | Bột màu xanh lam | Rosybrown | xanh đậm | ||||
Yên xe màu nâu | màu xanh biển | Vỏ sò | Sienna | ||||
Màu bạc | trời xanh | Màu xanh đá phiến | Phiến đá xám | ||||
Tuyết | Xuân xanh | màu xanh thép | Tan | ||||
Màu 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 | xanh vàng |
Sử dụng công cụ chọn 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 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 theo cài đặt hệ thống và khả năng giám sát, bằng cách tự trộn và thay thế màu sắc. Do đó, đôi khi người dùng không nhìn thấy những gì quản trị viên web muốn hiển thị cho anh ta. Cách thoát khỏi tình huống này được tìm thấy trong việc sử dụng bảng màu, mỗi màu trong số đó được đảm bảo hiển thị theo cùng một cách bởi tất cả các trình duyệt trên các nền tảng khác nhau. 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ó các thành phần màu đảm nhận các giá trị sau: 00 ,33 ,66 ,99 , CC,FF, trong tất cả những gì có thể 216 sự kết hợp của chúng.
Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã | Quang cảnh | mật mã |
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 |