Tin tức và phân tích của tất cả các thiết bị di động

Mã màu: Sự khác biệt giữa Hex, RGB và HSL là gì?

Khi nói đến các vệt màu trên màn hình, có một số cách để làm điều đó với mã hóa. Hex, RGBA và HSLA là ba trong số các hệ thống mã màu được sử dụng rộng rãi nhất.

Bạn có thể đã gặp mã RGB và thập lục phân trong quá khứ, nhưng HSL, trong khi dễ đọc hơn cho con người, có thể chưa có trên radar của bạn. Mỗi cách viết màu sắc có ý nghĩa trong các tình huống khác nhau, và tất cả những gì bạn cần là một sự hiểu biết cơ bản về từng loại để đưa ra lựa chọn đúng đắn. Ở đây chúng tôi sẽ giải thích sự khác biệt giữa RGB, HEX và HSL.

RGB là gì (đỏ, xanh lá cây, xanh dương)

Mô hình màu RGB

Nó có ý nghĩa để bắt đầu với một giá trị RGB, bởi vì Màu đỏ, màu xanh lámàu xanh da trời có ba màu mà màn hình có thể sử dụng để tạo ra hầu hết các màu khác. Nó thực hiện điều này bằng cách sử dụng "trộn màu phụ gia", nhưng bạn không cần nghiên cứu kiến ​​thức đó để hiểu RGB.

Mô hình màu Rgba

rgb (255, 0, 0) là màu đỏ, vì R được tối đa hóa. Nếu bạn đặt G hoặc B thành 255, bạn sẽ có màu xanh lục hoặc xanh dương đầy đủ. Đặt mọi thứ thành 255 cùng một lúc và bạn sẽ có màu trắng (tổng của tất cả các màu), trong khi không có màu đen. Nếu bạn thêm giá trị thứ tư (kênh alpha, hãy nhập 0 đến 1) Bạn cũng có thể có được sự minh bạch: rgba (0, 0, 0,.5) dịch sang màu đen trong suốt trung bình.

Đơn giản, đúng vậy, nhưng nó không thực sự thông minh. Cân bằng RGB có thể thay đổi khá nhiều, ngay cả khi chỉ có tông màu thay đổi, khiến con người rất khó điều chỉnh thủ công nếu không có một số loại máy phát RGB (rất may là có rất nhiều).

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

Mẫu hình lục giác trong suốt

Hex là một cách khác nhau để viết các giá trị RGB. Một cái gì đó như # 6a79f7 (màu xanh hoa ngô) ánh xạ trực tiếp đến RGB (106, 121, 247). Thứ 6 là Màu đỏ79 là màu xanh lávà f7 là màu xanh da trời.

Trước tiên, bạn nên biết rằng trong sistema Hệ thập lục phân về màu sắc, các chữ cái "a-f" đại diện cho các số từ mười đến mười lăm. Thứ hai, nó là thập lục phân, có nghĩa là mọi thứ đều ở gốc. 16. 21 là 2 * 10+ 1 trong cơ sở 10, nhưng thập lục phân sẽ được chuyển đổi 2 * * 16 + 1. Chỉ cần nhân số thứ nhất với 16 và thêm số thứ hai, thật dễ dàng! 6a = 6 * * 16 + 10 hoặc 106. 79 = 7 * * 16 + 9 hoặc 121.

Mô hình màu lục giác

Mặc dù toán học rất thú vị, nhưng nó chắc chắn làm cho mã hex thậm chí còn gây đau đớn hơn cho con người so với RGB, mặc dù chúng rất dễ sao chép và dán các kết hợp chữ và số tuyệt vời.

Bạn cũng có thể thêm độ trong suốt cho mã thập lục phân bằng cách đặt một giá trị tương đương với tỷ lệ phần trăm 255 ở đầu, chẳng hạn như: # 806a79f7. 80 trong thập lục phân = 126, bằng khoảng 50% giá trị tối đa 255.

HSL là gì (Huế, Saturation, Lightness)

Mô hình màu HSL

HSL ít nhiều được thiết kế cho khả năng đọc của con người và ngày càng trở nên phổ biến, đặc biệt là thay thế cho RGB. Nó hoạt động như thế này:

Màu sắc tượng trưng cho màu sắc, và sử dụng điểm số trên bánh xe màu để cho bạn biết anh ấy đang mặc màu gì. Nếu bạn biết bánh xe màu và vị trí của các màu chính này, bạn sẽ có thể nói rằng 45 sẽ có màu cam và 270 sẽ có màu tím chỉ bằng cách nghĩ về nó trong giây lát.

Bánh xe màu RGB

    0 = đỏ60 = vàng120 = xanh180 = cyan240 = xanh300 = đỏ tươi

Độ bão hòa về cơ bản màu sắc như thế nào. Độ bão hòa 0% có nghĩa là màu sẽ chỉ có màu xám, trong khi 100% có nghĩa là nó sẽ thể hiện toàn bộ sức mạnh của nó. Nếu bạn muốn tắt tiếng màu của nó hoặc làm cho nó nổi bật hơn một chút, bạn có thể thay đổi giá trị này.

Cứu trợ cho bạn biết màu tối hay sáng như thế nào Độ sáng 0% có nghĩa là màu của nó sẽ là màu đen, bất kể cài đặt Hue hay Saturation và Độ sáng 100% làm cho nó có màu trắng. Như bạn có thể đoán, 50% cho bạn màu chính xác nhất.

Mô hình màu Hsla

Với thông tin đó, bạn sẽ có thể biết ngay hsl là gì (0, 100%, 50%). Chỉ có màu đỏ! Bạn có muốn một màu đỏ đậm hơn và phong phú hơn? kiểm tra nó 0, 70%, 40%. Có thể bạn muốn nó, nhưng trong màu xanh? Thay đổi nó 0 Lên đến 240 và bạn có nó! Nó cũng có độ trong suốt: nó hoạt động như RGB: chỉ cần thêm giá trị thứ tư (nhập 0 và 1), chẳng hạn như: hsla (240, 70%, 40% ,.5)

HSV / HSB và HSI

Mô hình màu Hsv

Hơn? Nhiều mô hình màu? Khi nào thì hết? Đối với hầu hết mọi người làm việc với màu sắc trên máy tính, điều này đã kết thúc. Hex, RGB và HSL là những cách phổ biến nhất để phân biệt màu sắc. Tuy nhiên, nếu bạn ở trong một lĩnh vực liên quan đến nhiều hình ảnh và màu sắc, chẳng hạn như thiết kế đồ họa hoặc học máy hình ảnh, bạn có thể gặp những người sử dụng một trong những mô hình màu bí truyền hơn hoặc thậm chí một trong những mô hình khác không có. được liệt kê ở đây. .

HSB là viết tắt của "Hue Saturation Brightness" và HSV là viết tắt của Hue Saturation Value. Trên thực tế, chúng chỉ là các tên khác nhau cho cùng một mô hình và điểm khác biệt lớn nhất của chúng đối với HSL là cách chúng xác định độ bão hòa. HSI (Hue Saturation Cường độ) có một số khác biệt nhỏ so với HSB / HSV, nhưng nó không được sử dụng nhiều, vì vậy bạn có thể sẽ không thấy nó thường xuyên trong tự nhiên.

Tôi nên sử dụng mô hình màu nào?

Nhìn chung, việc chọn một mô hình màu là một quyết định thiết kế khá nhỏ, nhưng những điều tốt đẹp được thực hiện với nhiều quyết định nhỏ. Nói chung, mã thập lục phân giúp sao chép dễ dàng và tốt trong các tình huống mà con người có thể không quá tham gia. RGB / RGBA đáng đọc và được sử dụng tốt nhất khi nó là tốt nhất nếu đôi khi con người có thể thay đổi độ trong suốt. Nếu con người cần thay đổi màu thủ công, hãy sử dụng HSL / HSLA. Ngoài ra, đây là vấn đề ưu tiên hơn, mặc dù những người trong nhóm HSL có xu hướng thông minh hơn và trông đẹp hơn.

Tín dụng hình ảnh: Màu xám bão hòa HSL xi lanh màu xám, màu phụ gia, biểu đồ màu xterm, HSL và HSV, Munsell 1943

Bài viết này có hữu ích không? Có Không

Mục lục