Màu sắc trong kiểu có thể được chỉ định theo nhiều cách khác nhau: theo giá trị thập lục phân, theo tên, ở định dạng RGB, RGBA, HSL, HSLA. Màu sắc trong kiểu có thể được chỉ định theo nhiều cách khác nhau: theo giá trị thập lục phân, theo tên, ở định dạng RGB, RGBA, HSL, HSLA

Có một số cách để thể hiện màu sắc trong thiết kế web.

HEX là hệ thống biểu diễn màu thập lục phân dựa trên cơ sở 16. Đối với hệ thống này, các chữ số thập phân Ả Rập từ 0 đến 9 và các chữ cái Latinh từ A đến F được sử dụng để bổ sung cho số kỹ thuật số đến 16. Đối với thiết kế web, 16 màu chính (chính) được sử dụng, cái gọi là mã màu thập lục phân #RRGGBB, trong đó mỗi cặp chịu trách nhiệm về phần màu của nó: RR – đỏ, GG – xanh lục và BB – xanh lam. Mỗi phần màu nằm trong khoảng từ 00 đến FF.

Hai cách thể hiện màu sắc khác trong thiết kế web là: ở dạng RGB(*,*,*), trong đó mỗi phần “*” của một màu được biểu thị bằng các chữ số thập phân từ 0 đến 255 và theo tên màu bằng tiếng Anh.

Khi tạo hình ảnh màu, vấn đề chính là tái tạo chính xác màu sắc trên các loại máy tính, màn hình và trình duyệt khác nhau. Nếu trình duyệt không thể hiển thị màu chính xác, trình duyệt sẽ chọn một màu tương tự hoặc trộn nhiều màu. Và đôi khi nó có thể được thay thế bằng một số màu hoàn toàn khác.

Bàn 16 màu cơ bản, được sử dụng trong tất cả các trình duyệt

Bàn màu tím màu sắc và sắc thái của nó

Bàn xám màu sắc và sắc thái của nó

Trong HTML, màu sắc có thể được chỉ định theo ba cách:

Đặt màu trong HTML theo tên của nó

Một số màu có thể được chỉ định theo tên của chúng, sử dụng tên màu bằng tiếng Anh làm giá trị. Các từ khóa phổ biến nhất: đen, trắng, đỏ, xanh lá cây, xanh dương, v.v.:

Màu văn bản – đỏ

Các màu phổ biến nhất của tiêu chuẩn World Wide Web Consortium (W3C):

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

Ví dụ: chỉ định màu theo tên của nó

• Hãy tự mình thử xem"

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

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

Tiêu đề trên nền vôi

Chữ trắng trên nền xanh

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

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

Tiêu đề trên nền vôi

Chữ trắng trên nền xanh

Chỉ định màu bằng RGB

Khi hiển thị các màu khác nhau trên màn hình, bảng màu RGB được sử dụng làm cơ sở. Bất kỳ màu nào có được bằng cách trộn ba màu cơ bản: R - đỏ, G - xanh, B - màu xanh. Độ sáng của mỗi màu được cung cấp bởi một byte và do đó có thể lấy các giá trị từ 0 đến 255. Ví dụ: RGB(255,0,0) được hiển thị dưới dạng màu đỏ vì màu đỏ được đặt ở giá trị cao nhất (255) và phần còn lại được đặt thành 0 Bạn cũng có thể đặt màu theo phần trăm. Mỗi thông số cho biết mức độ sáng của màu tương ứng. Ví dụ: các giá trị rgb(127, 255, 127) và rgb(50%, 100%, 50%) sẽ đặt cùng màu xanh lục trung bình:

Ví dụ: Chỉ định màu bằng RGB

• Hãy tự mình thử xem"

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Đặt màu theo giá trị thập lục phân

Giá trị R G B cũng có thể được chỉ định bằng cách sử dụng các giá trị màu thập lục phân (HEX) ở dạng: #RRGGBB trong đó RR (đỏ), GG (xanh lục) và BB (xanh lam) là các giá trị thập lục phân từ 00 đến FF (giống như số thập phân 0-255 ) . Hệ thập lục phân, không giống như hệ thập phân, dựa trên số 16, như tên gọi của nó. Hệ thập lục phân sử dụng các ký hiệu sau: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ở đây 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 biểu diễn bằng cách kết hợp hai ký tự thành một giá trị. Ví dụ: số cao nhất 255 ở dạng thập phân tương ứng với giá trị FF cao nhất ở dạng thập lục phân. Không giống như hệ thập phân, số thập lục phân được bắt đầu bằng ký hiệu băm. # , ví dụ: #FF0000 được hiển thị là màu đỏ vì màu đỏ được đặt ở giá trị cao nhất (FF) và các màu còn lại được đặt ở giá trị tối thiểu (00). Dấu hiệu sau ký hiệu băm # Bạn có thể gõ cả chữ hoa và chữ thường. Hệ thập lục phân cho phép bạn sử dụng dạng viết tắt #rgb, trong đó mỗi ký tự tương đương với double. Vì vậy, mục #f7O nên được coi là #ff7700.

Ví dụ: Màu HEX

• Hãy tự mình thử xem"

màu đỏ: #FF0000

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

màu xanh: #0000FF

màu đỏ: #FF0000

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

màu xanh: #0000FF

đỏ+xanh=vàng: #FFFF00

đỏ+xanh=tím: #FF00FF

xanh lá cây+xanh dương=lục lam: #00FFFF

Danh sách các màu phổ biến (tên, HEX và RGB):

Mã màu (nền) theo độ bão hòa và màu sắc.

Các giá trị chi tiết của mô-đun màu CSS cho phép tác giả xác định màu sắc và độ mờ của các phần tử html, cũng như các giá trị của thuộc tính màu.

thuộc tính màu sắc

1. Màu ưu tiên: thuộc tính màu

Thuộc tính chỉ định màu phông chữ bằng cách sử dụng các hệ thống hiển thị màu khác nhau. Thuộc tính mô tả màu sắc của nội dung văn bản của phần tử. Ngoài ra, nó được sử dụng để cung cấp giá trị gián tiếp tiềm năng (currentColor) cho bất kỳ thuộc tính nào khác chấp nhận giá trị màu.

Tài sản được thừa kế.

2. Giá trị màu

2.1. Từ khóa chính

Danh sách từ khóa chính bao gồm các ý nghĩa sau:

Tên màu không phân biệt chữ hoa chữ thường.

Cú pháp

Màu xanh;

2.2. Giá trị màu số

2.2.1. Màu sắc mô hình RGB

Định dạng thập lục phân của giá trị RGB là dấu # theo sau là ba hoặc sáu ký tự thập lục phân. Ký hiệu RGB gồm ba chữ số #rgb được chuyển đổi thành dạng sáu chữ số #rrggbb bằng cách sao chép các chữ số thay vì thêm số không. Ví dụ: #fb0 mở rộng thành #ffbb00 . Điều này đảm bảo rằng #ffffff màu trắng có thể được chỉ định trong mục nhập #fff ngắn và loại bỏ mọi phụ thuộc vào độ sâu màu hiển thị.

Định dạng của giá trị RGB trong ký hiệu hàm là rgb(theo sau là danh sách ba giá trị số được phân tách bằng dấu phẩy (ba giá trị số nguyên hoặc ba giá trị phần trăm) theo sau là ký hiệu). Giá trị nguyên 255 tương ứng với 100% và F hoặc FF theo ký hiệu thập lục phân:

Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF

Ký tự khoảng trắng được phép xung quanh các giá trị số.

Bảng (bảng màu) màu html mang đến cho bạn cơ hội để độc lập lựa chọn giai điệu bạn cần. Giá trị màu được hiển thị ở ba định dạng: Hex, RGB và HSV.

• Hex bao gồm ba giá trị hai ký tự trong hệ thống số thập lục phân. Ví dụ: #ff00b3, trong đó cặp số đầu tiên có màu đỏ, số thứ hai có màu xanh lá cây và số thứ ba có màu xanh lam.
• RGB (RedGreenBlue) có dạng "200.100.255", biểu thị lượng tông màu tương ứng (đỏ, lục, lam) trong màu thu được.
• HSV (Hue, Saturation, Value - tông màu, độ bão hòa, giá trị) - mô hình màu trong đó tọa độ là:
  • Hue - tông màu, có thể thay đổi từ 0° đến 360°.
  • Độ bão hòa - độ bão hòa, thay đổi từ 0-100 hoặc 0-1. Thông số này càng cao thì màu càng “tinh khiết”, đó là lý do tại sao thông số này đôi khi được gọi là độ tinh khiết của màu. Và thông số này càng gần 0 thì màu càng gần với màu xám trung tính.
  • Giá trị (giá trị màu) - đặt độ sáng, giá trị cũng có thể thay đổi trong khoảng 0-100 hoặc 0-1.

Nhập mã màu: ĐI

Danh sách màu sắc kèm theo tên

Bảng liệt kê tên màu tiếng Anh (có thể được sử dụng làm giá trị) được hỗ trợ bởi tất cả các trình duyệt và giá trị thập lục phân của chúng. Tất cả các màu được liệt kê đều “an toàn”, nghĩa là chúng sẽ xuất hiện giống nhau trong tất cả các trình duyệt.

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 đỏ của 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 nhạt 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