웹 디자인의 색상 조합. 웹 디자인에서 색상을 사용하는 기본 원칙

웹 디자인의 색상 일치는 중세 시대로 거슬러 올라가 인류의 뛰어난 작품을 만드는 데 사용되는 중요한 분야입니다. 그럼 작은 포스트 하나로 압축해보도록 할게요!)

물론, 하나의 게시물로 색상 이론의 전체 본질을 이해하기에 충분하지 않지만 이 분야의 주요 논제와 개념이 포함되어 있습니다.

다음은 웹사이트에 적합한 색 구성표를 선택하기 위한 5단계입니다.

첫 번째 단계가 가장 중요합니다. 메인 색상은 사이트의 첫인상을 만들고 브랜드와 청중이 경험하는 감정 사이의 연결을 설정합니다. 이 모든 것이 귀하의 정체성을 생성하므로 기본 색상 선택에 매우 철저하게 접근해야 합니다.

물론 브랜드가 이미 색상과 연결되어 있으면 이 단계가 훨씬 쉬워집니다.

첫째, 다양한 색상이 다른 감정을 불러일으킨다는 점을 염두에 두어야 합니다. 그리고 이 사실은 과학적으로 확인되었습니다. 같은 색이라도 다른 음영이라도 관객의 감정에 다른 방식으로 영향을 미칩니다. 사람의 개인적인 관계에 따라 항상 어느 정도의 불확실성이 있지만 일반적으로 동일한 색상이 다른 사람들에게 동일한 감정을 유발할 수 있습니다.

• 빨간색: 열정, 공격성, 관련성.
• 주황색: 민첩성, 에너지.
• 노란색: 열정, 행복, 주의/경고.
• 녹색: 성장, 안정성, 자연.
• 파란색: 평온, 개방성.
• 파란색: 안전, 신뢰, 전문성.
• 흰색: 청결, 건강.
• 보라색: 사치, 미스터리, 로맨스(밝은 색조).

당연히 많은 캔이 파란색 기반 색 구성표를 사용합니다.

당신과 다른 감정을 가질 수 있는 특정 그룹의 사람들을 위해 디자인하고 있음을 기억하십시오. 또한 성별, 문화 또는 종교가 다른 동일한 피부색에 대한 다른 태도를 고려할 가치가 있습니다.

기본 색상을 선택할 때 먼저 고려되는 색상 목록에서 경쟁사를 제외해야 합니다. 그런 다음 브랜드가 어떤 분위기를 조성해야 하는지, 어떤 감정을 불러일으킬지 고민해야 합니다.

정확한 색상(색조 및 채도) 결정

기본 색상을 선택했으면 색조와 채도를 결정해야 합니다. 위에서 언급했듯이 색상의 톤과 채도는 의미를 변경할 수 있습니다. 예를 들어, 노란색의 어두운 색조(예: 금색)는 고대의 느낌을 주지만 밝은 색조는 이 효과를 주지 않습니다.

일반적인 규칙은 밝은 색조가 에너지, 신선함, 재미, 더 어두운 색조, 즉 안정성과 전문성의 감각을 생성한다는 것입니다.

그런 다음 RGB, CMYK, HEX 또는 Pantone 시스템에서 색상의 정확한 숫자 값을 결정해야 디자인 프로세스에 사용됩니다.

예를 들어, 일부 웹 리소스에서 이미 사용된 색상을 선택하고 이를 적용하려는 경우 Stylify Me 서비스를 사용할 수 있습니다.

색 구성표 유형 선택

나머지 색상을 선택하기 전에 색상이 상호 작용하는 방식을 결정해야 합니다. 더 대조적인 색 구성표 또는 더 조용한 색 구성표를 원하십니까?

원하는 대로 색상을 결합할 수 있지만 여기서는 가장 일반적인 색상 구성표를 제시했습니다.

단색화

기본 색상의 다른 톤을 사용함을 의미합니다. 미니멀리스트 디자인 스타일에 가장 자주 사용됩니다.

비슷한 물건

색상환에서 서로 가깝게 나타나는 유사한 색상.

구배

한 색상에서 다른 색상으로 점진적인 전환. 아날로그보다 화려하지만 다른 디자인 요소에 주의를 산만하게 할 수 있습니다.

대조되는

두 개의 반대 색상입니다. 색상환을 보면 서로 반대되는 색상이 가장 대조적입니다. 예를 들어 빨간색과 녹색 또는 노란색과 보라색. 이 색 구성표를 사용하면 디자인의 시각적 효과에 역동성을 더합니다.

대비는 사용자의 주의를 조작하는 데 도움이 되어 더 중요한 요소(버튼)를 강조하고 덜 중요한 요소를 숨길 수 있습니다.

듀플렉스

2가지 색상만 사용하여 이미지를 만듭니다. - 대비되는 색 구성표의 일종의 장식으로 색 구성표가 아닙니다.

간단히 말해서 듀플렉스는 멋지게 보입니다. 사용자의 관심을 "끌어당기는" 동적 시각 효과입니다.

삼인조

색상환에서 서로 같은 거리에 있는 세 가지 색상. 가장 일반적으로 사용되는 색 구성표 중 하나인 트라이어드는 신뢰할 수 있는 표준입니다. 올바르게 사용하기가 어렵습니다. 색상환에 정삼각형을 그리면 트라이어드에 세 가지 색상이 있습니다.

분할(분할) 대비

대조되는 두 가지 색상 외에 세 번째 색상을 사용합니다. 대조 구성표뿐만 아니라 디자인의 필요한 부분을 강조할 수 있지만 더 많은 가능성이 있습니다.

보조 색상 선택

색 구성표를 정의하면 보조 색상 선택을 단순화하는 데 도움이 됩니다. 그러나 모든 사람은 기본 색상을 선택할 때와 마찬가지로 음영과 채도를 선택해야 합니다.

간단한 Paletton 도구를 사용하면 다양한 색 구성표를 시각화할 수 있습니다. 기본 색상을 선택하고 색상 구성표를 정의할 수 있으며 Paletton은 배경 색상을 정의합니다.

각 색상을 어디에 어떻게 사용할지 결정

이제 프로젝트에 사용할 수 있는 훌륭한 색상 팔레트가 있습니다. 이제 이를 어떻게 사용할까요? 웹사이트에 색상을 적용하는 것은 디자이너의 예술과 기술이 만나는 곳입니다.

액센트는 클릭 유도문안 요소나 중요한 버튼에만 사용되어서는 안 됩니다. 사이트의 다른 부분에 적용할 수 있습니다. 예를 들어, 텍스트에서 중요한 단어를 강조 표시하여 사용자가 특별한 주의를 기울일 수 있도록 합니다.

먼저 사이트를 흑백으로 디자인해야 합니다. 회색조를 사용하여 특정 요소의 중요도를 결정하고 프로젝트의 각 부분의 중요도에 따라 계층을 구축합니다.

결론

그래서 웹 디자인에서 색상 조합을 선택하는 것은 웹 사이트 디자인에서 중요한 단계이며 철저하게 접근해야 함을 알게 되었습니다. 메인 컬러의 선택이 매우 중요하기 때문에 사이트의 전반적인 분위기를 결정합니다.

색 구성표의 유형은 사이트가 방문자에게 불러일으키는 감정에도 영향을 미칩니다. 유형은 색상이 사용되는 순서를 결정할 때 사용할 수 있는 도구의 수를 결정합니다.

얘들 아, 우리는 우리의 영혼을 사이트에 넣었습니다. 에 감사하다
당신이 이 아름다움을 발견했다는 것을. 영감을 주셔서 감사합니다.
우리와 함께 페이스북그리고 연락하다

계획 번호 1. 보완 조합

보색 또는 보색 대조 색상은 Itten 색상환의 반대쪽에 있는 색상입니다. 그들의 조합은 특히 최대 채도에서 매우 활기차고 활기차게 보입니다.

계획 번호 2. Triad - 3 가지 색상 조합

동일한 간격의 3가지 색상 조합. 조화를 유지하면서 고대비를 제공합니다. 이 구성은 창백하고 채도가 낮은 색상을 사용하는 경우에도 매우 생생하게 보입니다.

계획 번호 3. 유사한 조합

색상환에서 서로 옆에 있는 2~5개의 색상 조합(이상적으로는 2~3개의 색상). 인상: 차분하고 매력적입니다. 유사한 음소거 색상 조합의 예: 노란색-주황색, 노란색, 노란색-녹색, 녹색, 파란색-녹색.

계획 번호 4. 별도의 보완 조합

보색 조합의 변형으로 반대 색상 대신 인접 색상만 사용됩니다. 기본 색상과 두 가지 추가 색상의 조합입니다. 이 계획은 거의 대조적으로 보이지만 그렇게 강렬하지는 않습니다. 보완 조합을 올바르게 사용할 수 있는지 확실하지 않은 경우 별도의 보완 조합을 사용하십시오.

계획 번호 5. 연습장 - 4 가지 색상 조합

하나의 색상이 주요 색상이고 두 가지 색상은 보완적이며 하나는 강조를 강조하는 색 구성표입니다. 예: 청록색, 청자색, 빨강-주황색, 노랑-주황색.

계획 번호 6. 광장

개별 색상의 조합

• 흰색: 모든 것과 어울립니다. 파란색, 빨간색 및 검은색과의 최상의 조합.
• 베이지: 블루, 브라운, 에메랄드, 블랙, 레드, 화이트.
• 회색: 자홍색, 빨강, 자주색, 분홍색, 파랑이 있습니다.
• 핑크: 갈색, 흰색, 민트 그린, 올리브, 회색, 청록색, 옅은 파란색.
• 자홍색(진한 분홍색): 회색, 황갈색, 라임 색상, 민트 녹색, 갈색.
• 빨간색: 노란색, 흰색, 갈색, 녹색, 파란색 및 검정색.
• 토마토 레드: 블루, 민트 그린, 샌드, 크림 같은 흰색, 회색.
• 체리 레드: 하늘색, 회색, 밝은 주황색, 모래, 옅은 노란색, 베이지색.
• 크림슨 레드: 화이트, 블랙, 다마스크 로즈 색상.
• 브라운: 밝은 파란색, 크림색, 분홍색, 엷은 황갈색, 녹색, 베이지색.
• 밝은 갈색: 옅은 노란색, 크림색 흰색, 파란색, 녹색, 자주색, 빨간색.
• 다크 브라운: 레몬 옐로우, 블루, 민트 그린, 퍼플 핑크, 라임 컬러.
• 적갈색: 분홍색, 짙은 갈색, 파란색, 녹색, 보라색.
• 주황색: 라이트 블루, 블루, 퍼플, 퍼플, 화이트, 블랙.
• 밝은 주황색: 회색, 갈색, 올리브.
• 다크 오렌지: 옅은 노란색, 올리브, 갈색, 체리.
• 노란색: 파란색, 보라색, 하늘색, 보라색, 회색, 검정색.
• 레몬 옐로우: 체리 레드, 브라운, 블루, 그레이.
• 옅은 노란색: 자홍색, 회색, 갈색, 빨간색 음영, 황갈색, 파란색, 자주색.
• 황금색: 회색, 갈색, 하늘빛, 빨간색, 검정색.
• 올리브: 오렌지, 라이트 브라운, 브라운.
• 녹색: 황금빛 갈색, 주황색, 샐러드, 노란색, 갈색, 회색, 크림색, 검은색, 크림색 흰색.
• 양상추 색상: 갈색, 황갈색, 엷은 황갈색, 회색, 진한 파란색, 빨간색, 회색.
• 청록색: 자홍색, 체리 레드, 옐로우, 브라운, 크림, 다크 퍼플.
• 전기 기사는 황금빛 노란색, 갈색, 밝은 갈색, 회색 또는 은색과 함께 잘 생겼습니다.
• 파란색: 빨간색, 회색, 갈색, 주황색, 분홍색, 흰색, 노란색.
• 진한 파란색: 밝은 자주색, 밝은 파란색, 황록색, 갈색, 회색, 옅은 노란색, 주황색, 녹색, 빨간색, 흰색.
• 라일락: 오렌지, 핑크, 짙은 보라색, 올리브, 회색, 노란색, 흰색.
• 진한 자주색: 황금 갈색, 옅은 노란색, 회색, 청록색, 민트 녹색, 밝은 주황색.
• 검정색은 다재다능하고 우아하며 모든 조합으로 보이며 무엇보다도 주황색, 분홍색, 샐러드, 흰색, 빨간색, 라일락색 또는 노란색과 잘 어울립니다.

사람들은 여전히 ​​콘텐츠가 핵심인가를 놓고 논쟁을 벌이고 있다. 저에게 묻는다면 전적으로 동의하며 제 의견은 제 경험에 근거합니다. 그것이 지배적이든 아니든, 똑같이 중요한 것이 있습니다! 이것은 무엇입니까? 나는 모든 사람들이 "표지로 책을 판단하지 말라"고 말하는 것을 좋아한다는 것을 압니다. 하지만 원래 표지가 아닌 다른 사람의 관심을 끌 계획은 무엇입니까? 분명히 누군가의 관심을 끌면 나머지 노력을 콘텐츠에 보낼 수 있습니다. 웹 디자인의 색상과 관리 방법에 대해 설명합니다.

첫인상은 단 한 번뿐입니다.

방문자를 귀하의 사이트에 강제로 방문하게 하려는 특정 작업이 항상 하나 있습니다. 이것이 가장 강조하는 행동입니다. 구독 버튼, 다음 버튼 또는 구매 버튼이 될 수 있습니다.

버튼이 무엇이든, 클릭 여부는 방문자가 사이트에 있을 때 느끼는 감정에 달려 있다는 점을 항상 기억하십시오.

이 기사에서는 웹사이트를 흥미롭고 흥미롭게 만드는 5가지 가장 인기 있는 색상에 대해 알아볼 것입니다.

Pinterest는 다양한 빨간색을 사용합니다.

의심의 여지없이 빨간색은 가장 뜨거운 색으로 간주됩니다. Pinterest 색상 팔레트를 보면 빨간색이 기본 색상임을 즉시 알 수 있습니다.

빨간색은 종종 사랑과 관련이 있습니다. 강렬하고 다이내믹한 컬러로, 그 컬러에 가까운 어떤 것에도 사랑받고 있다는 느낌을 받을 수 있습니다.

이 색상은 강도가 긴박감을 주기 때문에 스톡 장식에서 자주 볼 수 있습니다.

무엇보다 이 강렬한 색상은 사이트 방문자를 흥분시키거나 보람을 느끼게 할 수 있습니다. 그러나 동시에 그것에 대한 욕구를 억제할 수 있으므로 항상 조심해야 합니다.

빨간색을 사용하여 웹 디자인을 강조 표시하십시오. 흰색, 회색, 밝은 파란색 또는 은색 색상과 잘 어울립니다.

빨간색 사용의 실제 예:

인간의 눈은 630~700나노미터 사이의 파장을 가진 빛을 볼 때 빨간색으로 보입니다. 이 범위 이상의 빛을 적외선이라고 하며 사람의 눈에는 감지되지 않지만 열로 식별할 수 있습니다. - 위키피디아

붉은 색 팔레트의 폭넓은 사용(by jimjim421):

빨간색과 10개의 연관성:

• 피
• 전쟁
• 불
• 남성다움
• 열정
• 유혹
• 강제
• 에너지
• 용감

아마존은 풍부한 오렌지를 좋아합니다.

주황색은 따뜻하고 활동적인 색상이지만 빨간색만큼 강렬하지는 않습니다. 오렌지는 뜨겁다기보다는 따뜻하다.

에너지로 가득 찬 이 생생한 색상은 사람들에게 행동을 강요하거나 강요하기보다는 격려합니다. 주황색은 가끔 강렬한 것으로 인식됩니다. 구매, 구독, 판매 또는 팔로우와 같은 행동을 요구합니다. 귀하의 사이트를 방문한 후 게스트에게 동기 부여, 즐겁고 창의적이며 열정적인 느낌을 주고 싶다면 주황색을 사용하는 것이 좋습니다.

주황색 사용의 실제 예:

주황색 팔레트 사용 증가 마네키네코:

주황색과의 10가지 연관성:

• 낙천주의
• 정의
• 불
• 경고
• 가을
• 종교
• 지구력
• 동정심
• 할로윈
• 유기체

푸른 색 페이스북보안 감각을 만듭니다.

파란색을 사용하여 많은 비즈니스 및 기업 웹사이트를 찾을 수 있습니다. 우리는 이 색상을 신뢰할 수 있고 안전하며 신뢰와 경험을 불러일으키는 것과 연관시킵니다. 따라서 회사 웹 사이트에서 어떤 인상을 남길지 걱정하는 모든 사업가가 파란색을 선호하는 것은 놀라운 일이 아닙니다. 파란색은 빨간색과 완전히 반대되는 느낌을 줍니다. 파란색은 우리를 진정시키며 너무 걱정할 필요가 없습니다.

파란색 사용의 실제 예:

나는 당신이 몰랐을 내기:

독일에서 실시되어 2009년에 발표된 한 여론 조사에 따르면 조사 대상 남성의 46%와 여성의 44%가 파란색을 가장 좋아하는 색으로 꼽았습니다. -위키피디아

entitydesigns의 파란색 색상 팔레트의 폭넓은 사용:

파란색과의 10개 연결:

• 박진성
• 우정
• 마법
• 얘들 아
• 무상
• 경찰

녹색의 힘

지금 비정상적으로 낙관적이라고 느끼십니까? 추측해 보겠습니다. 녹색을 보고 있었나요? 아마도 당신은 단지 녹색 식물을 보고 있었을 것입니다. 이것은 의심할 여지 없이 당신을 진정시키고 사물을 더 낙관적으로 보게 만들었습니다.

생태학과 어떻게든 연결되어 있는 사람은 누구나 자신의 사이트를 만들 때 녹색을 사용할 수 있는 더 많은 기회를 갖게 됩니다. 100달러 지폐를 주목하세요. 여기에 초록색이 우선! Groupon과 같은 사이트는 또한 돈을 직접적으로 다루기 때문에 브랜딩에 녹색을 많이 사용합니다. 녹색은 매우 상쾌하고 편안하여 사람들에게 균형과 영감을 줍니다. 디자인의 균형과 조화를 나타냅니다.

녹색 사용의 실제 예:

나는 당신이 몰랐을 내기:

고대 중국어, 태국어, 고대 일본어 및 베트남어를 포함한 일부 언어에서는 동일한 단어가 파란색과 녹색을 동시에 의미할 수 있습니다. 미국 식품의약국(FDA)에서 승인한 녹색 식용 색소에 대한 천연 공급원은 없습니다. - 위키피디아

Skybluue2u의 광범위한 녹색 사용:

녹색과의 10개 연관:

• 돈
• 탐욕
• 부러움
• 자연
• 봄
• 건강
• 청소년
• 잔디
• 희망

야후! 로고에 보라색

자주색은 상상력, 창의성, 존엄성, 귀족 및 풍요와 같은 개념과 가장 자주 관련됩니다. 보라색의 생생한 색조는 봄과 로맨스와 대체로 관련이 있으며, 보라색의 더 어두운 색조는 사치와 부와 관련이 있습니다. 보라색은 그 어떤 색보다 차분한 느낌을 주기 때문에 예쁘고 트렌디한 침구에 많이 사용되는 색입니다. 남성적이라기보다 여성스럽고 낭만적인 것으로 여겨진다. 사물을 보면 보라색이 분명히 인공적으로 보이는데, 이는 자연에서 이 색이 매우 드물기 때문입니다. 빨간색과 마찬가지로 사람들은 보라색이 너무 강하고 밝다고 생각하여 무언가를 하도록 강요하고 특정 행동을 취하도록 강요합니다. 따라서 이 색상을 검정색 또는 흰색과 함께 사용하는 것이 효과적일 것입니다.

보라색 사용의 실제 예:

나는 당신이 몰랐을 내기:

2007년 4월, 과학자들은 초기 고세균이 태양 에너지를 흡수하기 위해 엽록소와 유사한 자주색 색소를 사용했을 수 있다고 제안했습니다. 이것이 사실이라면 광대한 바다와 해안선은 보라색이 될 것입니다. 이 이론을 보라색 지구 가설이라고 합니다. - 위키피디아

보라색 사용 증가

보라색과의 10가지 연관성

• 재산
• 관대
• 귀족
• 정제
• 로맨스
• 미술
• 이국적인
• 영성
• 사치
• 여성

1WD는 흑백 색상을 지능적으로 사용합니다.

일반적으로 흰색, 검은색, 짙은 회색 및 밝은 회색과 같은 단색 색상은 더 밝고 채도가 높은 기존 강조 색상과 잘 배치된 디자인의 배경으로 사용해야 합니다. 1stwebdesigner - 1WD 사이트를 살펴보세요. 그들은 또한 오렌지를 밝은 악센트 색상으로 사용하지만 짙은 회색과 밝은 회색 톤과의 조화로운 조합에서만 가능합니다. 그리고 물론 흰색(사이트의 배경색). 블랙은 항상 모던함, 미스터리, 우아함, 강인함을 상징합니다. 회색은 그림자처럼 고요하고 거의 알려지지 않은 것을 나타내는 중성색입니다. 회색은 때때로 흐릿하게 보일 수 있으므로 흰색은 반대 효과를 만듭니다. 흰색은 청결, 개방성, 단순함 및 미니멀리즘을 동일시합니다.

단색 사용의 실제 예:

나는 당신이 몰랐을 내기:

디지털 흑백 사진은 카메라 센서가 감지하는 검은색 음영만 캡처합니다. 컬러 이미지 후처리에서 여러 채널의 메트릭을 결합하여 인지된 휘도를 변환할 수 있습니다. - 위키피디아

munsteri의 흑백 팔레트 사용 증가

단색 색상과의 10가지 연관성

• 힘
• 우아
• 공간
• 연성
• 무죄
• 염세주의
• 우울증
• 지루함

좋아하는 색깔 무엇? 그리고 그것은 당신에게 어떤 감정과 감정을 불러일으키나요?

번역 - 의무

작성자:웹 디자이너는 색상을 사용하여 사용자와 상호 작용하기 위한 많은 도구를 보유하고 있습니다. 웹 디자인에서 컬러 매칭은 효과적인 마케팅 도구이지만, 사용자가 불편하고 불안하게 만드는 도려낸 디자인이 되지 않도록 매우 주의해서 사용해야 합니다.

물론 이것은 극단적인 예입니다. 내 기사의 주요 아이디어는 디자인이 기능적이고 유용할 뿐만 아니라 감성적으로도 매력적이어야 한다는 것입니다. 이를 위해서는 웹 디자인 개발에 사용되는 색상 집합인 사이트의 색상 팔레트를 특히 주의 깊게 고려해야 합니다.

웹 디자인을 위한 색상 조합은 리소스의 모양을 결정할 뿐만 아니라 인터넷에서 브랜드와도 연결되기 때문에 사이트의 색상 구성표에는 매우 심각한 요구 사항이 적용됩니다. 대부분의 사이트에는 흑백을 제외하고 2~4가지 색상의 팔레트가 있습니다. 웹사이트 디자인에서 가장 매력적이고 효과적인 색상 조합을 만드는 방법을 알아보겠습니다.

메인 컬러 선택

이미 기성품 로고가 있는 경우 해당 색상 중 하나를 기본 로고로 사용하는 것이 가장 좋습니다. 사이트 팔레트를 처음부터 선택해야 하는 경우 다른 방법을 사용해야 합니다. 사회적 또는 연령별 색상 선호도 측면에서 리소스의 대상 고객을 분석합니다.

예를 들어 결혼식을 주제로 한 웹사이트를 살펴보세요. 우리 신부들은 순결과 순결을 상징하는 흰색 드레스를 입습니다. 중국에서 흰색은 애도의 색으로 간주되어 중국 신부는 빨간색 드레스를 입습니다. 중국인의 빨간색은 사랑, 행복 및 행운의 상징이기 때문입니다. 여기에 노란색 페인트를 더 추가하면 권력과 부의 색상을 얻을 수 있습니다.

이러한 모든 문화적 뉘앙스로 인해 웹 사이트에 실제로 적합하고 작동하는 완벽한 웹 디자인 색상 조합을 찾는 것은 매우 어렵습니다. 따라서 많은 자부심을 갖고 있는 회사는 다른 국가와 사람들을 위해 로컬 버전의 사이트를 만듭니다.

가장 안전한 색상은 보라색과 파란색입니다. 보라색은 태국을 제외한 모든 지역에서 부, 권력 및 높은 사회적 지위의 색으로 간주됩니다(태국에서는 슬픔의 상징입니다). 파란색은 낙관주의, 자신감, 행복과 관련이 있습니다. 사실, 일본에서는 잔학 행위를 의미하고 인도에서는 슬픔을 의미합니다.

색상 대비의 유형

톤의 대비. 이러한 유형의 대조는 가능한 한 다른 유형의 대조와 조합하여 신중하게 사용해야 하며 정당한 경우에만 사용해야 합니다. 웹 디자인에서 가장 두드러진 대조는 빨강, 노랑, 파랑의 세 가지 색상 조합입니다. 결합된 색상이 이 세 가지 색상환에서 멀어질수록 톤의 대비가 약해집니다.

빛과 어둠의 대조. 가장 엄격하게 대조되는 쌍은 물론 흰색과 검정색으로 구성됩니다. 보색 중 명도 대비가 가장 낮은 것은 녹색과 적색이고 명도 대비가 가장 큰 것은 보라색과 황색이다.

우리의 시각은 물체의 색상 그라데이션이 아니라 밝기의 뉘앙스에 더 민감합니다. 웹 디자이너에게 사이트 디자인의 어두운 부분과 밝은 부분을 조화롭게 배치하는 능력은 효과적인 디자인의 핵심입니다.

차갑고 따뜻하다. 차갑고 따뜻한 색조가 인간의 온도와 관련이 있다는 것은 놀라운 일이 아닙니다. 이것은 지구의 대기가 멀리 있는 물체를 푸르스름한 색조로 칠한다는 사실 때문입니다.

따라서 물체가 우리에게서 멀어질수록 우리는 그것을 더 차갑게 상상합니다. 이 속성은 사용자에게 원하는 감정을 불러일으키기 위해 아티스트와 웹 디자이너 모두가 적극적으로 사용합니다.

미니멀리즘 코스

오늘날 트렌드는 색상 간의 대비를 방해하지 않는 밝고 역동적인 음영, 미니멀리즘 및 단색 구성표입니다. 미니멀리스트 스타일(예: 투명 버튼 또는 흰색 볼드체 사용)과 결합된 모노크롬 구성표는 웹사이트에 삽입하기 쉽고 보는 즐거움을 줍니다.

웹 디자인에 종사하는 대부분의 사람들은 동일한 배경색을 다른 요소의 대조 팔레트와 결합하는 것을 선호합니다. 따라서 사이트의 배경에는 1-2가지 색상의 팔레트를 사용하고 행동을 촉구하는 버튼 및 기타 개체에는 대조 팔레트를 사용하는 것이 합리적입니다.

Twitter 웹 서비스를 한 번 이상 보았을 때 색상 팔레트가 여러 가지 파란색 음영으로 구성되어 있음을 알 수 있습니다. 파란색이 웹에서 사용하기에 가장 안전한 색상이라는 것을 이미 알고 있으므로 Twitter에서 파란색을 사용하는 것은 놀라운 일이 아닙니다. 특히 서비스의 세계적인 인기, 엄청난 수의 언어 및 그에 따른 문화 지원을 고려할 때 .

탐색 보조 도구로서의 색상

배경 및 강조 색상을 사용하는 또 다른 성공적인 방법은 사용자에게 특정 색상이 사이트의 특정 작업을 의미한다는 것을 가르치는 일종의 "색상 계층"을 만드는 것입니다.

요약해보자. 웹 디자인에서 색상과 색상을 결합하는 기능은 웹 디자이너에게 가장 중요한 도구입니다. 올바르게 사용하고 사이트의 유용성을 잊지 않으면 방문자가 특정 작업을 수행하도록 부드럽고 눈에 거슬리지 않게 "지시"하여 콘텐츠를 유익하게 강조 표시할 수 있습니다.

귀하의 사이트가 수천, 수백만 명의 사람들이 방문할 것이라고 상상해 보십시오. 그렇기 때문에 가능한 한 간단하고 편안하게 사이트를 사용할 수 있도록 최선을 다해야 합니다.

이 자료가 도움이 되었기를 바랍니다. 모든 재미를 놓치지 않도록 블로그 업데이트를 구독하십시오. 까지!

웹 개발의 최신 동향 및 접근 방식

사이트 구축에서 처음부터 빠른 성장 알고리즘 배우기

웹 디자인의 색상 이론은 응용 프로그램의 세부 사항을 이해하기 위해 많은 연습이 필요한 방대한 주제입니다. 색상 선택은 또한 환경과 웹 디자이너 자신의 작업 특성에 따라 달라집니다. 우리는 색상과 음영을 일러스트레이터 및 아티스트와 약간 다르게 보기 때문입니다.

우리는 이미 웹 디자인과 Photoshop에서 색상을 지정하는 데 재료를 부분적으로 사용했습니다. 그러나 오늘 우리는 색상과 색상 팔레트를 일반적인 용어로 조금 이야기하고 살펴보고자 합니다. 어디에서 어떻게 조합을 선택하는 것이 더 쉽고 더 편리한지, 무엇을 찾아야 하는지 등입니다. 일반적으로 색상 일치를 위한 여러 리소스를 수집하고 흥미로운 기성품 팔레트를 찾았으며 색상 이론의 몇 가지 요점에 대해 조금 더 깊이 탐구하고자 합니다.

다중 단락 색상 이론

웹사이트를 디자인할 때 선택할 수 있는 색상은 1,680만 가지입니다. 그리고 그것들을 모두 결합하고 선택해야 하며, 그러한 조합의 변형이 얼마나 많은지 상상한다면 ... 거의 끝이 없습니다. 그러나 색상은 의미가 있습니다. 당신이 가장 좋아하는 것을 선물받는다고 상상해보세요. 당신은 기뻐요, 당신은 기뻐합니다. 이제 사물이 사물이지만 그 색이 당신에게 가장 혐오스럽다고 상상해 보십시오. 예를 들어, 녹색, 노란색 및 회색을 혼합하는 음영. 오, 당신은 흥분하고 강해질 것이지만 기쁨은 사라질 것입니다.

색상은 의미가 있습니다. 글꼴이 인간의 심리에 큰 영향을 미치는 것처럼 톤을 주고 정서적으로 영향을 줍니다.

기본 색상은 음영의 기본 색상입니다. 인간의 눈은 청록색, 노랑색, 자홍색의 세 가지 기본 색상을 인식합니다. 이제 눈앞에 보이는 모든 색상은 이 세 가지의 조합으로 구성되지만 밝기, 음영 등의 양은 다릅니다. 예, 예, 이러한 색상으로 인쇄됩니다.

반대로 인터넷은 RGB(빨강, 초록, 파랑)와 그 16진수 값을 사용합니다.

RGB(59, 89, 145) 또는 # 3b599b - Facebook 파란색

RGB(0, 0, 0) 또는 # 000000 - 검정색

16자리 코드의 모든 두 문자는 기본 색상(빨간색 - 3b, 녹색 - 59, 파란색 - 9b)을 나타냅니다.

냉온

또한 색상은 차가운(파란색과 녹색이 풍부함) 및 뜨거운(빨간색과 노란색이 많은) 음영에 지속됩니다. 웹 디자인의 핫 컬러는 따뜻함과 열정을 불러 일으킵니다. 공격적이고 대담하지만 일부는 중지해야 한다는 사실을 상징하기도 하므로 중요한 메시지, 아이콘 등에 사용됩니다.

시원한 색상은 차가움을 가져오고 겨울 테마, 밤, 슬픔 또는 물에 적합합니다. 그들은 외로움과 추위, 두려움을 가지고 있습니다. 그러나 한편, 그들은 공격적이지 않고 진정됩니다.

온도

이미지의 온도도 변경되어 주황색 레벨이 변경될 수 있습니다. 따라서 우리는 사진을 더 따뜻하고 즐거운 사진으로 바꿉니다. 마치 태양이 노란색-주황색 광선을 비출 때 세상이 더 행복해 보이는 것처럼. 반면에 온도가 낮아지면 흐린 날의 자연을 전달하는 것처럼 이미지가 더 차갑고 덜 매력적입니다.

음영 및 그림자

그림자를 만들 때 검은색을 추가하는 것과 같은 방식으로 색상에 흰색을 추가하여 색조를 얻습니다. 색조와 그림자를 사용하면 다양한 양의 흰색과 검은색을 추가하여 단색 색상과 팔레트를 만들 수 있습니다.

예를 들어 전경색이 # 8dbdd8(하늘색)이라고 가정해 보겠습니다. 아래 이미지는 오른쪽과 왼쪽의 두 가지 음영이 다른 양의 흑백을 추가한 결과인 모노크롬 팔레트를 보여줍니다.

채도, 톤, 빛

또한 채도, 색조, 명도에 따라 색상이 분포됩니다. 채도는 색상을 더 풍부하고 어둡게 만듭니다. 밝은 파란색 또는 진한 녹색을 말할 때 우리는 채도를 의미합니다.

색조는 무지개의 기본 색상과의 차이를 결정합니다(7개 있음). 예를 들어 "녹색을 띤 파란색"입니다. 저것도 아니고 그냥 톤입니다.

광도는 순수한 흰색과 관련하여 색상이 얼마나 밝거나 둔한지를 정의합니다. 채도와 유사하지만 다른 매개변수에 따라 다릅니다.

색 구성표

색 구성표를 고려하면 단색(원색 하나의 음영), 보색(색상환의 반대쪽에 있는 두 가지 색상), 아날로그(색상환 옆에 있는 세 가지 색상)의 네 가지만 있습니다. ), 트라이어드 또는 트라이어딕(색상환 상단에 그려진 삼각형의 모서리에 있는 세 가지 색상).

꽃 레이아웃 디자인

이것은 간단한 이론이며 이후에는 이 자료를 간단히 참조하겠습니다. 그러나 웹 디자인을 공부할 때 이 이론은 중요합니다. 종종 눈으로 숫자로 설명된 것과 완전히 다른 무언가가 보인다는 것을 이해할 수 있습니다. 파란색이지만 충분히 포화되지 않은 느낌입니다. 이것은 각 사람의 발달 특성의 특징입니다. 이것이 바로 어떤 사람들이 타이포그래피 연구에 전념하는 것처럼 많은 웹 디자이너가 컬러 팔레트 디자인에 몰두하는 이유입니다. 그들은 다른 변화와 함께 다양한 색조, 채도, 온도를 경험하고 그것이 언제, 무엇을, 어떻게 작동하는지 확인합니다.

그러나 웹 색상에 관해서는 "웹 안전 색상"과 같은 개념이 있습니다. 디스플레이가 아직 1600만 색상을 전달할 수 없을 때 나타납니다. 그러나 그러한 안전한 색상이 있다면 왜 다른 것이 있습니까? 그러나 그것이 존재하는 이유와 일반적으로 색상 선택에 미치는 영향을 아는 것은 좋습니다.

모든 색상을 사용할 수 있으므로 주요 색상 그룹을 사용하여 최상의 웹 프로젝트를 얻을 수 있다는 점을 이해해야 합니다. 그리고 네, 당신의 눈을 믿으세요. 그들이 보는 것이 마음에 들지 않으면 변화를 시도하십시오.

도움이 필요할 때

제로 단계에서 설계상의 어려움이 있다면 색상 솔루션에 대한 아이디어는 항상 인터넷에서 찾을 수 있습니다. 색상 팔레트가 있는 사이트를 방문하여 직접 사용자 정의한 다음 원하는 색상을 수집하고 Photoshop에서 작업하십시오. 예를 들어, webdesign-inspiration 또는 awwwards를 연구하고 색상별로 정렬하고 영감을 찾으십시오.

색상 탐색기

색상 팔레트를 만드는 라이브러리이자 워크샵입니다. 라이브러리에는 인쇄 및 웹용 팔레트 세트가 포함되어 있습니다. 색상을 선택하고 톤의 여러 음영과 변형을 볼 수 있습니다.

Сolor son th eweb

지정한 색상의 모든 색상과 음영을 선택합니다. 또한 리소스는 조합 및 조합, 단색 팔레트, 아날로그, 채도 변화, 색조, 광도 등을 위한 색상을 제공합니다.

코파소

한 번에 여러 매개변수로 작업하여 색상을 선택할 수 있을 뿐만 아니라 주어진 색상에 따라 팔레트를 조합할 수도 있습니다. 첫 번째 버전에서는 색상을 만들고 두 번째 버전에서는 팔레트와 다양한 색조 및 톤을 만들었습니다.

Сolorotate

이것은 스마트폰이나 태블릿에서 색상 팔레트로 작업할 수 있는 몇 안 되는 모바일 응용 프로그램 중 하나입니다. 그러나 PC 브라우저용 버전도 있습니다. 프로젝트의 기능은 3D에서 색상으로 작업하는 것입니다. 우리는 꽃 원뿔을 제공합니다. 쉐이드 믹싱을 위한 각 포인트는 자체 삼각형 내에서만 이동하며, 원뿔 자체는 편리하게 회전할 수 있습니다.

또한 크리스마스, 흑백, 현대, 감귤류 등을 위한 기성품 팔레트 세트가 있습니다.

Сolourlovers

이 사이트는 오랫동안 사용자 지정 색 구성표의 카탈로그였습니다. 일반적으로 평면 디자인 색상과 자유롭게 사용할 수 있는 수많은 패턴, 질감, 배경이 포함됩니다.

색상 팔레트는 사진과 이미지에서 선택할 수 있습니다. 우리는 이미 이것과 이에 대한 리소스에 대해서도 이야기했습니다. 아이디어는 전체적으로 흥미롭고 매우 유용합니다. 여가 시간에 읽으십시오.

색상 프로필

그러나 그 동안 팔레트 선택은 여전히 ​​절반의 문제입니다. 웹 디자인에서 가장 뜨거운 주제는 색상 프로파일의 선택입니다. 우리는 이 주제를 조금 더 일찍 다루었지만(기사 시작 부분에 있는 링크), 지금 주목하고 싶은 것이 있습니다. 각 모니터는 특정 색상 프로필에 대해 보정할 수 있습니다. 이것은 예를 들어 Windows 10 -> 제어판 -> 색상 관리에서 수행됩니다. 따라서 특정 색상은 모니터에 따라 다르게 나타날 수 있습니다.

우리가 말했듯이 주제는 혼란스럽고 많은 웹 디자이너가 올바른 색상을 선택했는지 항상 확신하지 못합니다. SRGB가 더 자주 권장되지만 필요하지 않거나 절대적으로 최상의 솔루션 및 선택입니다. 이는 내장 프로필과 웹사이트 레이아웃으로 저장된 이미지에도 적용됩니다. 즉, 이 주제를 이해하는 데 오랜 시간이 걸릴 수 있습니다.

그러나 한편 많은 디자이너는 기본적으로 컴퓨터와 Photoshop의 설정으로 작업하지 않고 전혀 생각하지 않으려고 합니다. 그리고 이것은 또한 사실입니다. 고객/클라이언트와 색상에 대해 동의한 경우에도 최종 사용자 모니터의 색상에 영향을 줄 수 없습니다.

머티리얼 UI 색상

구글은 머티리얼 디자인에 대한 규칙을 만들 때 색상에 대한 조항도 자세히 설명했습니다. 그러나 일반적으로 규칙이 너무 간단하여 모든 인터페이스에 쉽게 적용할 수 있어 인기를 얻었습니다.

색상 선택에 있어 머티리얼 디자인은 플랫 디자인과 유사한 스타일을 따릅니다. 응용 프로그램 및 사이트의 재료 구성은 인터넷에서 자유롭게 사용할 수 있으므로 눈으로 색상 세트를 보고 팔레트를 만드는 등의 작업을 수행할 수 있습니다.

Google의 색상 세트로만 작업하기로 결정했다면 두 도구를 모두 테스트하여 서로를 보완하는 방법과 방법을 확인하는 것이 좋습니다. 그런 다음 리소스를 추가로 사용할 수 있습니다. 0~255,밝기와 채도 측면에서 색상을 일치시킵니다.

결론

인터넷의 색상은 대부분 간단하며 기본과 이론을 이해하는 데 몇 주 이상 걸리지 않습니다. 그러나 바로 이 색상 이론에 대해 더 깊이 파고 들기로 결정했다면 매우 많은 복잡성, 기능, 패턴, 영향 및 솔루션을 배우게 될 것입니다. 아마도 여러분 중 일부는 풍부한 정보로 인해 머리가 어지러울 것입니다. 누군가는 " 그는 이것을 알 필요가 없으며 피펫으로 로고를 찔러 사이트를 채색했습니다.". 그러나 누군가는 이론을 계속해서 조사하기로 결정할 것입니다. "꽃 바구니"와 음영을 탐구하기로 결정하고 실험을 시작하기로 결정합니다.

우리의 색상 자료가 향후 프로젝트 작업에 조금이나마 도움이 되기를 바랍니다. 웹 색상이 어떻게 작동하는지 연습, 반복, 눈을 믿으면서 이해하는 간단한 방법을 찾는 데 도움이 될 것입니다.

색상 팔레트 선택에 대한 많은 리소스, 영감을 얻을 수 있는 사이트도 있지만 머리에 자신의 프로젝트를 "그리기" 위해 자리에 앉으면 ... 비어 있게 됩니다. 당신은 앉아서 생각합니다 : " 어떤 파란색 음영을 취할까요 ... 조금 더 어둡거나 약간 밝게 ... 어 ... 그리고 고객은 그런 사소한 일에 대해 생각하고 싶지 않았습니다 ... 그를 위해 물론 ... 작은 것들 ... "

새해 첫날과 여가는 예를 들어 더 이상 나가서 즐길 힘이 없을 때 창의력, 자신의 즐거움을위한 가벼운 상상력의 좋은 이유입니다.