Bạn có thể sử dụng hex cho css màu không?

Giá trị màu hex là một trong những cách phổ biến nhất để đặt thuộc tính màu CSS, đặc biệt là giữa các nhà phát triển. Nó được hỗ trợ trong hầu hết các trình duyệt

Chúng ta có thể định nghĩa màu Tím trong mã màu Hex như sau

#800080

Ở đây, màu được chỉ định ở định dạng #RRGGBB trong đó RR (Đỏ), GG (Xanh lá cây) và BB (Xanh lam) là các số nguyên thập lục phân giữa 00 và FF, cho biết cường độ của màu

RGB hoặc Red/Green/Blue là một phương pháp phổ biến khác được sử dụng để xác định các thuộc tính màu trong CSS. Phối màu RGB là định dạng ba kênh chứa lượng Đỏ, Xanh lục và Xanh lam dưới dạng số nguyên trong khoảng từ 0 đến 255. Sau đây là một ví dụ về màu RGB

rgb(128, 0, 128)

Đây là mã RGB cho cùng một màu mà chúng tôi đã chỉ định bằng cách sử dụng mã màu Hex ở trên. Bạn có thể thắc mắc tại sao chúng tôi thậm chí sẽ sử dụng RGB vì mã màu Hex dễ nhớ và dễ gõ hơn nhiều

Chà, mỗi phương pháp màu đều có những lợi ích riêng. Cái hay của RGB là nó cho phép bạn thêm độ mờ cho màu của mình

Đây là lúc RGBA xuất hiện 😎. Trong CSS 3, một kênh bổ sung đã được thêm vào bảng màu RGB được gọi là alpha để biểu thị độ mờ của màu

HSL, viết tắt của Hue Saturation and Lightness, là một cách khác để khai báo màu sắc trong CSS. Giá trị màu HSL cho màu Tím có thể được chỉ định như sau

hsl(300, 100%, 25.1%)

Như bạn có thể thấy, tham số đầu tiên được sử dụng để xác định Hue, là giá trị của màu thuần thực tế, chẳng hạn như Đỏ, Vàng, Lục, Lam, Đỏ tươi, v.v., như được biểu thị trên bánh xe màu. Các giá trị tính bằng độ, từ 0 đến 360. Ở đây 0 và 360 độ dành cho màu Đỏ, 120 độ dành cho Màu xanh lá cây và 240 độ dành cho Màu xanh lam

Không giống như trong RGB, trong HSL, cả Độ bão hòa và Độ sáng của màu đều có thể thay đổi

Và những màu này có thể xỉn màu hoặc sống động. Càng ít màu thì càng chuyển sang màu xám. Độ bão hòa là lượng màu hiện diện trong hỗn hợp và nó kiểm soát mức độ sống động hay xỉn màu của một màu

Như bạn có thể thấy, khi giá trị của Độ bão hòa thay đổi từ 100% thành 0% dọc theo đường kẻ, màu sắc sẽ thay đổi từ sắc độ thuần sang sắc độ xỉn.

Hơn nữa, tham số thứ ba, Độ sáng, lại là một giá trị phần trăm, từ 0% đến 100%, mô tả lượng màu đen hoặc trắng tồn tại trong màu

Điều này tương tự như việc sử dụng màu nước trong hội họa. Nếu bạn muốn làm cho màu sáng hơn, bạn có thể thêm màu trắng và nếu bạn muốn làm cho nó tối hơn, bạn có thể thêm màu đen. Do đó, Độ sáng 100% có nghĩa là màu trắng hoàn toàn, 50% có nghĩa là màu sắc thực tế và 0% là màu đen tuyền

Tương tự như RGBA, HSLA là phần mở rộng của HSL, thực hiện kênh thứ tư có tên alpha để biểu thị độ mờ của màu. Độ mờ chỉ định ở giá trị thập phân giống như trong RGBA, trong đó 1 biểu thị độ mờ hoàn toàn, 0 minh họa hoàn toàn trong suốt và mọi thứ ở giữa mờ một phần

Tuy nhiên, mặc dù mã màu RGB và Hex được hỗ trợ trong hầu hết các trình duyệt, nhưng màu HSL chủ yếu được hỗ trợ trong các trình duyệt dựa trên HTML5

Bạn có thể đã sử dụng tất cả hoặc một số phương pháp này để đặt thuộc tính màu trong CSS. Hex là sở thích cá nhân của tôi, nhưng có bất kỳ lợi thế nào khi sử dụng phương pháp này so với phương pháp kia không?

Mẹo. Xây dựng hệ thống thiết kế tuyệt vời và giao diện vi mô

Đưa sự phát triển giao diện người dùng lên một tầm cao mới với các thành phần độc lập. Xây dựng và cộng tác trên các ứng dụng dựa trên thành phần để dễ dàng mở khóa Micro Frontends và chia sẻ các thành phần

Các công cụ OSS như Bit cung cấp trải nghiệm nhà phát triển tuyệt vời để xây dựng và soạn thảo các thành phần độc lập cũng như xây dựng một mình hoặc cùng với nhóm của bạn

Hãy thử nó →

Cách tốt nhất để chỉ định màu sắc trong CSS là gì?

Nếu bạn đã quen với HTML, có lẽ bạn sẽ thấy thoải mái hơn khi sử dụng các giá trị màu Hex vì nó đã được sử dụng rất nhiều trong HTML. Nhưng nếu bạn là người có nền tảng thiết kế, bạn có thể sẽ sử dụng ký hiệu RGB vì đây là định dạng được sử dụng phổ biến nhất trong hầu hết các phần mềm thiết kế như Photoshop, Corel và Illustrator

Điều tôi khuyên là, nếu bạn là một nhà phát triển thuần túy và chỉ muốn hoàn thành dự án của mình, hãy tiếp tục và sử dụng ký hiệu màu mà bạn quen thuộc nhất

Bởi vì trình duyệt không thực sự quan tâm đến định dạng màu bạn đang sử dụng, mặc dù có những thay đổi nhỏ về hiệu suất giữa các phương thức khác nhau, sự khác biệt về hiệu suất là không đáng kể

Ngoài ra, nếu bạn lo lắng về khả năng sử dụng, ảnh hưởng của quyết định đối với (các) nhà phát triển, v.v., hãy xem phương pháp nào phù hợp nhất với tình huống của bạn

Hãy bắt đầu với ký hiệu Hex. Hex rất hấp dẫn do ký hiệu ngắn và đơn giản. Nhiều nhà phát triển thấy các giá trị Hex khá đơn giản để đọc và dễ sao chép vào trình soạn thảo văn bản ưa thích của họ hơn RGB và HSL

Tuy nhiên, Hex có thể không hoạt động tốt trong mọi tình huống. Đặc biệt khi bạn cần thay đổi mức độ mờ của màu, bạn có thể phải xem xét một trong hai phương pháp còn lại. Cả hai đều có điểm cộng và nhược điểm

Khi nói đến hoạt ảnh màu sắc, RGB và HSL được ưu tiên hơn Hex và kênh bổ sung của chúng cho giá trị alpha rất hữu ích khi bạn muốn chơi với độ mờ của màu

Ngoài ra, RGB còn nổi tiếng và được hỗ trợ trong các phiên bản Internet Explorer cũ hơn (9 trở lên)

HSL có nghĩa là dễ hiểu hơn với con người

Các định dạng như RGB và Hex dễ đọc bằng máy hơn là con người có thể đọc được. HSL, ngược lại, có nghĩa là con người dễ hiểu hơn. HSL là một cách mới hơn và tự phát hơn để làm việc với màu sắc

Không giống như trong Hex và RGBA, nơi bạn phải can thiệp vào một số con số để có được màu bạn muốn, trong HSL, chúng ta có thể xác định màu bằng cách sử dụng Hue và chơi với tỷ lệ phần trăm tham số thứ hai và thứ ba để có được mức độ bão hòa và độ sáng mà bạn cần

Nếu tôi nói với bạn tiêu đề trang web cần phải là #578557 hoặc rgb(87, 133, 87), bạn có đoán được màu đó là gì không? . Nhưng đồng thời, nếu tôi cung cấp cho bạn màu sắc trong HSL. hsl(120, 21%, 43%)? . Tiếp theo, nó được bão hòa 61%, cho thấy rằng nó còn 21 bước nữa để chuyển sang màu xám xỉn, một màu xanh lá cây khá bão hòa. Sau đó, Độ sáng 43% có nghĩa là màu có bảy bước về phía tối hơn so với màu thuần túy

Được rồi, bạn nghĩ rằng bạn muốn làm cho màu của nút sáng hơn khi di chuột và tối hơn một chút khi nhấp chuột. Đó là một cái búng tay với HSL. Chỉ cần tăng và giảm giá trị của sét, và đó là tất cả. ĐÁNG KINH NGẠC. 😎 Nhưng làm điều này với Hex hoặc RGB mà không sử dụng công cụ hoặc sự trợ giúp của nhà thiết kế là điều không thể

HSL là một ký hiệu màu trực quan bắt chước thế giới thực

Ví dụ: hãy xem xét một tờ giấy màu xanh nhạt. Các giá trị màu của nó ở ba định dạng sẽ là

Hex: #ADD8E6;
RGB: rgb(173, 216, 230);
HSL: hsl(195, 53.3%, 79%);

Được rồi, bây giờ hãy giữ bàn tay của bạn cách bề mặt vài inch. Bóng bàn tay của bạn làm cho bề mặt tối hơn một chút, phải không? . Nhưng trong HSL, chỉ cần điều chỉnh giá trị Độ sáng một chút và BAM. 💥Bạn không cần thực hiện bất kỳ thay đổi nào đối với màu gốc. Không phải là nó thực sự mát mẻ?

OLD VALUES                    NEW VALUES 
Hex: #4f2017 ------------------> #2F819D;
RGB: rgb(79, 32, 23) ----------> rgb(47, 129, 157);
HSL: hsl(195, 53.3%, 79%) -----> hsl(195, 53.3%, 50%);

Như bạn có thể thấy, các giá trị Hex và RGB đã thay đổi hoàn toàn, trong khi ở HSL, chỉ có một khía cạnh thay đổi. Không còn nghi ngờ gì nữa, HSL là hữu ích nhất khi xây dựng bảng màu. Bắt đầu với màu cơ bản, và chỉ cần điều chỉnh độ bão hòa và độ sáng nếu cần, thế là xong. Với HSL xây dựng một bảng màu, tất cả chỉ là một miếng bánh. 😋

Cuối cùng, tất cả đều phụ thuộc vào sở thích cá nhân

Bây giờ bạn có thể nghĩ HSL là ký hiệu màu tốt nhất để sử dụng. Tuy nhiên, như tôi đã đề cập ở trên, HSL không được hỗ trợ bởi các phiên bản Internet Explorer cũ hơn. Tương tự như vậy, mọi ký hiệu màu đều có ưu và nhược điểm của nó. Vấn đề là, nó không quá quan trọng

Điều quan trọng nhất là giữ tính nhất quán trong loại bạn đang sử dụng trong một dự án càng nhiều càng tốt vì nó giúp tăng năng suất

Mặc dù Hex có hạn chế là không hỗ trợ độ trong suốt và RGBA, nhưng rất khó để điều chỉnh màu sắc mà không sử dụng một công cụ cụ thể và HSLA không được hỗ trợ trong các trình duyệt cũ hơn; . Bạn có thể xem xét các yếu tố sau khi chọn phương pháp tốt nhất để đặt thuộc tính màu CSS trong dự án của mình

1. Sử dụng cùng một định dạng mà phần còn lại của nhóm nhà phát triển của bạn sử dụng để giảm bớt khả năng bảo trì
2. Sử dụng RGB nếu bạn đã quen với định dạng đó
3. Sử dụng Hex nếu khách truy cập mục tiêu của bạn sử dụng các trình duyệt lỗi thời nghiêm trọng để xem trang web của bạn hoặc sử dụng mã dự phòng như bên dưới

p { 
    color: #FF0000;
    color: hsla(0, 100%, 50%, 1);
}

4. Nếu ba điểm đầu tiên không đưa bạn đi theo bất kỳ hướng nào khác, hãy sử dụng HSLA. HSLA cho phép bạn có độ trong suốt như RGBA nhưng theo cách mà con người có thể truy cập được

Các lựa chọn thay thế là gì?

Ngoài các phương pháp được đề cập ở trên, có một số phương pháp khác mà bạn có thể sử dụng để đặt thuộc tính màu trong CSS

• Sử dụng tên màu. tất cả các trình duyệt hiện đại đều hỗ trợ 140 tên màu CSS tiêu chuẩn. Tên màu là một từ khóa đại diện cho một màu cụ thể, chẳng hạn như coral

• rgb(128, 0, 128)

  0 từ khóa. nếu bạn cần tham khảo màu sắc của một phần tử, bạn có thể sử dụng từ khóa này
• giá trị CTNH. HWB là viết tắt của Hue, Whiteness, Blackness. Mặc dù nó hiện không được hỗ trợ trong HTML, nhưng nó được đề xuất như một tiêu chuẩn mới trong CSS4
• giá trị CMYK. CMYK là sự kết hợp của các màu Lục lam, Đỏ tươi, Vàng và Đen. Mặc dù màn hình máy tính sử dụng các giá trị RGB để hiển thị màu, máy in thường hiển thị màu bằng các giá trị màu CMYK. Tương tự như HWB, CMYK chưa được hỗ trợ trong HTML nhưng được đề xuất làm tiêu chuẩn mới trong CSS4

Từ cuối cùng

Màu sắc đóng một vai trò quan trọng trong một trang web. Trong CSS, chúng tôi sử dụng các phương thức như RGB, Hex và HSL để xác định màu sắc. Trong bài viết này, tôi đã thảo luận về ba phương pháp chính được sử dụng để đặt các thuộc tính màu trong CSS, sự khác biệt, ưu và nhược điểm của chúng và các cách thay thế khác mà bạn có thể sử dụng để xác định thuộc tính màu trong CSS

Mặc dù HSLA có một lợi thế nhỏ so với hai phương pháp còn lại do khả năng đọc được của con người, nhưng không có vấn đề gì nếu nó không dành cho một trường hợp cụ thể. Và bạn có thể sử dụng bất kỳ cách nào bạn cảm thấy thoải mái

Nhìn vào những ưu và nhược điểm khác nhau, mỗi phương pháp đều có những phương pháp khác, tóm lại, quyết định về cách bạn sẽ sử dụng để thiết lập các thuộc tính màu trong CSS sẽ phụ thuộc vào ba yếu tố sau

• Sự ưa thích
• khả năng bảo trì
• Hiệu suất

Vì vậy, bạn thích sử dụng cái gì để đặt màu trong CSS? . 😃

Bạn nên sử dụng CSS hex hay RGB?

Hệ thập lục phân có được sử dụng cho màu sắc không?

Bạn có thể sử dụng màu HEX trong HTML không?

Định dạng hex cho thuộc tính màu CSS là gì?