Css màu đẹp. Hướng dẫn HTML. Màu sắc RGB. Bảng màu an toàn
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.
Tên | Màu sắc | RGB | HEX | HSL | Sự miêu tả |
---|---|---|---|---|---|
trắng | rgb(255, 255, 255) | #ffffff hoặc #fff | hsl(0, 0%, 100%) | Trắng | |
bạc | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | 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%) | Đen | |
Bỏ rơi | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Đỏ sẫm | |
màu đỏ | rgb(255, 0, 0) | #ff0000 hoặc #f00 | hsl(0, 100%, 50%) | Màu đỏ | |
quả cam | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Quả 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 | |
chanh xanh | 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á | |
nước | 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 | |
màu xanh mòng két | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Xanh lam | |
hoa vân anh | 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 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:
Hình.1. Màu sắc trong RGB.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ẻ
Tiếp theo, trong mã chúng ta đặt màu nền của khối
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 1 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 - chúng ta có mười ngón tay trên tay 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 trước giá trị số bằng dấu “#”, 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.
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.
Cài đặ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 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ự 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 trong 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.
Nhìn kỹ vào bản vẽ. Nền của cửa sổ thả xuống được làm mờ. Đây là một kỹ thuật thiết kế khá phổ biến. Hãy suy nghĩ về cách thực hiện điều này.
Nhiệm vụ
Làm cho màu trong mờ trên nhiều trình duyệt.
Giải pháp
Ý nghĩ đầu tiên trong tình huống này là sử dụng hình ảnh png24 với độ mờ đặt trước cho nền. Nhưng hình ảnh này là hoàn toàn không cần thiết. Bạn có thể làm tốt mà không cần nó (và do đó không cần yêu cầu thêm tới máy chủ). Chúng ta vẫn cố gắng tìm giải pháp tối ưu.
Ý nghĩ thứ hai là sử dụng . Nhưng trong trường hợp này nó không thuận tiện lắm. Rốt cuộc, không chỉ nền mà cả các dòng chữ cũng sẽ trở nên mờ. Có, trên thực tế, toàn bộ cửa sổ cùng một lúc.
Tất nhiên, bạn có thể thử thêm một vùng chứa bổ sung và chỉ áp dụng độ mờ cho nó, nhưng phần tử HTML này sẽ chỉ nhằm mục đích trang trí và rõ ràng là sẽ dư thừa. Có thể làm mà không có nó?
Tất nhiên bạn có thể! Nếu bạn sử dụng RGBA.
Định dạng mô tả màu RGBA
CSS3 cho phép bạn chỉ định màu bằng các hàm RGB và RGBA. Trong trường hợp này, chúng ta phải chỉ ra tỷ lệ của từng thành phần màu mà một byte được phân bổ (từ 0 đến 255, trong trường hợp ai đó không biết).
Cú pháp cho trường hợp này rất đơn giản:
Nền: rgb(0, 255, 0); /*màu xanh thuần khiết*/
Đối với RGBA, tham số thứ tư được thêm vào - độ trong suốt alpha (từ 0 đến 1).
Bối cảnh: rgba(255, 0, 0, 0,5); /*màu đỏ thuần với độ trong suốt 50% */
Đây rồi, giải pháp cho vấn đề của chúng ta. Chỉ cần đặt màu nền bằng rgba và mọi thứ sẽ trông như chúng ta muốn. Không có hình ảnh và các yếu tố không cần thiết!
Tôi có thể lấy những con số này ở đâu?
Bạn có thể xem các thành phần của màu sắc bằng công cụ Eyedropper của Photoshop.
Giới thiệu về khả năng tương thích giữa nhiều trình duyệt
Vì hàm RGB cũ hơn nhiều so với RGBA và đã có từ thời tiêu chuẩn CSS2, nên để bảo vệ khỏi các trình duyệt cổ xưa nhất, bạn có thể sử dụng cấu trúc trùng lặp sau:
SomeBlock ( nền: rgb(255, 0, 0); nền: rgba(255, 0, 0, 0.5); )
Với cách tiếp cận này, ông cố của các trình duyệt hiện đại sẽ không có độ mờ nhưng bản thân màu sắc sẽ vẫn chính xác.
Bạn sẽ phải chăm sóc IE riêng biệt. Những con lừa không hiểu RGBA cho đến tận phiên bản 8.
Như mọi khi: đất cho nông dân, nhà máy cho công nhân, và con lừa là chiếc nạng! BẰNG .
Tất nhiên, trong điều kiện chiến đấu, chúng tôi đưa quy tắc này vào một CSS riêng mà chúng tôi kết nối.
SomeBlock ( nền: trong suốt; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Mẹo nhỏ là chỉ định màu bắt đầu và màu kết thúc giống nhau (ff0000 - đỏ) và tận dụng thực tế là bạn có thể đặt kênh alpha cho độ dốc trong bộ lọc này (trong ví dụ, giá trị là 80).
Để tham khảo: bộ lọc sử dụng hệ thập lục phân và mã cho màu mờ hoàn toàn là FF (ở dạng thập phân là 255). Theo đó, thập lục phân 80 là số thập phân 128, tức là độ trong suốt 50%.
Đã thử nghiệm trong:
- TỨC LÀ 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Trình duyệt Chrome
>>Quản lý màu sắc
Giá trị màu RGB thập lục phân
Các phương pháp mô tả và xử lý màu sắc khác nhau về mục đích thể hiện cuối cùng. Ví dụ, chúng ta hãy so sánh cách thể hiện màu sắc trong in ấn và màn hình máy tính. Trong trường hợp đầu tiên, cơ sở được lấy trắng màu của giấy sau đó áp dụng ba màu cơ bản: màu xanh da trời, màu tím Và màu vàng. Trộn lẫn với nhau và với màu trắng của giấy theo các tỷ lệ khác nhau, ba màu cơ bản này cho ra các sắc thái màu khác nhau, ngoại trừ màu đen tuyền hoặc nếu hoàn toàn không có sơn thì chúng sẽ cho ra giấy trắng. Nếu chúng ta thêm màu đen cho chúng, chúng ta sẽ nhận được CMYK-một phương pháp truyền màu khi thu được màu cần thiết bằng cách trừ các màu còn thiếu khỏi màu trắng.
Trong trường hợp thứ hai, căn cứ được lấy đen màu của màn hình điều khiển, mỗi ô trong đó phát sáng theo một trong ba màu: màu đỏ-màu đỏ, màu xanh lá-màu xanh lá cây và màu xanh da trời-màu xanh da trời. Sau đó, trong trường hợp hoàn toàn không có bất kỳ ánh sáng nào, chúng ta sẽ có một màu màn hình đen thuần túy và bất kỳ màu nào được yêu cầu đều được tính theo tỷ lệ của từng màu trong số ba màu. Trong trường hợp này chúng ta sẽ nhận được RGB-Phương pháp truyền màu. Màu cơ bản có thể dao động từ 0
trước 255
, hoặc từ 0%
trước 100%
hoặc có thể được biểu diễn dưới dạng giá trị thập lục phân. Trong hình bên dưới, bạn có thể thấy kết quả của việc trộn các màu cơ bản.
Hệ thống số thập lục phân, không giống như hệ thống số thập phân, không có mười chữ số mà có mười sáu - do đó có tên như vậy. Theo đó, chỉ có thể có các biến thể không lặp lại của sự kết hợp hai chữ số - 256 , để tiếp tục chuỗi số sau 9 những lá thư từ MỘT trước F, do đó, chuỗi sẽ trông như thế này -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Trong trường hợp này, màu được chỉ định bởi ba số thập lục phân, mỗi số bao gồm hai chữ số. Số đầu tiên xác định cường độ màu đỏ màu sắc, trung bình màu xanh lá, thứ cuối cùng- màu xanh da trời màu sắc. Tất cả các số có thể nhận các giá trị trong phạm vi từ 00 trước FF(từ 0 đến 255). Ví dụ: màu xanh lá cây được cho là #00FF00, màu đỏ giống như #FF0000, màu xanh - giống như #0000FF, màu trắng - giống như #FFFFFF, sự vắng mặt hoàn toàn của màu sắc hoặc màu đen được đưa ra là #000000 .
Trong biểu mẫu bên dưới, bạn có thể chỉ định bất kỳ giá trị thập lục phân nào cho từng màu trong số ba màu và xem kết quả trộn chúng bằng cách nhấp vào trường đầu ra.
Ví dụ về một số giá trị màu RGB thập lục phân: chuyển màu đỏ, xanh lam và xanh lục.
xem | mã số | xem | mã số | xem | mã số | xem | mã số | xem | mã số | xem | mã số |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Chỉ định màu bằng cách sử dụng chuỗi ký tự
Để dễ sử dụng, một số màu và sự kết hợp của chúng đã được gán tên được tất cả các trình duyệt nhận dạng và có thể đặt nhiều màu trong số chúng theo tên. Bảng dưới đây hiển thị một số tên màu:
xem | Tên | xem | Tên | xem | Tên | xem | Tên |
Trắng | Màu đỏ | Quả cam | Màu vàng | ||||
Màu xanh lá | Màu xanh da trời | Màu tím | Đen | ||||
Aliceblue | đồ cổ màu trắng | Thủy | Aquamarine | ||||
Azure | Be | bánh quy | Blanchedalmond | ||||
màu xanh tím | Màu nâu | Gỗ lớn | Xanh chói | ||||
Biểu đồ | Sô cô la | San hô | Màu xanh hoa ngô đồng | ||||
Râu ngô | màu đỏ thẫm | lục lam | Xanh đậm | ||||
màu lục lam đậm | Darkgoldenrod | Màu xám đen | Màu xanh lá cây đậm | ||||
Vải kaki màu thẫm | màu đỏ tươi | ô liu xanh | Màu cam đậm | ||||
Darkorchid | Đỏ sẫm | cá hồi đen | màu xanh nước biển đậm | ||||
Darkslateblue | Darkslategray | màu ngọc lam tối | Màu tím đậm | ||||
Màu hồng đậm | Bầu trời xanh thẳm | Dimray | Dodgerblue | ||||
Gạch lửa | hoa trắng | Rừng xanh | hoa fuschia | ||||
Gainsboro | ma trắng | Vàng | Goldenrod | ||||
Xám | màu vàng xanh | mật ngọt | hotpink | ||||
màu đỏ Ấn Độ | xanh đậm | Ngà voi | kaki | ||||
Hoa oải hương | má hồng oải hương | chanh chiffon | Màu xanh nhạt | ||||
ánh sáng san hô | Ánh sáng lục lam | ánh sánglạnhrodmàu vàng | Màu xanh lợt | ||||
Xám nhạt | Màu hồng nhạt | cá hồi ánh sáng | Ánh sáng xanh biển | ||||
Ánh sáng xanh | ánh sángmàu xám | Ánh sáng thép xanh | Màu vàng nhạt | ||||
Chanh xanh | chanh xanh | Lanh | Màu đỏ tươi | ||||
Bỏ rơi | Aquamarine trung bình | Xanh nhẹ | hoa lan trung bình | ||||
màu tím vừa | Màu xanh biển trung bình | Trung bìnhđá phiến | màu xanh trung bình | ||||
màu ngọc lam trung bình | Màu tím trung bình | Màu xanh nửa đêm | kem bạc hà | ||||
hoa tầm gửi | người da trắng Navajo | Hải quân | dây buộc cổ | ||||
Ôliu | Oliverab | Màu đỏ cam | phong lan | ||||
Palegoldenrod | Xanh nhạt | màu ngọc lam | màu tím nhạt | ||||
đu đủ | Đào | Peru | Hồng | ||||
Mận | màu xanh bột | Màu nâu hồng | Xanh đậm | ||||
Yên xe màu nâu | Màu xanh biển | Vỏ sò | Sienna | ||||
Bạc | Trời xanh | Màu xanh đá phiến | Phiến đá xám | ||||
Tuyết | Xuân xanh | Màu xanh thép | Tân | ||||
màu xanh mòng két | Cây kế | Cà chua | màu ngọc lam | ||||
màu tím | Lúa mì | Khói trắng | màu vàng xanh |
Sử dụng bảng màu an toàn
Thật không may, trên các nền tảng khác nhau, với các cài đặt hệ thống khác nhau, việc tái tạo màu sắc chính xác là một vấn đề. Vấn đề là trình duyệt luôn cố gắng điều chỉnh bảng màu của tài liệu phù hợp với cài đặt hệ thống và khả năng giám sát, bằng cách trộn màu độc lập và thay thế chúng. Kết quả là đôi khi người dùng không nhìn thấy chính xác những gì quản trị trang web muốn hiển thị cho mình. Một cách thoát khỏi tình huống này đã được tìm thấy bằng cách sử dụng bảng màu, mỗi màu trong bảng màu được đảm bảo hiển thị như nhau bởi tất cả các trình duyệt trên các nền tảng khác nhau. Đây là cái gọi là đảm bảo bảng màu, còn được gọi là an toàn bảng màu. Bảng màu này bao gồm các màu có thành phần màu có các giá trị sau: 00 ,33 ,66 ,99 , CC,FF, bằng mọi cách có thể 216 sự kết hợp của họ.
xem | mã số | xem | mã số | xem | mã số | xem | mã số | xem | mã số | xem | mã số |
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 |
Vlad Merzhevich
Trong HTML, màu sắc được chỉ định theo một trong hai cách: sử dụng mã thập lục phân và theo tên của một số màu nhất định. Phương pháp dựa trên hệ thống số thập lục phân được sử dụng chủ yếu vì nó là phương pháp phổ biến nhất.
Màu thập lục phân
HTML sử dụng số thập lục phân để chỉ định màu sắc. Hệ thập lục phân, không giống như hệ thập phân, dựa trên số 16, như tên gọi của nó. Các số sẽ như sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Các số từ 10 đến 15 được thay thế bằng chữ cái Latinh. Trong bảng 6.1 cho thấy sự tương ứng giữa số thập phân và số thập lục phân.
Các số lớn hơn 15 trong hệ thập lục phân được hình thành bằng cách kết hợp hai số thành một (Bảng 6.2). Ví dụ: số 255 ở dạng thập phân tương ứng với số FF ở dạng thập lục phân.
Để tránh nhầm lẫn khi xác định hệ thống số, số thập lục phân được đặt trước ký hiệu băm #, ví dụ #aa69cc. Trong trường hợp này, trường hợp nào không quan trọng nên cho phép viết #F0F0F0 hoặc #f0f0f0.
Một màu điển hình được sử dụng trong HTML trông như thế này.
Ở đây màu nền của trang web được đặt thành #FA8E47. Ký hiệu băm # ở phía trước một số có nghĩa là số thập lục phân. Hai chữ số đầu tiên (FA) xác định thành phần màu đỏ của màu, chữ số thứ ba đến thứ tư (8E) xác định thành phần màu xanh lá cây và hai chữ số cuối (47) xác định thành phần màu xanh lam. Kết quả cuối cùng sẽ là màu này.
F.A. | + | 8E | + | 47 | = | FA8E47 |
Mỗi màu trong số ba màu - đỏ, lục và lam - có thể nhận các giá trị từ 00 đến FF, tạo ra tổng cộng 256 sắc thái. Như vậy, tổng số màu có thể là 256x256x256 = 16.777.216 tổ hợp. Một mô hình màu dựa trên các thành phần màu đỏ, lục và lam được gọi là RGB (đỏ, lục, lam; đỏ, lục, lam). Mô hình này là mô hình phụ gia (từ add - add), trong đó việc cộng cả ba thành phần tạo thành màu trắng.
Để điều hướng màu thập lục phân dễ dàng hơn, hãy tính đến một số quy tắc.
- Nếu giá trị của các thành phần màu giống nhau (ví dụ: #D6D6D6), thì kết quả sẽ là tông màu xám. Con số càng cao thì màu càng nhạt, với các giá trị nằm trong khoảng từ #000000 (đen) đến #FFFFFF (trắng).
- Màu đỏ tươi được hình thành nếu thành phần màu đỏ được đặt ở mức tối đa (FF) và các thành phần còn lại được đặt về 0. Màu có giá trị #FF0000 là sắc đỏ đỏ nhất có thể. Điều tương tự cũng đúng với màu xanh lá cây (#00FF00) và xanh lam (#0000FF).
- Màu vàng (#FFFF00) được tạo ra bằng cách trộn màu đỏ và xanh lá cây. Điều này có thể thấy rõ trên bánh xe màu (Hình 6.1), trong đó trình bày các màu cơ bản (đỏ, lục, lam) và các màu bổ sung hoặc bổ sung. Chúng bao gồm màu vàng, lục lam và tím (còn gọi là màu đỏ tươi). Nói chung, bất kỳ màu nào cũng có thể thu được bằng cách trộn các màu gần với nó. Do đó, màu lục lam (#00FFFF) thu được bằng cách kết hợp màu xanh lam và xanh lục.
Cơm. 6.1. vòng tròn màu
Màu sắc dựa trên giá trị thập lục phân không cần phải được lựa chọn theo kinh nghiệm. Với mục đích này, một trình soạn thảo đồ họa có thể hoạt động với các mô hình màu khác nhau, chẳng hạn như Adobe Photoshop, là phù hợp. Trong bộ lễ phục. Hình 6.2 hiển thị cửa sổ chọn màu trong chương trình này; giá trị thập lục phân thu được của màu hiện tại được viền bằng một đường. Bạn có thể sao chép và dán nó vào mã của mình.
Cơm. 6.2. Cửa sổ chọn màu trong Photoshop
Màu web
Nếu bạn đặt chất lượng hiển thị màu của màn hình thành 8 bit (256 màu), thì cùng một màu có thể được hiển thị khác nhau trong các trình duyệt khác nhau. Điều này là do cách hiển thị đồ họa, khi trình duyệt hoạt động với bảng màu riêng và không thể hiển thị màu không có trong bảng màu của nó. Trong trường hợp này, màu sắc được thay thế bằng sự kết hợp của các pixel khác, gần với nó, các màu bắt chước màu đã cho. Để đảm bảo màu sắc được giữ nguyên trên các trình duyệt khác nhau, một bảng màu được gọi là màu web đã được giới thiệu. Màu web là những màu mà mỗi thành phần - đỏ, lục và lam - được đặt thành một trong sáu giá trị - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Giá trị thập lục phân của thành phần này được chỉ định trong ngoặc. Tổng số màu từ tất cả các kết hợp có thể có là 6x6x6 - 216 màu. Màu web ví dụ là #33FF66.
Đặc điểm chính của màu web là nó xuất hiện giống nhau trên tất cả các trình duyệt. Hiện tại, mức độ liên quan của màu sắc trên web là rất nhỏ do chất lượng màn hình được cải thiện và khả năng mở rộng của chúng.
Màu sắc theo tên
Để tránh phải nhớ một bộ số, bạn có thể sử dụng tên các màu sắc thông dụng để thay thế. Trong bảng 6.3 hiển thị tên các tên màu phổ biến.
Tên màu | Màu sắc | Sự miêu tả | Giá trị thập lục phân |
---|---|---|---|
đen | Đen | #000000 | |
màu xanh da trời | Màu xanh da trời | #0000FF | |
hoa vân anh | Màu tím nhạt | #FF00FF | |
xám | Màu xám đen | #808080 | |
màu xanh lá | Màu xanh lá | #008000 | |
chanh xanh | Màu xanh lợt | #00FF00 | |
Bỏ rơi | Đỏ sẫm | #800000 | |
Hải quân | Xanh đậm | #000080 | |
Ôliu | Ôliu | #808000 | |
màu tím | Màu tím đậm | #800080 | |
màu đỏ | Màu đỏ | #FF0000 | |
bạc | Xám nhạt | #C0C0C0 | |
màu xanh mòng két | Xanh lam | #008080 | |
trắng | Trắng | #FFFFFF | |
màu vàng | Màu vàng | #FFFF00 |
Việc bạn chỉ định màu theo tên của nó hay bằng cách sử dụng số thập lục phân không quan trọng. Những phương pháp này có tác dụng như nhau. Ví dụ 6.1 cho thấy cách đặt màu nền và màu văn bản của trang web.
Ví dụ 6.1. Màu nền và văn bản
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 .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ã 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 |