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

Bài học chính

• Sử dụng tên màu: CSS cung cấp 145 tên màu để lựa chọn màu dễ dàng và thân thiện với người mới bắt đầu, nhưng các tùy chọn bị hạn chế và có thể không đáp ứng được nhu cầu thiết kế chính xác.
• Mã màu thập lục phân: Mã hex cung cấp nhiều tùy chọn màu sắc và tùy chỉnh chính xác, mặc dù chúng có thể kém trực quan hơn khi sử dụng và ghi nhớ.
• Giá trị màu RGB và RGBA: RGB cho phép kiểm soát màu chính xác bằng các giá trị số, trong khi RGBA tăng thêm độ trong suốt. Đảm bảo sự kết hợp màu sắc dễ tiếp cận là điều quan trọng.

Màu sắc là một trong những thuộc tính CSS được sử dụng phổ biến nhất, đóng vai trò quan trọng trong việc định hình nhận dạng hình ảnh, tâm trạng và trải nghiệm người dùng của trang web. CSS cung cấp một loạt các lựa chọn để sử dụng màu sắc, mỗi lựa chọn được điều chỉnh phù hợp với nhu cầu và sở thích thiết kế cụ thể.

Mặc dù bạn có thể dễ dàng bỏ qua tầm quan trọng của việc xác định màu sắc nhưng các lựa chọn của bạn có thể ảnh hưởng đáng kể đến giao diện trang web của bạn. Khám phá sự khác biệt giữa các phương pháp khác nhau cũng như cách áp dụng và kết hợp chúng trong thực tế sẽ nâng cao khả năng tạo các trang web hấp dẫn về mặt hình ảnh của bạn.

1. Sử dụng tên màu

CSS cung cấp một cách thuận tiện để xác định màu bằng cách sử dụng tên và có sẵn 145 tùy chọn. Những tên màu này bao gồm từ “đỏ”, “xanh lục” và “xanh lam” đơn giản đến các sắc thái cụ thể hơn như “san hô” hoặc “hoa oải hương”.

Việc sử dụng các màu được đặt tên rất đơn giản: bạn chọn một tên màu như “đỏ” và sử dụng nó trong thuộc tính CSS hỗ trợ các giá trị màu. Các thuộc tính như vậy bao gồm màu sắc rõ ràng và màu nền, nhưng cũng có màu đường viền, màu đường viền và bóng văn bản, cùng với các thuộc tính khác.

Tên màu rất hữu ích khi bạn cần một màu tạm thời để tạo mẫu hoặc muốn giữ cho mã của bạn dễ đọc. Đây là cú pháp:

 color_property: color_name;

Trong trường hợp này, chỉ cần thay thế color_name bằng màu cụ thể mà bạn muốn sử dụng. Ví dụ: nếu bạn muốn đặt màu văn bản của đoạn văn thành màu đỏ, hãy viết:

 p {
  color: red;
} 

Điều này sẽ làm cho đoạn văn của bạn có màu văn bản màu đỏ:

Ưu điểm: Chúng dễ đọc và dễ hiểu trong mã CSS của bạn. Chúng thân thiện với người mới bắt đầu, hoạt động tốt trên các trình duyệt và hữu ích cho các ý tưởng thiết kế nhanh chóng.

Nhược điểm: Chúng có các tùy chọn hạn chế và có thể không cung cấp sắc thái chính xác mà bạn cần, hạn chế khả năng sáng tạo trong thiết kế. Ngoài ra, không phải lúc nào chúng cũng có thể đáp ứng các yêu cầu nghiêm ngặt về khả năng truy cập và khả năng hỗ trợ trong các hệ thống cũ hơn có thể khác nhau.

2. 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”, là phương pháp phổ biến nhất để chỉ định màu trong thiết kế web. Các mã này bao gồm sự kết hợp sáu ký tự của số và chữ cái (0-9, AF), biểu thị sự kết hợp của các thành phần màu đỏ, xanh lá cây và xanh lam (RGB) trong một màu.

Mặc dù chúng dễ sử dụng nhưng việc hiểu cách chúng hoạt động có thể là một thách thức. Bạn có thể tìm hiểu sâu về mã hex để hiểu rõ hơn. Đây là ví dụ cơ bản về cách bạn có thể sử dụng mã hex trong CSS:

 color: #RRGGBB;

Trong định dạng này, RR, GG và BB lần lượt đại diện cho các thành phần màu đỏ, xanh lá cây và xanh lam. Mỗi thành phần có thể nằm trong khoảng từ 00 (không có cường độ) đến FF (cường độ tối đa). Ví dụ: nếu bạn muốn đặt màu nền của tiêu đề trang web thành màu xanh lam cụ thể, bạn 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:

​​​​

Bạn cũng có thể sử dụng tốc ký nếu mỗi thành phần trong số ba thành phần lặp lại cùng một ký tự hai lần. Bạn có thể viết ví dụ trên như sau:

 header {
  background-color: #369;
} 

Ưu điểm: Mã màu thập lục phân cung cấp nhiều tùy chọn màu sắc, cho phép bạn tạo các sắc thái chi tiết và tùy chỉnh. Chúng cung cấp khả năng kiểm soát trơn tru các lựa chọn màu sắc, khiến chúng trở nên lý tưởng cho các yêu cầu thiết kế phức tạp.

Nhược điểm: Mặc dù mã hex rất mạnh nhưng chúng có thể kém trực quan hơn so với các màu được đặt tên. Bạn cũng có thể gặp khó khăn trong việc ghi nhớ các giá trị màu cụ thể. May mắn thay, hiện có sẵn các công cụ để tìm mã hex của màu sắc mà bạn gặp, giúp quá trình này trở nên dễ quản lý hơn.

3. Giá trị màu RGB và RGBA

Giống như mã thập lục phân, định dạng này cho phép bạn chỉ định màu theo các thành phần màu đỏ, lục và lam của chúng. Tuy nhiên, lần này bạn có thể sử dụng các số nguyên thân thiện hơn.

Giá trị màu RGB

Giá trị màu RGB là phương pháp được sử dụng phổ biến thứ hai để xác định màu trong CSS. “RGB” đại diện cho màu đỏ, xanh lục và xanh lam, được biểu thị dưới dạng hàm CSS có dấu ngoặc đơn theo sau. Bên trong dấu ngoặc đơn, bạn chỉ định các giá trị cho từng kênh màu, từ 0 đến 255. Điều này cho phép bạn kiểm soát cường độ của màu đỏ, lục và lam trong màu bạn muốn sử dụng.

Đây là cú pháp:

 rgb(red_value, green_value, blue_value);

Thay thế red_value, green_value và blue_value bằng các giá trị số tương ứng của chúng. Ví dụ: bạn có thể đạt được các màu trắng, đen và đỏ như những màu hiển thị trong hình ảnh này:

Khi bạn đặt cả ba kênh màu (đỏ, lục và lam) ở giá trị tối đa là 255, điều này sẽ mang lại cường độ cao nhất cho mỗi kênh, tạo ra màu trắng:​​​​​

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

Khi bạn đặt cả ba kênh màu về giá trị tối thiểu là 0, điều đó thể hiện sự vắng mặt của màu trong mỗi kênh, dẫn đến màu đen.

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

Đặt kênh màu đỏ thành giá trị tối đa là 255, trong khi vẫn giữ các kênh khác ở giá trị tối thiểu là 0, sẽ tạo ra màu đỏ:​​​​​

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

Giá trị màu RGBA

RGBA hoạt động giống như RGB, điểm khác biệt duy nhất là bao gồm giá trị alpha. Chữ “A” trong RGBA là viết tắt của alpha, xác định mức độ trong suốt hoặc độ mờ cho màu đã chọn. Giá trị 0 biểu thị độ trong suốt hoàn toàn, làm cho màu hoàn toàn không nhìn thấy được, trong khi giá trị 1 biểu thị độ mờ hoàn toàn, hiển thị màu hoàn toàn.

RGBA đặc biệt hữu ích khi bạn muốn tạo các phần tử có mức độ trong suốt khác nhau, chẳng hạn như nền mờ hoặc văn bản mờ. Cú pháp đầy đủ là:

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

Ở đây, red_value, green_value và blue_value đại diện cho các kênh màu như trong RGB và alpha_value chỉ định mức độ trong suốt.

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

Trong ví dụ này, giá trị alpha là 0,5 chỉ định độ trong suốt 50% cho màu xanh lục, cho phép nội dung bên dưới hiển thị thông qua:

Ưu điểm: RGB và RGBA cho phép bạn kiểm soát màu sắc một cách chính xác, giúp bạn dễ dàng chọn các sắc thái chính xác hơn và tạo ra các thiết kế hấp dẫn về mặt hình ảnh. Chúng tương thích với nhiều trình duyệt web khác nhau, đảm bảo màu sắc bạn chọn trông nhất quán.

Nhược điểm: Thách thức nằm ở việc đảm bảo sự kết hợp màu sắc dễ tiếp cận. Điều quan trọng là phải chú ý đến tỷ lệ tương phản, chủ yếu là khi làm việc với độ trong suốt trong RGBA. Nguyên tắc WCAG có thể giúp bạn đảm bảo thiết kế của bạn có thể truy cập được.

4. Giá trị màu HSL và HSLA

HSL—viết tắt của Hue, Saturation và Lightness—là một hàm CSS khác xác định màu sắc. Giống như RGB, HSL sử dụng các giá trị số để thể hiện màu sắc, nhưng nó hoạt động rất khác. Bạn có thể quen thuộc với các giá trị HSL từ các thành phần giao diện người dùng trong ứng dụng thiết kế và các nơi khác.

Màu sắc: Màu này thể hiện chính màu đó bằng cách sử dụng các độ trên bánh xe màu, từ 0 đến 360. Hãy tưởng tượng nó giống như việc chọn một điểm trên một vòng tròn, trong đó mỗi độ tương ứng với một màu khác nhau. Ví dụ: 0 và 360 độ cho màu đỏ, 120 độ cho màu xanh lá cây và 240 độ cho màu xanh lam.

Độ bão hòa: Độ bão hòa xác định độ sống động hoặc cường độ của màu sắc. Nó xác định mối quan hệ của màu sắc với màu xám, với 0% là thang độ xám hoàn toàn (khử bão hòa) và 100% là bão hòa hoàn toàn (sống động và thuần khiết).

Độ sáng: Độ sáng thể hiện mức độ sáng hoặc tối của màu sắc. Nó liên quan đến vị trí của màu trên quang phổ giữa màu đen (0%) và màu trắng (100%). Giá trị 50% đại diện cho màu bình thường, trong khi giá trị dưới 50% sẽ làm tối màu và giá trị trên 50% sẽ làm sáng màu.

Ngoài HSL, còn có HSLA, trong đó chữ “A” là viết tắt của “alpha”. Điều này tương tự như chữ “A” trong RGBA và biểu thị độ trong suốt.

Đây là cú pháp:

 color: hsl(hue_value, saturation_percentage, lightness_percentage);

Sử dụng cú pháp này, thay thế Hue_value, Saturation_percentage và Lightness_percentage bằng các giá trị cụ thể mà bạn muốn cho từng thành phần. Ví dụ:

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

Trong ví dụ này, màu nền của phần tử div được đặt thành màu xanh lục rực rỡ bằng cách sử dụng các giá trị HSL. 120 đại diện cho màu sắc (màu xanh lá cây), 100% dành cho độ bão hòa hoàn toàn và 50% đặt độ sáng ở mức cân bằng.

Ưu điểm: HSL và HSLA cung cấp các phép tính màu linh hoạt bằng cách sử dụng các thuộc tính tùy chỉnh CSS. Chúng tương thích cao với các trình duyệt hiện đại và cho phép dễ dàng điều chỉnh độ sáng của màu.

Nhược điểm: Học HSL đòi hỏi phải hiểu khoa học về màu sắc, chẳng hạn như màu sắc và độ bão hòa, có thể khó khăn hơn các màu RGB quen thuộc.

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

Có nhiều phương pháp hơn mà bạn có thể kiểm tra và trong khi khám phá các định dạng khác nhau để xác định màu trong CSS, hãy nhớ rằng bạn có khả năng định hình giao diện, tâm trạng và trải nghiệm người dùng cho trang web của mình.

Lựa chọn định dạng màu của bạn—cho dù đó là tên màu đơn giản, mã thập lục phân, RGB hay HSL—có thể tác động đến cách khán giả cảm nhận trang web của bạn. Vì vậy, hãy thử nghiệm, tìm hiểu và tìm ra định nghĩa về màu sắc phù hợp nhất với mục tiêu thiết kế của bạn.