Cách xác định màu RGB mờ tương đương cho màu RGB trong suốt một phần nhất định trên nền trắng


11

Tôi đã thấy rằng việc giảm độ mờ đục trên nền trắng là một cách tốt để tìm ra các tông màu nhạt hơn và ít bão hòa hơn của màu cơ bản.

Ví dụ: chụp ảnh màu cam này:

trái cam

Hàng dưới hiển thị các biến thể. Tỷ lệ phần trăm là opacity.

Có nền trắng và giảm độ mờ là tốt khi tôi tìm kiếm các tông màu tốt, nhưng tôi thích sử dụng màu RGB mờ tương đương 100% trong sản phẩm cuối cùng.

Làm cách nào để tính toán hoặc tìm các số RGB tương đương, khi các số RGB của màu cơ bản và độ mờ đã được chọn?

Tôi đã thử bộ chọn màu, nhưng trong Illustrator, nó ít nhất chỉ cung cấp màu cơ bản.


Bình luận không dành cho thảo luận mở rộng; cuộc trò chuyện này đã được chuyển sang trò chuyện .
Ryan

@JonasPraem Bạn có thấy các chỉnh sửa gần đây cho câu hỏi của bạn phản ánh đúng những gì bạn đang hỏi không? Nếu vậy tôi sẽ mở lại câu hỏi. Cảm ơn bạn!
tò mò

Vâng, các chỉnh sửa được thực hiện phản ánh hoàn hảo những gì tôi đang tìm kiếm
Jonas Praem 24/07/18

2
Tại sao câu hỏi này được bỏ phiếu? Đó là một câu hỏi hoàn toàn hợp lệ imho.
filip

3
Câu hỏi ban đầu được viết với một nhà phát triển POV rất mạnh. Câu hỏi bây giờ được chỉnh sửa để dễ hiểu hơn cho các nhà thiết kế, và chính xác hơn là tốt. Tôi là một nhà phát triển, không phải là một nhà thiết kế - có vẻ như tôi gặp phải rào cản ngôn ngữ.
Jonas Praem

Câu trả lời:


8

Sử dụng công thức Y = 255 - P * (255-X) trong đó X là số RGB, P = opacity (0 ... 1), Y = số RGB mới sẽ có cùng diện mạo với độ mờ 100% như X mang lại Độ mờ 100% so với nền trắng.

Công thức là công thức độ mờ chung, chỉ được đơn giản hóa cho trường hợp đặc biệt này - lớp trên cùng trong suốt một phần chống lại màu trắng tinh khiết.

Lưu ý: nền trắng phải là một đối tượng màu trắng, không phải là màu trắng. Đối tượng nền trắng được quản lý màu.

Nếu bạn đang ở trong Illustrator và muốn sao chép màu bằng công cụ chọn màu, hãy tạo một bản sao của đối tượng trong suốt một phần và rasterize nó. Chọn nền trắng trong hộp thoại rasterizing. Bây giờ bộ chọn màu cho màu, không cần tính toán.


2
Đây là một thực hiện python để tính toán này graphicdesign.stackexchange.com/questions/46867/...
joojaa

Tôi có một câu hỏi tiếp theo về cách thực hiện điều này trong Sass, trên stack stack, nếu có ai quan tâm: câu hỏi
Jonas Praem 24/07/18

RE: trường hợp đặc biệt (nghĩa là không phải màu trắng), không hoạt động cho mọi trường hợp, vì công thức dành cho một kênh duy nhất và người ta sẽ cần phải làm điều này cho mỗi kênh? Hay là trường hợp đặc biệt "255 đầu tiên" trong công thức?
Yorik

2
@Yorik công thức chung cho hình ảnh 2 lớp là Y = p * T + (1-p) * B trong đó p là độ mờ 0 ... 1 của lớp trên cùng, T = số rgb của màu lớp trên cùng, B là rgb số lớp dưới hoàn toàn mờ đục. Y là số rgb của màu tương đối mờ hoàn toàn.
dùng287001

Thực hiện JavaScript của công thức chung (nhờ @ user287001): const afterOpacity = (fg,o,bg=[255,255,255]) => fg.map((colFg,idx)=>o*colFg+(1-o)*bg[idx])nơi fg là màu foreground như [r,g,b], o là độ mờ đục (0 ... 1) và bg là màu nền (mặc định là màu trắng nếu bỏ qua) Ví dụ afterOpacity([255,0,0],0.5)cho[255,127.5,127.5]
Chris M

2

Tôi đã viết một công cụ cho việc này: https://github.com/igrmk/blec . Đối với trường hợp cụ thể của bạn, bạn có thể sử dụng nó theo cách này

blec white deadbeef

Cuối cùng eflà biểu diễn hex của một kênh alpha. Hoặc bạn có thể sử dụng nó như thế này

blec white deadbe:0.75

Chỉ định độ mờ như là một phần thập phân.

Xin lưu ý rằng công thức Y = 255 - P * (255 - X)được đề xuất không hoàn toàn chính xác do điều chỉnh gamma. Chính xác hơn sẽ là Y = (255^G * (1 - P) + X^G * P) ^ (1 / G)nơi Y- kết quả giá trị thành phần RGB, X- giá trị thành phần lớp phủ RGB, P- độ mờ đục của nó G- giá trị của một gamma. Giá trị phổ biến nhất của một gamma là 2.2. Lý do để bao gồm một hiệu chỉnh gamma vào công thức là để di chuyển các thành phần vào không gian tuyến tính khi tính toán. Hầu như mọi không gian RGB được sử dụng ngày nay đều diễn giải các thành phần màu theo cách phi tuyến tính để đặt nhiều thông tin màu hơn trong 8 bit. Trong lịch sử, nó được giới thiệu để bù cho sự phi tuyến tính của màn hình CRT.

Dưới đây là một ví dụ tại sao việc hiệu chỉnh gamma lại quan trọng đối với việc trộn. Hãy chụp ảnh màu đỏ này

màu đỏ

và hình ảnh màu xanh này

màu xanh da trời

Chúng ta hãy lấy hình đầu tiên hoàn toàn mờ và đặt độ mờ của hình ảnh thứ hai bằng trục x như thế này

màu xanh trắng

Bây giờ, hãy trộn chúng mà không cần hiệu chỉnh gamma (gamma = 1)

gamma = 1

Hãy kích hoạt chỉnh sửa gamma và thực hiện tương tự (gamma = 2.2)

gamma = 2,2

Như bạn có thể thấy có quá trình chuyển đổi cục bộ hơn nhiều nếu chúng ta không sử dụng hiệu chỉnh gamma. Có màu sắc rõ ràng tối hơn ở trung tâm. Nếu chúng ta sử dụng hiệu chỉnh gamma thì quá trình chuyển đổi và độ sáng trở nên trơn tru hơn nhiều.

Gradient cuối cùng được xây dựng bằng cách phối màu.

run lên

Hình ảnh chứa các pixel chỉ có hai màu nhưng xác suất màu xanh tuyến tính tăng từ 0 ở bên trái lên 1 ở bên phải. Kết quả trông gần giống với hình ảnh hơn với gamma = 2.2 về độ sáng và màu chuyển tiếp. Cố gắng nhìn nó từ xa. Và đây là những gì bạn có thể mong đợi từ việc pha trộn hai màu. Chúng tôi thực sự pha trộn chúng bằng cách trộn như aquarelle trong ví dụ này. Vì vậy, gamma là điều rất quan trọng để pha trộn đặc biệt là khi độ mờ gần 0,5.

Cuối cùng chúng ta hãy so sánh sự pha trộn giữa màu đỏ đục và màu xanh lam với alpha là 0,5 trong đó hiệu quả của hiệu chỉnh gamma là tối đa.

gamma = 1 gamma = 2,2 hoà sắc

Hình ảnh thứ nhất không sử dụng hiệu chỉnh gamma, hình ảnh thứ hai sử dụng gamma 2.2 và hình ảnh thứ ba sử dụng phối màu. Như bạn có thể thấy cái đầu tiên rất khác với hai cái khác. Vì vậy, tôi khuyên luôn luôn sử dụng một hiệu chỉnh gamma. Nếu bạn sử dụng bất kỳ trình chỉnh sửa hình ảnh phong nha nào thì có lẽ bạn an toàn và chỉnh sửa gamma được bật theo mặc định.

Xin lưu ý rằng để so sánh độ hoà sắc với pha trộn, bạn cần nhìn vào hình ảnh ở tỷ lệ 100% để mỗi pixel của hình ảnh chiếm chính xác một pixel của màn hình. Điều này gần như không bao giờ xảy ra nếu bạn sử dụng điện thoại di động. Nếu bạn nhìn vào hình ảnh ở quy mô khác nhau có lẽ bạn nhìn vào hình ảnh khử răng cưa. Việc khử răng cưa có thể dẫn đến kết quả rất không chính xác vì hiện tại nó không sử dụng hiệu chỉnh gamma. Tôi có thể xác nhận nó cho Chrome 83 trên Android 10 và cho Safari mới nhất trên iOS 13. Tôi đoán nó cần quá nhiều tài nguyên để thực hiện đúng cách. Vì vậy, nó có hiệu quả giảm một gamma của màn hình xuống khoảng 1,8 khi bạn nhìn vào những hình ảnh rất tương phản.

Cũng xin lưu ý rằng không phải mọi màn hình đều được hiệu chỉnh tốt. Nếu bạn cảm thấy như một hình ảnh với gamma 2.2 và một hình ảnh với độ hoà sắc tạo ra các màu khác nhau thì tôi có một tin xấu cho bạn. Bạn có thể kiểm tra một gamma của bạn theo dõi tại đây http://web.mit.edu/jmorzins/www/gamma/adilger/gamma.html . Tuy nhiên, nếu bạn sử dụng thiết bị di động, tốt hơn là sử dụng một ứng dụng vì khử răng cưa có thể dẫn đến kết quả rất không chính xác.

Đây là một mã để có được những hình ảnh này https://pastebin.com/fHYtWrMb .


Tôi đoán bạn có ít nhất một thiết bị nhiều hơn tôi. Ví dụ xếp chồng kính là mơ hồ. Xếp chồng lên nhau để làm gì? Những gì được theo dõi và nơi ánh sáng đến và đi? Hiệu chỉnh gamma có trong máy tính trên máy tính và hiển thị các lý do dựa trên cấu trúc, nó không phải là vật liệu màu vật lý, vì vậy thủy tinh không làm cho công thức rõ ràng hơn.
dùng287001

@ user287001 Cảm ơn bạn đã chỉ ra. Ví dụ kính thực sự là xấu. Có quá nhiều yếu tố vật lý để xem xét để làm rõ nó. Tôi nghĩ bây giờ nó có vẻ tốt hơn nhiều.
Igor Mikushkin

0

Không cần phải đi đến tất cả các tính toán kỹ thuật này. Thay vào đó, bạn có thể sử dụng pannel swatches. Bạn lưu màu gốc của mình dưới dạng mẫu màu với tùy chọn Toàn cầu được chọn.

nhập mô tả hình ảnh ở đây

Sau đó, bạn có thể sử dụng bảng màu và chọn tỷ lệ phần trăm bạn cần. Đây không phải là sử dụng minh bạch, nó là mờ đục.

nhập mô tả hình ảnh ở đây

Khi bạn cần xem mã RGB hoặc Hex cho tông màu cuối cùng của mình, sau đó bạn có thể nhấn vào biểu tượng rgb trên bảng màu và bạn có thể thấy các giá trị RGB và Hex.

nhập mô tả hình ảnh ở đây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.