Khi nói đến màu sắc bắn tung tóe 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 phổ biến nhất.
Có thể trước đây bạn đã từng bắt gặp mã hex và RGB, nhưng HSL, mặc dù con người dễ đọc hơn, có thể vẫn chưa có trên radar của bạn. Mọi cách viết màu đều 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à hiểu biết cơ bản về từng loại để đưa ra quyết định sáng suốt. Ở đây chúng tôi sẽ giải thích sự khác biệt giữa RGB, HEX và HSL.
RGB (Đỏ, Lục, lam) là gì
Thật hợp lý khi bắt đầu với các giá trị RGB, kể từ Đỏ , Màu xanh lá cây và Xanh lam là ba màu mà màn hình có thể sử dụng để tạo ra khá nhiều màu khác. Nó thực hiện điều này bằng cách sử dụng "pha trộn màu phụ gia", nhưng bạn không cần phải nghiên cứu sâu về khoa học của điều đó để hiểu RGB.
rgb(255, 0, 0) có màu đỏ, vì R đã đạt cực đại. Nếu bạn đặt G hoặc B thành 255, bạn sẽ nhận được toàn bộ màu xanh lá cây hoặc toàn bộ màu xanh lam. Đặt tất cả chúng thành 255 cùng một lúc và bạn sẽ nhận được màu trắng (tổng của tất cả các màu), trong khi bằng không chúng sẽ hiển thị màu đen. Nếu bạn thêm giá trị thứ tư (kênh alpha, từ 0 đến 1), bạn cũng có thể nhận được độ trong suốt:rgba(0, 0, 0, .5) chuyển sang màu đen nửa trong suốt.
Nó đơn giản, có, nhưng không thực sự trực quan. Cân bằng RGB có thể thay đổi khá nhiều ngay cả khi bạn chỉ thay đổi màu sắc, khiến con người rất khó thực hiện các điều chỉnh thủ công mà không có một số loại bộ tạo RGB (may mắn thay, có rất nhiều).
Mã màu thập lục phân là gì
Hexes chỉ là một cách khác để viết các giá trị RGB. Một cái gì đó giống như #6a79f7 (màu xanh lam hoa ngô) ánh xạ trực tiếp tới rgb(106, 121, 247) . 6a là màu đỏ , 79 là màu xanh lá cây và f7 là xanh lam .
Trước tiên, bạn nên biết rằng trong hệ thống màu hex, các chữ cái “a-f” đại diện cho các số từ mười đến mười lăm. Thứ hai, đó là hệ thập lục phân , nghĩa là mọi thứ đều ở cơ số 16. 21 là 2 * 10 + 1 trong cơ số 10, nhưng ở hệ thập lục phân, nó sẽ là 2 * 16 + 1 . Chỉ cần nhân số đầu tiên với 16 và thêm số thứ hai - thật dễ dàng như vậy! 6a = 6 * 16 + 10 hoặc 106. 79 = 7 * 16 + 9 hoặc 121.
Mặc dù toán học rất thú vị, nhưng rõ ràng nó làm cho các mã thập lục phân thậm chí còn khó khăn hơn đối với con người so với RGB, mặc dù chúng dễ sao chép-dán và có thể có các kết hợp chữ cái / số đáng nhớ.
Bạn cũng có thể thêm độ trong suốt cho mã hex bằng cách đặt một giá trị tương đương với một số phần trăm của 255 ở đầu, như sau:#806a79f7 . 80 trong hệ thập lục phân =126, gần bằng 50% giá trị lớn nhất của 255.
HSL là gì (Hue, Saturation, Lightness)
HSL được thiết kế khá nhiều cho khả năng đọc của con người và nó đang trở nên phổ biến, đặc biệt là một giải pháp thay thế RGB. Nó hoạt động như thế này:
Huế nghĩa là màu sắc và nó sử dụng các mức độ của bánh xe màu để cho bạn biết bạn đang sử dụng màu gì. Nếu bạn biết bánh xe màu và vị trí của những màu chính này, bạn sẽ có thể biết rằng 45 sẽ trông màu cam và 270 sẽ trông màu tím chỉ bằng cách suy nghĩ về nó trong một giây.
- 0 =đỏ
- 60 =màu vàng
- 120 =màu xanh lá cây
- 180 =lục lam
- 240 =xanh lam
- 300 =đỏ tươi
Độ bão hòa về cơ bản là màu sắc sặc sỡ như thế nào. Độ bão hòa 0% có nghĩa là màu sẽ chỉ là một bóng xám, trong khi 100% có nghĩa là nó sẽ hiển thị đầy đủ sức mạnh. Nếu bạn muốn tắt tiếng màu của mình hoặc làm cho màu đó bật ra nhiều hơn một chút, bạn chỉ có thể thay đổi giá trị này.
Độ nhẹ cho bạn biết màu tối hay sáng. Độ sáng 0% có nghĩa là màu của bạn sẽ là màu đen, bất kể cài đặt Hue hoặc Saturation là gì, và độ sáng 100% sẽ khiến bạn có màu trắng. Như bạn có thể đoán, 50% cung cấp cho bạn màu chính xác nhất.
Với thông tin đó, bạn sẽ có thể biết ngay hsl(0, 100%, 50%) là gì có nghĩa. Nó chỉ có màu đỏ! Muốn có màu đỏ đậm hơn, đậm hơn? Thử 0, 70%, 40% . Có thể bạn muốn điều đó, nhưng màu xanh lam? Chỉ cần thay đổi 0 thành 240 và bạn đã có nó! Nó cũng có độ trong suốt - nó hoạt động giống như RGB:chỉ cần thêm giá trị thứ tư (từ 0 đến 1), như sau:hsla(240, 70%, 40%, .5) .
HSV / HSB và HSI
Gì? Nhiều mô hình màu sắc hơn? Cho đến khi mọi thứ kết thúc? Đối với hầu hết những người làm việc với màu sắc trên máy tính, nó đã kết thúc. Hex, RGB và HSL cho đến nay là những cách phổ biến nhất để ghi chú màu sắc. Tuy nhiên, nếu bạn đang ở 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 máy học trên hình ảnh, bạn có thể gặp những người đang sử dụng một trong những mô hình màu bí truyền hơn này hoặc thậm chí một trong những mô hình khác không được liệt kê ở đây.
HSB là viết tắt của “Hue Saturation Brightness” và HSVs là viết tắt của Hue Saturation Value. Chúng thực sự chỉ là những tên gọi 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 so với HSL là ở cách chúng xác định độ bão hòa. HSI (Cường độ bão hòa Huế) có một vài khác biệt nhỏ so với HSB / HSV, nhưng nó không được sử dụng rộng rãi, vì vậy rất có thể bạn sẽ không thấy nó ngoài tự nhiên.
Tôi nên sử dụng kiểu màu nào?
Nói chung, chọn một mô hình màu sắc là một quyết định thiết kế khá nhỏ, nhưng những điều tốt đẹp được tạo ra từ nhiều quyết định nhỏ. Nói chung, mã hex giúp sao chép dễ dàng và rất hữu ích trong các tình huống mà con người có thể không tham gia nhiều. RGB / RGBA phù hợp cho khả năng đọc và được sử dụng tốt nhất khi thật tuyệt nếu đôi khi con người có thể điều chỉnh độ trong suốt. Nếu con người cần thay đổi màu theo cách thủ công, hãy sử dụng HSL / HSLA. Ngoài ra, đó là một vấn đề khá được ưu tiên, mặc dù những người trong nhóm HSL có xu hướng thông minh hơn và ưa nhìn hơn.