spot_img
19.1 C
New York
Thứ Bảy, Tháng Sáu 3, 2023

So sánh sự khác biệt giữa Hex, RGB và HSL? – Onlyhow

Khi nói đến sắc tố bắn tung tóe trên màn hình hiển thị, có một số ít cách để làm điều đó với mã hóa. Hex, RGBA và HSLA là ba trong số những mạng lưới hệ thống mã màu được sử dụng thông dụng nhất .
Có thể bạn đã từng phát hiện mã hex và RGB, nhưng HSL, mặc dầu con người dễ đọc hơn, hoàn toà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 những trường hợp khác nhau và toàn bộ những gì bạn cần là hiểu cơ bản về từng loại để đưa ra quyết định hành động sáng suốt. Ở đây chúng tôi sẽ lý giải sự độc lạ giữa RGB, HEX và HSL .

RGB là gì (Red, Green, Blue)

Mô hình màu Rgb

Thật hợp lý khi bắt đầu với các giá trị RGB, vì màu đỏ, Màu xanh lá, và Màu xanh da trời 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 additive color mixing, nhưng bạn không cần phải đi sâu vào khoa học của điều đó để hiểu RGB.

Mô hình màu Rgba

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 màu xanh lam hoàn toàn. Đặ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ẽ làm cho 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 thuần, có, nhưng không thực sự trực quan. Cân bằng RGB hoàn toàn có thể biến hóa khá nhiều ngay cả khi bạn chỉ biến hóa sắc tố, khiến con người rất khó thực thi những kiểm soát và điều chỉnh thủ công bằng tay mà không có một số ít loại bộ tạo RGB ( như mong muốn thay, có rất nhiều ) .

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

Mô hình màu trong suốt HexMô hình màu trong suốt Hex

Hexes chỉ là một cách khác để viết các giá trị RGB. Cái gì đó 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á, và f7 là màu xanh da trời.

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, nó hệ thập lục phân, nghĩa là mọi thứ đều ở trong cơ sở 16. 21 là 2 * 10 + 1 trong cơ số 10, nhưng trong 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ô hình màu Biểu đồ HexMô hình màu Biểu đồ Hex
Mặc dù toán học rất mê hoặc, nhưng rõ ràng là nó làm cho những mã thập lục phân trở nên khó khăn vất vả hơn so với con người so với RGB, mặc dầu chúng dễ sao chép-dán và hoàn toàn có thể có những phối hợp vần âm / 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ị tối đa của 255.

HSL là gì (Hue, Saturation, Lightness)

Mô hình màu HslMô hình màu Hsl

HSL được thiết kế khá nhiều cho khả năng đọc của con người và nó ngày càng 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ế 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.

Bánh xe màu RgbBánh xe màu Rgb

  • 0 = đỏ
  • 60 = màu vàng
  • 120 = xanh lục
  • 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 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.

Mô hình màu HslaMô hình màu Hsla

Với thông tin đó, bạn sẽ có thể biết ngay lập tức những gì hsl(0, 100%, 50%). Nó chỉ là màu đỏ! Muốn có màu đỏ đậm hơn, đậm hơn? Cố gắng 0, 70%, 40%. Có lẽ bạn muốn điều đó, nhưng màu xanh lam? Chỉ cần thay đổi 0 thành 240 và bạn đã hiểu! 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ư vậy: hsla(240, 70%, 40%, .5).

HSV / HSB và HSI

Mô hình màu HsvMô hình màu Hsv
Gì ? Nhiều quy mô sắc tố hơn ? Cho đến khi mọi thứ kết thúc ? Đối với hầu hết những người thao tác với sắc tố trên máy tính, nó đã kết thúc. Hex, RGB và HSL cho đến nay là những cách thông dụng nhất để ghi chú sắc tố. Tuy nhiên, nếu bạn đang làm trong nghành nghề dịch vụ tương quan đến nhiều hình ảnh và sắc tố, ví dụ điển hình như phong cách thiết kế đồ họa hoặc máy học trên hình ảnh, bạn hoàn toàn có thể gặp những người đang sử dụng một trong những quy mô màu bí truyền hơn này hoặc thậm chí còn một trong những quy mô khác không đượ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. Chúng thực sự chỉ là những cái tên khác nhau cho cùng một mô hình, và sự 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 (Hue Saturation Intensity) 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 nhìn thấy nó trong tự nhiên.

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

Nói chung, việc lựa 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ể sẽ 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 sẽ tốt hơn 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.

Tín dụng hình ảnh : Màu HSL Màu xám bão hòa xi lanh rắn, Màu phụ gia, Biểu đồ màu XTerm, HSL và HSV, Munsell 1943
Bài viết này có có ích không ?

Source: https://wincat88.com
Category: BLOG

Đánh giá post
spot_img

BÀI VIẾT CÙNG CHỦ ĐỀ

ĐƯỢC XEM NHIỀU