Hàm màu CSS năm 2023 - Mọi thứ bạn cần biết để bắt đầu

Xin chào, các nhà phát triển đồng nghiệp! Hôm nay, chúng ta sẽ đi sâu vào thế giới của các hàm màu CSS.

Bạn có thể đã sử dụng CSS để thay đổi màu của một thành phần trên trang web, nhưng bạn đã bao giờ nghe nói về các chức năng màu của CSS chưa? Nếu không, hãy thắt chặt dây an toàn vì bạn sắp học được điều gì đó mới và siêu hữu ích!

Hãy bắt đầu với một Trích dẫn tôi đã đọc ngày hôm qua trên TốtĐọc .

Màu sắc là bàn phím, đôi mắt là hòa âm, linh hồn là cây đàn piano nhiều dây. Người nghệ sĩ là bàn tay chơi đàn, chạm vào phím này hay phím khác để gây nên những rung động trong tâm hồn.

Chính xác thì các hàm màu CSS là gì?

Các hàm màu CSS là một cách để chỉ định màu trong CSS bằng cách sử dụng các hàm toán học thay vì chỉ một mã màu đơn giản.

Các chức năng cung cấp nhiều quyền kiểm soát và tính linh hoạt hơn đối với các màu được sử dụng trong biểu định kiểu của bạn.

Với các chức năng màu, bạn có thể điều chỉnh sắc độ , độ bão hòa , độ sáng và độ mờ của một màu và thậm chí trộn hai hoặc nhiều màu với nhau.

Có nhiều Hàm CSS có sẵn, hãy xem xét một số:

1. rgb() - Nó nhận ba giá trị, tương ứng là màu đỏ, xanh lá cây và xanh lam và trả về một màu. Các giá trị có thể nằm trong khoảng từ 0 đến 255. Ví dụ: color: rgb(255, 0, 0) dẫn đến màu đỏ.

   
   

2. rgba() - Tương tự như rgb() , nhưng nó cũng cho phép bạn đặt độ mờ của màu. Giá trị thứ tư, alpha, có thể nằm trong khoảng từ 0 đến 1. Ví dụ: color: rgba(255, 0, 0, 0.5) dẫn đến màu đỏ nửa trong suốt.

   
   

3. hsl() - Nó nhận ba giá trị, đại diện cho màu sắc, độ bão hòa và độ sáng và trả về một màu. Ví dụ: color: hsl(0, 100%, 50%) dẫn đến màu đỏ.

   
   

4. hsla() - Nó tương tự như hsl() , nhưng nó cũng cho phép bạn đặt độ mờ của màu. Ví dụ: color: hsla(0, 100%, 50%, 0.5) dẫn đến màu đỏ nửa trong suốt.

   
   

5. mix() - Nó cho phép bạn trộn hai màu với nhau, với tham số trọng lượng tùy chọn. Ví dụ: color: mix(red, blue) tạo ra màu tím.

Hãy cùng tìm hiểu chi tiết về chúng.

RGB()

Được rồi, hãy tiếp tục cuộc hành trình của chúng ta vào thế giới của các chức năng màu CSS và đi sâu vào chức năng RGB. Hàm RGB là một trong những hàm màu được sử dụng phổ biến nhất trong CSS và vì lý do chính đáng!

Thật dễ hiểu và cho phép bạn kiểm soát nhiều màu sắc bạn sử dụng trên trang web của mình.

Hàm RGB nhận ba giá trị, mỗi giá trị đại diện cho cường độ của

• màu đỏ,

• màu xanh lá cây và

• màu xanh tương ứng.

Các giá trị này có thể nằm trong khoảng từ 0 đến 255. Bằng cách trộn các cường độ khác nhau của đỏ, lục và lam, bạn có thể tạo bất kỳ màu nào mình thích.

Ví dụ:

• Đối với màu đỏ - rgb(255, 0, 0)

• Đối với màu xanh lục - rgb(0, 255, 0)

• Đối với màu xanh lam - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Được rồi, hãy chuyển sang một hàm màu hữu ích khác trong CSS - hàm HSL!

Hàm HSL tương tự như hàm RGB, nhưng thay vì sử dụng các giá trị cho màu đỏ, lục và lam, hàm này sử dụng các giá trị cho:

• màu sắc,

• bão hòa và

• sự nhẹ nhàng.

  
  

  Điều này làm cho nó dễ hiểu và dễ sử dụng hơn một chút, đặc biệt là đối với những người mới sử dụng lý thuyết màu sắc .

  
  

Giá trị màu sắc trong hàm HSL đại diện cho chính màu đó , với các giá trị nằm trong khoảng từ 0 đến 360.

• Giá trị sắc độ 0 đại diện cho màu đỏ, giá trị sắc độ 120 đại diện cho màu xanh lá cây và giá trị sắc thái 240 đại diện cho màu xanh lam.

  
  

• Giá trị bão hòa trong hàm HSL biểu thị cường độ của màu, với các giá trị nằm trong khoảng từ 0% đến 100%. Giá trị bão hòa 100% có nghĩa là màu được bão hòa hoàn toàn, trong khi giá trị 0% có nghĩa là màu xám.

  
  

• Giá trị độ sáng trong hàm HSL biểu thị độ sáng của màu, với các giá trị nằm trong khoảng từ 0% đến 100%. Giá trị độ sáng là 50% nghĩa là màu có màu xám trung tính , trong khi giá trị 100% nghĩa là màu hoàn toàn sáng và giá trị 0% nghĩa là màu hoàn toàn tối .

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

Được rồi mọi người, hãy nói về chức năng RGBA!

Chức năng RGBA giống như chức năng RGB nhưng có thêm một phần thưởng:

• nó cho phép bạn chỉ định độ mờ của một màu.

Điều này có thể hữu ích khi bạn muốn tạo hiệu ứng trong mờ cho các thành phần của mình, chẳng hạn như khi bạn muốn màu nền trong suốt một phần.

Hàm RGBA nhận bốn giá trị, ba giá trị đầu tiên là các giá trị đỏ, lục và lam giống như hàm RGB.

Giá trị thứ tư là giá trị alpha , đại diện cho độ mờ của màu và nằm trong khoảng từ 0 đến 1.

Giá trị 0 có nghĩa là màu hoàn toàn trong suốt, trong khi giá trị 1 có nghĩa là màu hoàn toàn mờ đục.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Được rồi mọi người, hãy nói về chức năng HSLA!

Hàm HSLA giống như hàm HSL, nhưng có thêm một phần thưởng: nó cho phép bạn chỉ định độ mờ của một màu.

Điều này có thể hữu ích khi bạn muốn tạo hiệu ứng trong mờ cho các thành phần của mình, chẳng hạn như khi bạn muốn màu nền trong suốt một phần.

Hàm HSLA nhận bốn giá trị, ba giá trị đầu tiên là giá trị màu sắc, độ bão hòa và độ sáng giống như hàm HSL.

Giá trị thứ tư là giá trị alpha, đại diện cho độ mờ của màu và nằm trong khoảng từ 0 đến 1.

Giá trị 0 có nghĩa là màu hoàn toàn trong suốt, trong khi giá trị 1 có nghĩa là màu hoàn toàn mờ đục.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

Tất cả đều giống nhau A có nghĩa là Alpha là chúng tôi (giá trị alpha là 0,75) cho hiệu ứng mờ trong cả hai chức năng, đơn giản.

Thuộc tính tùy chỉnh hoặc biến CSS

Bây giờ, hãy nói về các thuộc tính tùy chỉnh trong CSS, còn được gọi là các biến CSS. Thuộc tính tùy chỉnh cho phép bạn lưu trữ các giá trị mà bạn có thể sử dụng lại trong toàn bộ biểu định kiểu của mình, giúp duy trì kiểu của bạn dễ dàng hơn và làm cho mã của bạn hiệu quả hơn kiểu mô-đun và linh hoạt.

Để tạo một thuộc tính tùy chỉnh, bạn chỉ cần sử dụng cú pháp -- theo sau là tên thuộc tính, theo sau là một giá trị

 :root { --primary-color: blue; }

Ở đây, chúng tôi đã tạo một thuộc tính tùy chỉnh có tên --primary-color với giá trị là blue .

Bây giờ, để sử dụng thuộc tính tùy chỉnh này, bạn có thể sử dụng hàm var() trong bộ chọn CSS của mình.

 button { background-color: var(--primary-color); }

Đoạn mã trên đặt màu nền của tất cả các phần tử <button> thành màu xanh lam vì chúng tôi đang sử dụng thuộc tính tùy chỉnh --primary-color .

Nếu chúng ta muốn thay đổi giá trị của --primary-color , chúng ta chỉ cần thay đổi nó ở một nơi và nó sẽ tự động cập nhật trong suốt quá trình biểu định kiểu .

Ưu điểm của việc sử dụng thuộc tính tùy chỉnh bao gồm:

• Sử dụng lại mã : Thay vì lặp lại các giá trị trong toàn bộ biểu định kiểu của mình, bạn có thể lưu trữ các giá trị trong thuộc tính tùy chỉnh và sử dụng lại chúng khi cần.

• Khả năng duy trì : Thuộc tính tùy chỉnh giúp duy trì kiểu của bạn dễ dàng hơn vì bạn chỉ cần cập nhật giá trị ở một nơi.

• Tính linh hoạt : Các thuộc tính tùy chỉnh cho phép bạn thay đổi giao diện trang web của mình bằng cách thay đổi các giá trị ở một nơi thay vì thực hiện các thay đổi trong nhiều bộ chọn.

Các phương pháp hay nhất về chức năng màu CSS

Được rồi, hãy nói về các phương pháp hay nhất để sử dụng các hàm màu CSS trong dự án của bạn.

Những mẹo này sẽ giúp bạn tạo ra một trang nhất quán và hấp dẫn về mặt hình ảnh bảng màu cho trang web của bạn, cũng như đảm bảo rằng màu sắc của bạn có thể đọc được và có thể truy cập được đối với tất cả người dùng.

Tạo một bảng màu cho trang web của bạn:

Một trong những điều đầu tiên bạn nên làm khi làm việc với màu CSS là tạo bảng màu cho trang web của mình. Điều này có thể đơn giản như chọn một vài màu mà bạn thích và kết hợp tốt với nhau.

Bạn có thể sử dụng các hàm RGB, HSL, RGBA hoặc HSLA để xác định màu của mình.

Một nơi tốt để bắt đầu là chọn một màu chính, sau đó chọn 2-3 màu nhấn để bổ sung cho nó.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Sử dụng các hàm màu CSS cho độ tương phản và phân cấp:

Điều quan trọng là sử dụng màu sắc để tạo độ tương phản và phân cấp trong thiết kế của bạn. Ví dụ: bạn có thể sử dụng màu sáng hơn cho nền và màu tối hơn cho văn bản để đảm bảo dễ đọc.

Bạn cũng có thể sử dụng màu để thu hút sự chú ý đến các yếu tố cụ thể, chẳng hạn như các nút hoặc liên kết.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Kiểm tra chức năng màu cho khả năng đọc và khả năng truy cập:

Cuối cùng, điều quan trọng là kiểm tra màu sắc của bạn về khả năng đọc và khả năng tiếp cận. Đảm bảo màu sắc của bạn có đủ độ tương phản để có thể dễ dàng đọc được, đặc biệt đối với người dùng bị khiếm thị về màu sắc.

Bạn có thể sử dụng các công cụ trực tuyến để kiểm tra độ tương phản của màu sắc và đảm bảo chúng đáp ứng các tiêu chuẩn trợ năng.

• Trình kiểm tra độ tương phản WebAIM

• Trình tạo bảng màu Muzli

• Experte - Trình kiểm tra độ tương phản

• máy làm mát - Palettes Generator

• Trình tạo bảng màu Canva

Hàm màu CSS Kỹ thuật nâng cao

Trong phần này, chúng ta sẽ đi sâu vào một số kỹ thuật nâng cao với các chức năng màu của CSS.

Sử dụng các biến CSS cho lược đồ màu động

Bạn đã bao giờ muốn thay đổi bảng màu trang web của mình chỉ bằng một vài dòng mã chưa? Với các biến CSS, còn được gọi là thuộc tính tùy chỉnh, bạn có thể!

Bạn có thể tạo một tập hợp các biến để lưu trữ bảng màu của mình và sau đó sử dụng chúng trong toàn bộ biểu định kiểu của mình.

Bằng cách này, nếu bạn muốn thay đổi bảng màu của mình, bạn chỉ phải cập nhật các giá trị trong các biến của mình.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

Trong ví dụ này, chúng tôi đã tạo hai thuộc tính tùy chỉnh cho màu chính và màu phụ của mình. Sau đó, chúng tôi đã sử dụng chúng để tạo kiểu cho các phần tử h1 và button của mình.

Tạo hoạt ảnh với các hàm màu CSS

Một trong những điều thú vị bạn có thể làm với các hàm màu CSS là tạo hiệu ứng cho chúng! Bạn có thể tạo chuyển tiếp mượt mà giữa các màu để thêm tính năng động cho trang web của mình. Ví dụ: bạn có thể làm cho một nút thay đổi màu khi người dùng di chuột qua nút đó.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Ở đây, chúng tôi đặt màu nền mặc định của nút thành màu xanh lá cây ( hsl(120, 100%, 50%) và thêm hiệu ứng chuyển tiếp để làm cho màu thay đổi mượt mà khi nút được di chuột qua.

Chúng tôi đã thay đổi màu thành màu xanh lam ( hsl(240, 100%, 50%) ) cho trạng thái di chuột.

Sử dụng Hàm màu CSS cho Độ dốc và Độ trong suốt

Một điều thú vị khác mà bạn có thể làm với các hàm màu CSS là tạo độ dốc và độ trong suốt. Bạn có thể sử dụng các hàm màu RGBA và HSLA để tạo các màu bán trong suốt, sau đó kết hợp chúng để tạo các dải màu.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Ở đây, chúng tôi đã tạo một dải màu tuyến tính chuyển từ màu RGBA đỏ sang màu HSLA xanh lục. Cả hai màu đều có giá trị alpha là 0,5, khiến chúng trở nên bán trong suốt.

Và bạn có nó rồi đấy!

Một số kỹ thuật nâng cao với hàm màu CSS. Hãy vui vẻ khi thử nghiệm những kỹ thuật này và để khả năng sáng tạo của bạn được phát huy!

Tài nguyên

• caniuse.com [Bảng hỗ trợ cho HTML5, CSS3]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Phần kết luận

Tóm lại, tôi hy vọng phần giới thiệu này hữu ích trong việc giúp bạn bắt đầu với các hàm màu CSS và các thuộc tính tùy chỉnh.

Đây là những công cụ mạnh mẽ có thể làm cho mã CSS của bạn linh hoạt hơn, dễ bảo trì hơn và dễ làm việc hơn. Chúc mừng mã hóa!