이 색상 그라디언트가 다른 색상보다 훨씬 더 매력적인 이유는 무엇입니까?

나는 내가 개발하고있는 사이트에서 약간의 그라디언트로 놀고 있었고, 특정 색상이 다른 색상보다 더 매력적으로 보이는 이유에 대한 심리학이나 다른 의미에 정말로 관심이 있습니다.

현재 사이트는 다음과 같습니다.

그라디언트는 디자인에 매우 자연스럽게 보입니다. 그러나 믹싱과 매칭을 시작하면 다음과 같이 끝납니다.

"자연스러워"보이는 또 다른 괜찮은 그라디언트를 찾을 수 없습니다. 우리가 이러한 혼합 색상을 인식하는 방법 뒤에 심리학이 무엇인지 궁금합니다. 그라디언트에서 잘 어울리는 색상을 찾는 규칙이 있습니까? 나는 그것이 당신이 가고 싶은 느낌의 종류에 달려 있다고 상상합니다. 모든 의견을 보내 주셔서 감사합니다!

초기 예제와 실험의 주된 차이점은 원본이 색조의 급격한 변화를 다루지 않는다는 것입니다.

황금색에서 자홍색 / 분홍색으로 변하는 것은 컬러 휠을 약 1/6 회전시킵니다. 반대로 실험 (주황색에서 청자색, 청자색에서 황록색, 청록색에서 청자색)은 모두 1/4 회전 이상입니다.

그처럼 많은 변화는 한 번의 색상 변화가 아니라 여러 가지 색상의 진행으로 인식됩니다. 그라디언트는 헤더에 다소 압축되어 있기 때문에 상당히 급격한 변화로 인해 왜 자연스럽게 느껴지지 않는지 설명 할 수 있습니다.

기본 "대상"색상 블록에 다른 색상을 사용하려면 그라디언트 시작을 위해 인접 색상을 선택하십시오. 예를 들어, 끝점으로 청자색의 경우 시작점으로 진한 파란색 또는 자홍색을 선택하십시오. 끝점으로 황록색의 경우 밝은 녹색 또는 빨간색으로 시작하십시오.

물론 이것들은 관련 색상의 분위기에 따라 여전히 다른 "기분"을 줄 것입니다. 청색은 원래의 핑크보다 훨씬 시원하고 차분한 색상입니다. 그러나 그래디언트는 조금 더 부드럽게 보일 것입니다.

"왜 그들이 다르게 인식 되는가"를 묻고 있기 때문에 고려해야 할 또 다른 (매우 괴상한) 것입니다 : RGB 색상의인지 된 발광. 이것은 적용하기가 어렵 기 때문에 거의 정사각형으로 대답하십시오. :)

색상의 발광 값은 색상을 "켜는"방법을 나타냅니다. 색상이 전구이면 저휘도 색상은 희미한 것으로 인식되고 (40W 전구), 고휘도 색상은 매우 밝게 인식됩니다 (100W 전구).

RGB 색상은 실제로 작은 "전구"를 사용하여 표시됩니다. 스크린은 각 픽셀 당 3 개의 작은 "전구"로 구성됩니다 : R (ed), G (reen) 및 B (lue). 색상의 특정 R, G ad B 값은 해당 색상의 환상을 만들기 위해 각 작은 전구를 얼마나 밝게 조명해야하는지 나타냅니다. 예를 들어, 주황색 주황색 (255, 100, 0)은 빨간색 전구를 최대 힘 (255)으로 돌리고 녹색 전구를 희미하게하고 (100) 파란색 전구를 끈 경우 (0) 만들어집니다.

다음은 몇 가지 색상과 색상의 환상을 만들기 위해 각 RGB 구성 요소를 "밝게"만드는 방법을 보여주는 그림입니다. 각 색상 아래의 작은 점은 구성 요소가 얼마나 어둡거나 밝게 표시되는지 나타냅니다.

그림에서 볼 수 있듯이 흰색을 만들려면 예를 들어 3 개의 구성 요소를 최대 (255)로 설정합니다. 이 3 개의 작은 "전구"의 조합은 눈에 의해 흰색으로 인식됩니다 (왜 큰 왜곡이 될지 설명). 검은 색을 만들려면 모두 꺼야합니다. 빛이없고 무색입니다.

각 색상의 발광은 세 가지 구성 요소 각각을 "얼마나 밝게"추가하여 계산됩니다. 3 개의 구성 요소가 최대 값으로 바뀌기 때문에 흰색은 가장 높은 발광색입니다. 블랙은 가장 낮은 것입니다. 노란색을 만들려면 최대 2 개의 구성 요소가 필요하지만 녹색을 만들려면 하나만 필요하므로 노란색은 녹색보다 가장 높은 발광성을 갖습니다. 그래서, 당신은 다소 말할 수 있습니다

L = R + G + B

그래도 조금 더 복잡합니다. 그림을 보면 녹색 구성 요소가 더 밝게 보입니다. 사실 그것은 눈에 의해 가장 밝은 것으로 인식됩니다. 반면에 파란색은 매우 어둡게 인식됩니다. 발광을 계산하는 정확한 공식은이를 고려합니다.

L = 0.2126 R + 0.7152 G + 0.0722 B

각 색상에 대해 계산 된 발광과 함께 다시 그림이 있습니다.

눈에서 알 수 있듯이 노란색은 주황색보다 더 밝지 만 주황색은 자홍색만큼 밝거나 적습니다.

이제 두 개의 원래 팔레트에서 색상을 가져와 발광성을 계산했습니다.

첫 번째 경우, 원하는 것은 첫 번째 색상의 발광이 맨 아래 (200)의 두 번째 색상보다 낮습니다 (125). 그러면 그라디언트가 점등되는 것처럼 광도가 증가한 것으로 인식됩니다.

두 번째 경우에는 큰 차이가 없으므로 색상 변화와 마찬가지로 그라디언트가 인식됩니다.

세 번째 경우, 맨 아래 색이 맨 위 색보다 더 높은 발광성을 가지므로 그라디언트는 희미 해지는 것처럼 광도 감소로 인식됩니다.

이것은 색상 휠에서 서로 같은 거리에있는 2 개의 색상을 원하는 색상과 선택하더라도 결과가 다르게 인식되는 이유를 설명합니다.

에서 http://www.colormatters.com/color-and-design/basic-color-theory

1-유사한 색상을 기반으로 한 색상 구성표

유사한 색상은 황록색, 노랑색, 노랑색과 같은 12 파트 컬러 휠에서 나란히있는 3 가지 색상입니다. 일반적으로 세 가지 색상 중 하나가 우세합니다.

2-보색에 따른 색 구성표

보색은 빨강과 녹색, 빨강 자주색과 황록색과 같이 서로 마주 보는 두 가지 색상입니다. 위의 그림에서, 잎에는 황록색의 여러 변형이 있고 난초에는 붉은 자주색의 여러 변형이 있습니다. 이 반대 색상은 최대 대비와 최대 안정성을 만듭니다.

3-자연을 기반으로 한 색 구성표

자연은 색상 조화를위한 완벽한 출발점을 제공합니다. 위의 그림에서 빨간색 노란색과 녹색은이 조합이 기술적 인 색상 조화에 맞는지 여부에 관계없이 조화로운 디자인을 만듭니다.

AmeliaBR의 답변에 추가하기 만하면됩니다 (댓글이어야하지만 이미지를 게시하고 싶습니다). 색조를 "이동"하려고하지만 시작과 끝 색상 사이의 동일한 상대 거리를 유지하는 한 가지 방법은 Photoshop의 색조 도구를 사용하는 것입니다.

첫 번째 이미지 (원하는 그라디언트가있는 이미지)를 가져 와서 Photoshop에서 엽니 다. 그런 다음 색조 / 채도 도구 ( Image->Adjustment->Hue Saturation또는 Ctr+U)를 열고 첫 번째 슬라이더 (색조)로 재생하십시오. 이렇게하면 전체 이미지의 색조가 이동하지만 기존의 모든 색조 (특히 그라디언트의 시작 및 종료 색조)간에 동일한 관계가 유지됩니다. 인터페이스 뒷면이 검은 색 (또는 중간 회색)이므로 색조 변화는 영향을 미치지 않습니다.

원하는 조합을 찾으면 색조 / 채도 변경 사항을 수락하고 (을 클릭 OK) 스포이드 도구를 사용하여 (을 누름 I) 그라디언트의 시작 및 끝 색상을 선택하십시오.

이 예에서 나는 색조를 -155로 바꿨으며, 그래디언트는 이제 유행의 아쿠아 마린 그린에서 블루로 바뀌 었습니다. 이는 해상 에코로 시원하고 차분한 그라디언트입니다.

색상 인식에는 매우 개인적인 요소가 있습니다. 다른 사람에게 "자연스러운"것으로 보이는 것은 수차로 인식 될 수 있습니다.