Tại sao gradient màu này lại hấp dẫn hơn nhiều so với những màu khác?

Tôi đã chơi xung quanh với một số độ dốc trên một trang web tôi đang phát triển và tôi thực sự quan tâm đến tâm lý hoặc ý nghĩa khác đằng sau lý do tại sao một số màu sắc xuất hiện hấp dẫn hơn các trang web khác.

Đây là trang web ngay bây giờ:

Các gradient ở đó trông khá tự nhiên cho thiết kế. Nhưng nếu tôi bắt đầu trộn và kết hợp, tôi sẽ kết thúc với điều này:

Tôi dường như không thể tìm thấy một gradient tốt nào trông "tự nhiên". Tôi đang tự hỏi tâm lý đằng sau việc chúng ta cảm nhận những sự pha trộn màu sắc này như thế nào ... có một số quy tắc để tìm các màu kết hợp tốt với nhau trong một gradient không? Tôi tưởng tượng nó phụ thuộc vào loại cảm giác bạn đang đi. Tôi đánh giá cao bất kỳ và tất cả các đầu vào!

Sự khác biệt chính giữa ví dụ ban đầu và các thử nghiệm của bạn là bản gốc không bao gồm gần như một sự thay đổi mạnh mẽ về sắc độ.

Đi từ vàng-vàng sang đỏ tươi / hồng là khoảng 1/6 trên bánh xe màu. Ngược lại, các thí nghiệm của bạn (đỏ cam đến xanh tím, xanh tím đến vàng lục và lục lam đến xanh tím) đều lần lượt hơn 1/4.

Sự thay đổi đó không được coi là một sự thay đổi trong một màu, mà là sự tiến triển qua nhiều màu sắc. Bởi vì độ dốc của bạn khá cô đọng trong các tiêu đề của bạn, điều đó diễn ra như một sự thay đổi khá lớn và có thể giải thích tại sao nó không cảm thấy "tự nhiên" đối với bạn.

Nếu bạn muốn có một màu khác cho các khối màu "đích" chính của mình, hãy chọn một màu lân cận để bắt đầu gradient. Ví dụ, đối với màu xanh tím làm điểm cuối, hãy chọn màu xanh đậm hoặc màu đỏ tươi cho điểm bắt đầu. Đối với màu vàng-xanh làm điểm cuối, bắt đầu với màu xanh lá cây hoặc đỏ tươi.

Tất nhiên, những thứ này vẫn sẽ mang đến cho bạn những "tâm trạng" khác nhau tùy thuộc vào tâm trạng của các màu liên quan - màu xanh tím là màu lạnh hơn, dịu hơn nhiều so với màu hồng trong bản gốc. Nhưng ít nhất các gradient sẽ trông mịn hơn một chút.

Vì bạn đang hỏi "tại sao chúng được cảm nhận khác nhau", đây là một điều khác (rất táo bạo) cần xem xét: sự phát quang nhận thức của một màu RGB. Điều này rất khó áp dụng, vì vậy hãy xem câu trả lời của tôi gần như chỉ là chuyện vặt :)

Giá trị phát quang của một màu cho biết mức độ "thắp sáng" mà bạn cảm nhận được. Nếu màu sắc là bóng đèn, màu có độ phát quang thấp sẽ được coi là mờ (bóng đèn 40W), trong khi màu có độ phát quang cao sẽ được coi là rất sáng (bóng đèn 100W).

Màu sắc RGB trên thực tế được hiển thị bằng cách sử dụng "bóng đèn" nhỏ. Các màn hình được tạo thành từ các "bóng đèn" nhỏ, ba cho mỗi pixel: R (ed), G (reen) và B (lue). Các giá trị R, G ad B cụ thể của một màu cho biết mỗi bóng đèn nhỏ sẽ sáng như thế nào để tạo ra ảo ảnh của màu đó. Ví dụ, màu cam RGB (255, 100, 0) được tạo ra bằng cách chuyển bóng đèn màu đỏ thành hiệu lực tối đa của nó (255), làm cho bóng đèn màu xanh lục mờ (100) và tắt bóng đèn màu xanh lam (0).

Dưới đây là một minh họa cho thấy một số màu sắc và mức độ "sáng" của từng thành phần RGB nên được tạo ra để tạo ảo giác về màu sắc. Các chấm nhỏ dưới mỗi màu cho biết mức độ mờ hoặc sáng của thành phần được tạo ra.

Như bạn có thể thấy trong hình minh họa, ví dụ, để tạo màu trắng, bạn biến 3 thành phần thành tối đa (255). Sự kết hợp của 3 "bóng đèn" nhỏ này được mắt cảm nhận là màu trắng (giải thích tại sao sẽ là một sự tiêu hóa lớn). Để tạo màu đen, bạn tắt tất cả chúng. Điều đó thật dễ dàng: không ánh sáng không màu sắc.

Độ phát quang của mỗi màu được tính bằng cách thêm "độ sáng" của mỗi 3 thành phần. Màu trắng sẽ là màu có độ phát quang cao nhất, vì 3 thành phần được chuyển thành giá trị tối đa của nó. Đen, sẽ là một trong những thấp nhất. Màu vàng sẽ có độ phát quang cao nhất so với màu xanh lá cây vì để tạo màu vàng, bạn cần 2 thành phần đến mức tối đa nhưng để tạo màu xanh, bạn chỉ cần một. Vì vậy, ít nhiều bạn có thể nói rằng

L = R + G + B

Nó là một chút phức tạp hơn mặc dù. Bằng cách nhìn vào hình minh họa, bạn sẽ nhận thấy rằng thành phần màu xanh lá cây dường như sáng hơn. Trên thực tế, nó được cảm nhận bằng mắt là thứ sáng nhất. Màu xanh, mặt khác, được coi là rất mờ. Công thức chính xác để tính toán phát quang có tính đến điều đó.

L = 0,2126 R + 0,752 G + 0,0722 B

Dưới đây là hình minh họa một lần nữa, với độ phát quang được tính toán cho mỗi màu.

Bạn sẽ nhận thấy rằng, như mắt bạn có thể đã nói với bạn, màu vàng sáng hơn màu cam nhưng màu cam sáng hơn hoặc ít hơn màu đỏ tươi.

Bây giờ, tôi đã lấy màu từ hai bảng màu ban đầu của bạn và tính toán độ phát quang của chúng.

Trong trường hợp đầu tiên, màu bạn thích, bạn sẽ thấy rằng độ phát quang của màu thứ nhất, ở phía dưới thấp hơn (125) so với màu thứ hai, ở trên cùng (200). Độ dốc, sau đó, được coi là sự gia tăng độ sáng, như thể nó sẽ sáng lên.

Trong trường hợp thứ hai, không có nhiều sự khác biệt, do đó, gradient được cảm nhận giống như một sự thay đổi về sắc độ.

Trong trường hợp thứ ba, màu dưới cùng có độ phát quang cao hơn màu trên cùng, do đó, độ dốc được coi là giảm độ chói, như thể nó sẽ bị mờ đi.

Điều này sẽ giải thích tại sao, ngay cả khi bạn chọn 2 màu được đặt tương đối giống nhau trên bánh xe màu so với màu bạn thích, kết quả sẽ được cảm nhận khác nhau.

Từ http://www.colormatters.com/color-and-design/basic-color-theory

1 - Một bảng màu dựa trên các màu tương tự

Màu tương tự là ba màu bất kỳ nằm cạnh nhau trên bánh xe màu 12 phần, chẳng hạn như vàng-xanh, vàng và vàng-cam. Thông thường một trong ba màu chiếm ưu thế.

2 - Một bảng màu dựa trên các màu bổ sung

Màu bổ sung là hai màu bất kỳ đối diện trực tiếp với nhau, chẳng hạn như đỏ và xanh lá cây và đỏ-tím và vàng-lục. Trong hình minh họa ở trên, có một số biến thể của màu vàng-xanh trong lá và một số biến thể của màu đỏ-tím trong hoa lan. Những màu đối lập này tạo ra độ tương phản tối đa và ổn định tối đa.

3 - Một bảng màu dựa trên thiên nhiên

Thiên nhiên cung cấp một điểm khởi hành hoàn hảo cho sự hài hòa màu sắc. Trong hình minh họa ở trên, màu đỏ vàng và xanh lá cây tạo ra một thiết kế hài hòa, bất kể sự kết hợp này có phù hợp với một công thức kỹ thuật cho sự hài hòa màu sắc hay không.

Chỉ cần thêm vào câu trả lời của AmeliaBR (nên là một bình luận, nhưng tôi muốn đăng một hình ảnh). Một cách để thử "dịch chuyển" màu sắc của bạn nhưng vẫn giữ khoảng cách tương đối giống nhau giữa màu bắt đầu và màu kết thúc có thể là sử dụng công cụ màu của Photoshop.

Lấy hình ảnh đầu tiên (ảnh có độ dốc bạn thích) và mở nó trong Photoshop. Sau đó mở công cụ Hue / Saturation ( Image->Adjustment->Hue Saturationhoặc Ctr+U) và chơi với thanh trượt đầu tiên (Hue). Điều này sẽ thay đổi màu sắc của toàn bộ hình ảnh nhưng vẫn giữ mối quan hệ giống nhau giữa tất cả các màu hiện có (đặc biệt là màu bắt đầu và màu kết thúc của độ dốc của bạn). Vì mặt sau của giao diện của bạn là màu đen (hoặc màu xám trung tính), sự thay đổi màu sắc sẽ không ảnh hưởng đến nó.

Nếu bạn tìm thấy một sự kết hợp mà bạn thích, thì chỉ cần chấp nhận các thay đổi Hue / Saturation (nhấp chuột OK) và sử dụng công cụ Eyedropper (nhấn I) chọn màu bắt đầu và kết thúc của gradient.

Trong ví dụ này, tôi đã chuyển màu sắc -155 và độ dốc bây giờ chuyển từ màu xanh lá cây Aquamarine (bao giờ là hợp thời trang) sang màu xanh lam, là một độ dốc mát mẻ, êm dịu với tiếng vang hải lý.

Tâm trí bạn, nhận thức màu sắc có một thành phần rất riêng. Những gì bạn có thể tìm thấy "tự nhiên" đối với một số người khác có thể được coi là quang sai.