색 구성표가 주어지면 웹 사이트 디자인에 어떻게 적용합니까?

그래서이 색 구성표가 있다고 말할 구체적인 내용이 있습니다.

출처

보완 색상, 단색 색상 등을 기반으로 일관된 색상 구성표를 선택하는 방법에 대한 많은 기사가 있지만 일단 색상 세트가 있으면 헤더의 색상, 연결되는 색상, 배경을 어떻게 결정합니까? 그리고 텍스트. 어두운 곳이나 어두운 곳에서 빛을 원한다고 결정하더라도 나머지 색상을 화면에 표시하면 사이트가 여전히보기 흉하게 보일 수 있습니다.

어느 색상이 어디로 갈지 결정하는 데 도움이되는 경험 규칙 또는 일반 지침이 있습니까?

나는 많은 사람들이 내가 (일종의) 동의하지 않는 "정답이 없다"와 같은 것을 언급하는 것을 본다 ... 적어도 하나의 정답이있을 수있다. 아마도 몇 개일 뿐이며, 오답도 많다고 확신한다. 좋은 디자인은 사용 가능한 리소스와 시간을 기준으로 최상의 솔루션을 제공하는 것입니다. 물론 이러한 솔루션은 여러 대안보다 중요합니다. 토론의 목적으로 색상 팔레트를 제공 했으므로 제공된 색상 팔레트를 기반으로 질문에 대답하겠습니다. (이 작업을 수행하는 레이아웃이 여전히 광범위하다는 것을 보지 못했지만 따라야 할 프로세스가 있습니다.)

따라서 웹 프로젝트에서 색 구성표를 만들 때 가장 먼저 선택하는 색은 본문의 배경색과 기본 텍스트 색입니다. 일반적으로 이러한 역할을 수행하기 위해 가장 대조적 인 두 가지 색상을 선택하는 것이 좋으며 예제 팔레트도 예외는 아니므로이 경우 색상은 # DEE1DD 및 # 28363D입니다. 이제 텍스트에 사용할 것과 배경에 사용할 것을 결정해야하며 대부분의 경우 배경에 밝은 색을 사용하고 텍스트에 더 어두운 색을 사용하려고합니다. 어두운 색상의 밝은 색상보다 밝은 색상의 어두운 색상을 더 쉽게 읽는다는 연구 결과가 있습니다. 밴드 또는 뭔가 ... 나는 여기에 해당하지 않는 것으로 가정합니다). 그래서,

다음으로 저는 다음으로 가장 중요한 항목 인 하이퍼 링크라고 생각합니다. 읽기가 어렵지 않고 배경에서 충분히 대비되는 색상을 원하지만 텍스트에서 눈에 띄게 대비되는 색상을 원합니다. 이 예에서 밝은 녹색의 대부분은 밝은 배경에서 읽을 수 없으므로 가장 확실한 대답은 # 2F575D입니다.

다음으로 채색해야 할 헤더를 암시하고 다시 배경과 대조해야합니다. 미니멀리즘을 위해 이미 몸에 사용한 색상을 재사용하려고 시도합니다.이 경우 텍스트 색상이 너무 어두워서 많은 공간을 채우지 못하므로 # 2F575D를 선택하는 경향이 있습니다. 위의 모든 이유는 배경 본문 색상 # DEE1DD를 사용합니다. 헤더의 텍스트 또는 링크를 채우려면.

마지막으로 호버 상태와 같은 필수 요소가 아닌 디자인 요소를 마지막으로 다루고 선택할 수있는 몇 가지 다른 녹색이 있습니다. 다시 말하지만 링크를 넘길 때 링크가 사라지지 않으므로 배경과 충분히 대조되어야합니다. # 658B6F ...

그리고 ... Voila! 이제 (기본) 4 색 구성표가 있습니다. 이 프로세스가 나에게 도움이되는만큼 도움이되기를 바랍니다.

링크 한 웹 사이트에서 해당 색상을 사용하는 방법을 보여줍니다.

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

나는 일반적으로 디자인에 내 자신의 색이 튀어 나옵니다. 약간 틀렸다는 것을 알고 있더라도 적어도 두 가지 단색이나 최소한 하나가 있습니다. 그런 다음 내 아이디어를 배치하면 기본 색상 (가장 많이 사용한 색상)을 가져와 컬러 휠에 추가합니다. 그렇게하면 다른 색으로 교체됩니다. 또는 원본 색상이 가장 많은 이미지를 찾으려고합니다.

나는 기사를 읽었고 이미지를 가져 와서 그 색상을 기반으로 작업을 디자인했지만 그렇게 할 수 없습니다. 하나 이상의 색상을 염두에두고 내 자신의 디자인을 만든 다음 색상 이론 기법을 사용합니다.

그것이 도움이되기를 바랍니다

무엇을 취해야하는지에 대한 공식은 없으며, 배경과 기타 등등은 디자인이 예술인 이유입니다.

일반적으로 나는 어떤 글꼴 색상이 어떤 배경에서 더 잘 보이는지와 같이 내가 가지고있는 색상 세트로 많은 시도를 할 것입니다.

일반적으로 사용되는 색상을 대조하는 규칙이 있지만 대부분의 사람들은 어두운 색 배경의 밝은 색 글꼴과 같이 상식이라고 말합니다. 그러면 경고 상자, 탐색 등과 같은 하위 구성 요소의 색상을 어떻게 결정합니까?

내가 알다시피, 당신은 웹 사이트를위한 기본 구조를 준비해야합니다. 하위 구성 요소의 색상이 부드럽기 때문에 즉각적인주의가 필요하지 않습니다.

그것이 좋은지 아닌지 어떻게 알 수 있습니까? "좋아요"라고 말하면 바로 그것이 좋습니다. 그것은 항상 다른 사람들로부터 두 번째 의견을 얻는 데 도움이됩니다.

대체로 색상 조합을 계속 시도하고 하나만 고수하지 마십시오. 결국에는 달성 한 구성에 놀랄 수 있습니다.

@ 컬러 조합 : 웹 사이트에서 제공하는 조합은 시작하기에 충분합니다.

첫 아내와 큰 캔버스 패널과 아크릴 페인트로 된 여러 개의 튜브를 받았을 때가 생각납니다. 우리는 캔버스를 바닥에 놓고 그 위에 무작위로 임의의 색을 뿌렸습니다. 우리는 그것을 건조시킨 다음 벽난로 위에 매 달았습니다. 시간이 지남에 따라 몇몇 손님은 그것이 얼마나 멋져 보이고 그것이 비싼 예술 작품이라고 생각했는지, 즉 우리가 그림을 그리는 방법을 말할 때까지 말했습니다. 그것은 모두 보는 사람의 눈에 달려 있습니다.

그 이야기와 관련하여, 나는 대다수의 시청자에게 추악한 색상 콤보가 없다는 것에 동의해야합니다. 그러나 많은 것이 없습니다. 나는 당신 이 그것을 올바르게 얻는 것에 대해 너무 많은 스트레스를 받아야한다고 생각하지 않습니다 . 웹 사이트에 포함 된 내용은 색상을 많이 선택하지 못할 수 있습니다. 내용은 항상 디자인보다 우선합니다.