4 cách để xác định màu sắc trong CSS

Bài học chính

Việc sử dụng tên màu được xác định trước là một cách tiếp cận thuận tiện do Cascading Style Sheets (CSS) cung cấp cho người dùng mới làm quen với 145 màu có sẵn để lựa chọn. Tuy nhiên, phương pháp này đưa ra một số hạn chế nhất định có thể không đáp ứng được các yêu cầu phức tạp của các dự án thiết kế tiên tiến.

Mã màu thập lục phân cung cấp nhiều khả năng về màu sắc cũng như các tùy chỉnh rất cụ thể, mặc dù phải trả giá bằng việc điều hướng và thu hồi khó khăn hơn so với các hệ thống ký hiệu màu khác.

RGB và RGBA là hai phương pháp thể hiện màu sắc khác nhau trong phương tiện kỹ thuật số. Trong khi RGB cung cấp khả năng kiểm soát bằng số đối với độ chính xác của màu, RGBA cũng bao gồm kênh alpha cho phép điều chỉnh độ trong suốt. Điều quan trọng là phải đảm bảo rằng các bảng màu được sử dụng trong các sản phẩm kỹ thuật số có thể truy cập được và tuân thủ các phương pháp hay nhất để phù hợp với sở thích hoặc người dùng khiếm thị.

Việc sử dụng màu sắc thông qua CSS rất phổ biến trong quá trình phát triển web, vì chúng ảnh hưởng đáng kể đến tính thẩm mỹ và không gian của trang web đồng thời ảnh hưởng đến khả năng sử dụng tổng thể của nó. Một loạt các màu sắc có thể được chọn từ CSS, phục vụ cho tầm nhìn sáng tạo đa dạng và sở thích cá nhân.

Mặc dù tác động của định nghĩa màu sắc trên trang web có thể không rõ ràng ngay lập tức, nhưng các lựa chọn được thực hiện liên quan đến việc triển khai nó có thể ảnh hưởng lớn đến hình thức trực quan tổng thể và tính thẩm mỹ của trang web. Sự hiểu biết toàn diện về các phương pháp khác nhau và kỹ thuật thực tế để áp dụng và kết hợp các phương pháp này là điều cần thiết trong việc tạo ra các thiết kế web ấn tượng về mặt hình ảnh.

Sử dụng tên màu

CSS cung cấp một phương pháp hiệu quả để xác định màu sắc bằng cách sử dụng danh pháp, với sự lựa chọn toàn diện gồm 145 màu tùy ý sử dụng. Quang phổ này bao gồm các ký hiệu cơ bản như “đỏ”, “xanh lục” và “xanh lam” cho đến các sắc thái tinh tế hơn bao gồm “san hô” hoặc “hoa oải hương”.

Việc sử dụng các màu sắc được chỉ định thể hiện một quy trình đơn giản trong đó người ta chọn một ký hiệu màu chẳng hạn như “đỏ” và kết hợp nó trong thuộc tính CSS thừa nhận các thông số giá trị màu. Các thuộc tính bao gồm này liên quan đến những thuộc tính rõ ràng, chẳng hạn như “màu” và “màu nền”, nhưng cũng bao gồm các lựa chọn thay thế như “màu viền”, “màu đường viền” và “bóng văn bản”.

Việc sử dụng tên màu có thể thuận lợi trong các tình huống cần có màu sắc tạm thời, chẳng hạn như trong giai đoạn đầu phát triển nguyên mẫu hoặc khi cố gắng duy trì mã dễ đọc. Cú pháp áp dụng như sau:

 color_property: color_name;

Trong trường hợp này, chỉ cần thay thế placeholdercolor\_name bằng màu sắc cụ thể mà bạn muốn áp dụng. Để minh họa, nếu người ta tìm cách chỉ định màu sắc nội dung văn bản của một đoạn văn bị xé, thì biểu thức sẽ như sau:

 p {
  color: red;
} 

Thật vậy, bằng cách sử dụng phương pháp này, người ta có thể thấm nhuần vào văn xuôi của họ một sắc thái đặc biệt khiến nó khác biệt với môi trường xung quanh.

Ưu điểm của việc sử dụng chữ viết tắt Emmet bao gồm tính dễ hiểu trong mã CSS, vì chúng phục vụ cho cả người mới bắt đầu cũng như người dùng nâng cao. Ngoài ra, những chữ viết tắt này hoạt động liền mạch trên nhiều trình duyệt web khác nhau và đóng vai trò như một công cụ thiết thực để tạo ra các khái niệm thiết kế một cách nhanh chóng.

Những nhược điểm của việc sử dụng các công cụ chọn màu dựa trên web bao gồm thiếu các tùy chọn màu toàn diện có thể cản trở sự thể hiện nghệ thuật cũng như những thiếu sót tiềm ẩn trong việc tuân thủ các tiêu chuẩn trợ năng và khả năng tương thích không nhất quán với công nghệ lỗi thời.

Mã màu thập lục phân

Mã màu thập lục phân, thường được gọi là “mã hex”, đóng vai trò là phương tiện phổ biến để phân định màu sắc trong lĩnh vực thiết kế web. Được xây dựng từ các nhóm sáu ký tự bao gồm các chữ số và ký tự chữ cái trong phạm vi 0-9, A-F, các mã này thể hiện thành phần tỷ lệ của các phần tử màu đỏ, lục và lam (RGB) góp phần tạo nên diện mạo tổng thể của một màu nhất định.

Việc sử dụng các mã màu này có thể gây ra một số vấn đề phức tạp nhất định đòi hỏi phải hiểu rõ các nguyên tắc cơ bản của chúng. Đối với những người muốn tìm hiểu sâu hơn, việc khám phá các giá trị thập lục phân sẽ mang lại những hiểu biết có giá trị. Để minh họa, hãy xem xét ứng dụng sau của mã hex trong CSS:

 color: #RRGGBB;

Trong lược đồ này, các thành phần tương ứng của màu đỏ, lục và lam được ký hiệu là RR, GG và BB. Các thành phần này có phạm vi có thể kéo dài từ 00, biểu thị không có cường độ, đến FF, biểu thị cường độ tối đa. Để minh họa, để chỉ định màu sắc của tiêu đề trang web bằng một màu xanh lam cụ thể, người ta có thể sử dụng mã hex như sau:

 header {
  background-color: #336699;
}

Điều này sẽ tạo ra một màu xanh đậm:

€‹€‹€‹€‹€‹

Người ta có thể sử dụng một từ viết tắt bao gồm hai ký tự lặp lại cho mỗi phần tử, như được minh họa trong ví dụ sau:

 header {
  background-color: #369;
} 

Mã màu thập lục phân cung cấp nhiều màu sắc khác nhau, cho phép tạo ra các sắc thái phức tạp và phù hợp một cách dễ dàng. Các mã này cho phép thao tác liền mạch các tùy chọn màu sắc, khiến chúng rất phù hợp với các yêu cầu kỹ thuật thiết kế khắt khe.

Mặc dù mã hex có tiềm năng nhưng sự xa lạ của chúng so với các màu sắc được đặt tên có thể gây ra trở ngại. Hơn nữa, việc lưu giữ các bộ nhớ giá trị màu chính xác có thể tỏ ra cồng kềnh. Tuy nhiên, các tài nguyên tạo điều kiện thuận lợi cho việc định vị các sắc thái thập lục phân đều có thể truy cập được, do đó giảm thiểu những vấn đề này ở một mức độ nào đó.

Giá trị màu RGB và RGBA

Hệ thống này cho phép người ta chỉ định màu sắc thông qua các thành phần màu đỏ, xanh lá cây và xanh lam của chúng, trong khi ngược lại, nó sử dụng các giá trị số dễ tiếp cận hơn so với mã thập lục phân.

Giá trị màu RGB

Sử dụng các giá trị màu RGB là một kỹ thuật phổ biến trong khung Cascading Style Sheets (CSS) để chỉ định màu sắc. Chữ viết tắt “RGB” biểu thị các màu cơ bản là đỏ, lục và lam, được sắp xếp trong dấu ngoặc đơn sau từ viết tắt. Trong các ranh giới dấu ngoặc đơn này, người ta có thể chỉ định các giá trị số tương ứng với cường độ tương đối của từng kênh màu tương ứng, trải rộng toàn bộ phạm vi kéo dài từ 0 đến

Đây là cú pháp:

 rgb(red_value, green_value, blue_value);

Để gán các giá trị số cụ thể cho các phần tử màu được biểu thị bằng “red\_value”, “green\_value” và “blue\_value” trong một ngữ cảnh nhất định, người ta có thể tham khảo các mô hình màu đã được thiết lập như RGB hoặc HSL, trong đó mỗi giá trị đại diện cho một khía cạnh khác nhau của phổ màu (ví dụ: cường độ, màu sắc hoặc độ bão hòa). Bằng cách thay thế các giá trị này trong các tham số thích hợp, có thể tạo ra các sắc thái và tông màu khác nhau, bao gồm các tùy chọn sắc độ (trắng), sắc độ (đen) và đơn sắc (một màu), tương tự như cách trình bày trực quan được hiển thị ở đây.

Việc đạt được độ sáng tối đa cho từng kênh màu đỏ, lục và lam, có khả năng thể hiện các giá trị trong khoảng từ 0 đến 255, đạt được khi cả ba kênh được gán giá trị tối đa có thể tương ứng là 255. Sự kết hợp này mang lại màu sắc đặc biệt trực quan được gọi là màu trắng.

 .white-box {
 color: rgb(255, 255, 255);
}

Việc thiếu hoàn toàn bất kỳ sắc thái nào trong các thành phần màu đỏ, lục và lam của một hình ảnh nhất định được biểu thị bằng cách đặt từng kênh màu riêng lẻ về giá trị thấp nhất có thể bằng 0, sau đó tạo ra hiện tượng đen trên toàn bộ quang phổ thị giác.

 .black-box {
  color: rgb(0, 0, 0);
}

Việc điều chỉnh thành phần màu đỏ trong hình ảnh thành giá trị cao nhất có thể là 255 và duy trì giá trị 0 cho tất cả các thành phần khác sẽ tạo ra màu đỏ rực rỡ:

 .red-box {
  color: rgb(255, 0, 0);
 }

Giá trị màu RGBA

RGBA và RGB có chức năng tương tự nhau, với điểm khác biệt chính là sự kết hợp của kênh alpha bổ sung trong RGBA. Chữ “A” này trong RGBA biểu thị giá trị alpha, giá trị này quy định mức độ trong mờ hoặc mờ đục liên quan đến màu sắc đã chọn. Giá trị alpha bằng 0 biểu thị độ trong suốt hoàn toàn, làm cho màu bị ẩn hoàn toàn, trong khi giá trị alpha bằng 1 tượng trưng cho độ mờ tuyệt đối, dẫn đến màu sắc hoàn toàn hiển thị.

RGBA cung cấp một phương tiện linh hoạt để tạo ra các phần tử trực quan thể hiện nhiều mức độ trong suốt khác nhau, bao gồm phông nền mờ và kiểu chữ mềm mại. Biểu thức hoàn chỉnh bao gồm bốn thành phần:

 color: rgba(red_value, green_value, blue_value, alpha_value);

Trong ngữ cảnh này, các biến được biểu thị bằng red\_value, green\_value và blue\_value liên quan đến các kênh màu tương ứng trong không gian màu RGB, trong khi alpha\_value biểu thị mức độ mờ được liên kết với màu cụ thể đó.

 div {
  background-color: rgba(0, 128, 0, 0.5);
}

Hình minh họa nói trên chứng minh rằng hệ số alpha 0,5 mang lại màu xanh lục với mức độ trong mờ là 50%, do đó cho phép cảm nhận được chất cơ bản.

RGB và RGBA mang lại độ chính xác cao trong việc lựa chọn màu sắc, tạo điều kiện thuận lợi cho việc tạo ra các thiết kế hình ảnh quyến rũ. Ngoài ra, khả năng tương thích của chúng trên nhiều trình duyệt web đảm bảo rằng màu sắc mong muốn vẫn nhất quán trên các nền tảng khác nhau.

Việc giải quyết sự phức tạp của việc tạo ra các thiết kế toàn diện và hấp dẫn về mặt hình ảnh trong khi vẫn tuân thủ các tiêu chuẩn về khả năng tiếp cận có thể là một nhiệm vụ khó khăn. Một thách thức cụ thể nảy sinh từ nhu cầu duy trì mức độ tương phản thích hợp giữa các phần tử nền trước và nền sau, đặc biệt khi sử dụng độ trong suốt thông qua các giá trị RGBA. May mắn thay, Nguyên tắc truy cập nội dung web (WCAG) cung cấp một khuôn khổ có giá trị để hướng dẫn các nhà phát triển và nhà thiết kế hướng tới các phương pháp thực hành toàn diện hơn bằng cách đưa ra các đề xuất về cách tạo nội dung trực quan hiệu quả và dễ tiếp cận.

Giá trị màu HSL và HSLA

HSL là một hàm CSS dùng để xác định màu sắc bằng cách sử dụng các giá trị số để biểu thị màu sắc, độ bão hòa và độ sáng. Tương tự như RGB, HSL sử dụng các biểu diễn số đặc biệt của các thuộc tính màu này, có thể được nhận biết thông qua giao diện người dùng trong các ứng dụng thiết kế hoặc các ngữ cảnh khác.

Màu sắc đề cập đến màu quang phổ thuần khiết phát sinh từ sự kết hợp của ánh sáng ở bước sóng hoặc tần số cụ thể, thường được đo bằng độ dọc theo quang phổ tròn, với 0 và 360 độ tương ứng với màu đỏ, 120 độ với màu xanh lục và 240 độ với màu xanh lam. Nó thường được hình dung như một điểm trên vòng tròn, trong đó mỗi độ tương ứng với một màu sắc riêng biệt trên bánh xe màu.

Mức độ bão hòa ảnh hưởng đến độ phong phú và độ sâu của màu sắc, từ thang độ xám mờ ở mức 0 phần trăm đến màu sắc rực rỡ và mãnh liệt ở mức một trăm phần trăm.

Khái niệm độ sáng liên quan đến độ chói hoặc cường độ của màu sắc liên quan đến vị trí của nó dọc theo dải liên tục từ bóng tối hoàn toàn (màu đen) đến độ sáng tối đa (màu trắng). Với mức độ sáng là 50%, một màu được coi là trung tính, trong khi giá trị nhỏ hơn 50% sẽ tạo ra bóng tối hơn và những giá trị lớn hơn 50% sẽ tạo ra bóng sáng hơn.

Ngoài HSL, đại diện cho các giá trị màu sắc, độ bão hòa và độ sáng, còn tồn tại một không gian màu khác được gọi là HSLA (biểu diễn thập lục phân của màu sắc, độ bão hòa, độ sáng và alpha). Chữ “A” trong trường hợp này tương ứng với “alpha”, tương tự như chữ “A” được tìm thấy trong các biểu diễn RGBA biểu thị mức độ trong suốt.

Đây là cú pháp:

 color: hsl(hue_value, saturation_percentage, lightness_percentage);

Theo cách tinh tế hơn, để chỉ định các giá trị cụ thể cho từng phần tử trong cấu trúc nhất định, hãy thay thế các biến hue\_value, saturation\_percentage và lightness\_percentage bằng các giá trị mong muốn. Để minh họa, hãy xem xét đoạn mã sau:

 div {
  background-color: hsl(120, 100%, 50%);
}

Ví dụ hiện tại trình bày cách sử dụng các giá trị HSL để thiết lập màu sắc sống động của một thành phần, với 120 biểu thị màu sắc theo độ (liên quan đến màu xanh lá cây), 100% tương ứng với độ bão hòa tối đa và 50% đặt độ sáng ở trạng thái chiếu sáng đồng đều.

HSL và HSLA cung cấp các phép tính màu linh hoạt thông qua các thuộc tính tùy chỉnh CSS, giúp chúng phù hợp với nhiều ứng dụng trong phát triển web hiện đại. Ngoài ra, khả năng tương thích của chúng với các trình duyệt hiện đại đảm bảo tích hợp liền mạch, đồng thời cho phép sửa đổi độ sáng của màu sắc một cách dễ dàng.

Hạn chế của việc sử dụng HSL là nó đòi hỏi sự hiểu biết về lý thuyết màu sắc, bao gồm các khái niệm như màu sắc và độ bão hòa, có thể phức tạp hơn so với hệ thống RGB thường được biết đến.

Tận dụng sức mạnh của màu sắc CSS

Khi đi sâu vào các kỹ thuật khác nhau để chỉ định màu sắc trong CSS, điều cần thiết là phải nhớ rằng kỹ thuật này có khả năng tạo ra ảnh hưởng đáng kể đến sự hấp dẫn trực quan, bầu không khí và sự tương tác tổng thể của người dùng đối với thuộc tính web của họ.

Việc lựa chọn cách thể hiện màu sắc-bao gồm các màu cơ bản, giá trị thập lục phân, bố cục RGB hoặc công thức HSL-có thể ảnh hưởng đáng kể đến nhận thức của khán giả về trang web. Vì vậy, điều quan trọng là phải khám phá, tìm hiểu và xác định cách thể hiện màu sắc phù hợp nhất phù hợp với mục tiêu thiết kế của mình.