Cách sử dụng rgb trong css

Cách đầu tiên và dễ nhất để chỉ định màu là sử dụng một trong 140 từ khóa màu được xác định trước được chỉ định trong CSS

17 bản gốc được liệt kê dưới đây. Một đám khó coi

MàuTừ khóaGiá trị hexđen#000000xám#808080bạc#c0c0c0white#ffffffmaroon#800000đỏ#ff0000purple#800080fuchsia#ff00ffgreen#008000ColorKeywordHex Valuelime#00ff00olive#808000yellow#ffff00navy#000080blue#00#00ff080#00ff00a50affrange

Rõ ràng hầu hết các màu này không phù hợp với thiết kế web thông thường. Từ khóa màu hữu ích nhất cho mục đích thử nghiệm và trình diễn (như trong các trang này)

Tất cả 140 từ khóa màu được liệt kê ở đây theo thứ tự bảng chữ cái. Bạn cũng có thể tìm thấy nhiều danh sách hữu ích hơn tại các trang web này

Bạn cũng có thể xem bản in của tất cả các mẫu màu ở trang 304-305 trong Học Thiết Kế Web

Giá trị màu RGB

Hầu hết các bạn có thể đã nghe nói về các giá trị CMYK cho thiết kế in ấn. RGB, viết tắt của màu đỏ, xanh lá cây và xanh dương là mô hình màu mà màn hình sử dụng. Vì trong thiết kế web, chúng tôi chủ yếu quan tâm đến việc các trang web trông như thế nào trên màn hình, nên RGB là mô hình màu chúng tôi sử dụng

• Màu RGB có ba giá trị đại diện cho. đỏ, xanh lá cây và xanh dương
• Mỗi giá trị có thể là một số từ 0 đến 255 hoặc tỷ lệ phần trăm từ 0 đến

  p { color: rgb(0, 0, 0); }              /* black */
  h1 { color: rgb(255, 255, 255); }       /* white */
  ul { color: rgb(128, 80, 200); }        /* purple */
  
  /* Percentages work too */
  h1 { color: rgb(100%, 100%, 100%); }    /* white */

  1
• Giá trị của 0 có nghĩa là không có màu nào trong số đó đang được sử dụng
• Giá trị của 255 hoặc

  p { color: rgb(0, 0, 0); }              /* black */
  h1 { color: rgb(255, 255, 255); }       /* white */
  ul { color: rgb(128, 80, 200); }        /* purple */
  
  /* Percentages work too */
  h1 { color: rgb(100%, 100%, 100%); }    /* white */

  1 có nghĩa là tất cả màu đó đang được sử dụng
• Một 0 cho cả ba giá trị màu sẽ có màu đen
• Một 255 hoặc

  p { color: rgb(0, 0, 0); }              /* black */
  h1 { color: rgb(255, 255, 255); }       /* white */
  ul { color: rgb(128, 80, 200); }        /* purple */
  
  /* Percentages work too */
  h1 { color: rgb(100%, 100%, 100%); }    /* white */

  1 cho cả ba giá trị màu sẽ có màu trắng

Cú pháp CSS để sử dụng màu RGB hơi khác một chút so với những gì chúng ta đã thấy trước đây. Trong ví dụ dưới đây, chúng tôi đang tạo kiểu

• Một đoạn màu đen
• H1 màu trắng
• Một danh sách không có thứ tự màu tím

p { color: rgb(0, 0, 0); }              /* black */
h1 { color: rgb(255, 255, 255); }       /* white */
ul { color: rgb(128, 80, 200); }        /* purple */

/* Percentages work too */
h1 { color: rgb(100%, 100%, 100%); }    /* white */

Giá trị màu RGBA

RGBA là tất cả các cơn thịnh nộ

Nghiêm túc mà nói, nó giống như RGB, ngoại trừ việc bổ sung giá trị thứ tư. kênh alpha

Giá trị alpha biểu thị mức độ trong suốt mà màu rgb nên có. Nó có thể là một giá trị từ 0 đến

p { color: rgb(0, 0, 0); }              /* black */
h1 { color: rgb(255, 255, 255); }       /* white */
ul { color: rgb(128, 80, 200); }        /* purple */

/* Percentages work too */
h1 { color: rgb(100%, 100%, 100%); }    /* white */

6 hoặc tỷ lệ phần trăm từ 0 đến

p { color: rgb(0, 0, 0); }              /* black */
h1 { color: rgb(255, 255, 255); }       /* white */
ul { color: rgb(128, 80, 200); }        /* purple */

/* Percentages work too */
h1 { color: rgb(100%, 100%, 100%); }    /* white */

1. Lưu ý rằng bạn phải chỉ định

p { color: rgb(0, 0, 0); }              /* black */
h1 { color: rgb(255, 255, 255); }       /* white */
ul { color: rgb(128, 80, 200); }        /* purple */

/* Percentages work too */
h1 { color: rgb(100%, 100%, 100%); }    /* white */

9 thay vì

h1 {
   background-color: hsla(240, 25%, 50%, .5);
}

0

HSL

Mô hình màu HSL là một trong những mô hình ít được sử dụng nhất, nhưng thu hút được sự chú ý vì có thể sử dụng trực quan hơn khi làm việc với các sắc thái và điều chỉnh màu sắc

HSL là viết tắt của. màu sắc, độ bão hòa và độ sáng

Huế

Hue được xác định bởi một bánh xe màu. Mỗi màu đại diện cho một mức độ trên bánh xe. Trang này hiển thị hình ảnh động đẹp mắt của bánh xe màu

bão hòa

Các hộp bên dưới thể hiện các mức độ bão hòa khác nhau (cường độ màu) cho sắc độ ở 240°. Giá trị độ sáng được đặt ở mức 50% cho mỗi hộp

nhẹ nhàng

Đây là cùng một sắc độ (240°) được hiển thị ở các mức độ đậm nhạt khác nhau với độ bão hòa 100%

Ví dụ lưới màu HSL

Lưới này hiển thị độ bão hòa và độ sáng khác nhau cùng nhau

HSLA

HSLA chỉ đơn giản là mô hình màu HSL có thêm kênh alpha. Điều này hoạt động chính xác giống như kênh alpha trong RGBA

h1 {
   background-color: hsla(240, 25%, 50%, .5);
}

Giá trị màu thập lục phân

Có lẽ cách phổ biến nhất (nhưng ít trực quan nhất) để chỉ định màu trong CSS là sử dụng các giá trị thập lục phân (hoặc hex) của chúng. Các giá trị hex thực ra chỉ là một cách khác để biểu diễn các giá trị RGB. Thay vì sử dụng ba số giữa 0 và 255, bạn sử dụng sáu số thập lục phân. Số hex có thể là

h1 {
   background-color: hsla(240, 25%, 50%, .5);
}

3 và

h1 {
   background-color: hsla(240, 25%, 50%, .5);
}

4. Các giá trị hex luôn có tiền tố là ký hiệu #

Dưới đây là một số quy tắc quy tắc CSS cơ bản sử dụng các giá trị hex

p { color: #000000; }     /* black */
h1 { color: #ffffff; }    /* white */
h1 { color: #aaaaaa; }    /* medium gray */
ul { color: #8050c8; }    /* purple */

Ký hiệu tốc ký cho các giá trị hex

Nếu cả hai chữ số của các giá trị màu đỏ, xanh lục và xanh dương đều giống nhau, bạn có thể sử dụng ký hiệu ba chữ số ngắn. Điều này được thể hiện rõ nhất bằng một ví dụ

Làm cách nào để tô màu với RGB trong CSS?

Số RGB được sử dụng trong CSS là gì?

Làm cách nào để sử dụng mã màu trong CSS?

4 cách để đặt màu trong CSS là gì?