웹 색상 팔레트

웹 컬러 팔레트란 무엇입니까?

색상은 웹 디자이너와 그래픽 디자이너에게 매우 중요합니다. 디자이너들은 #fff002, #426215와 같은 코드로 일상 생활에서 파란색, 빨간색 및 녹색으로 설명하는 색상을 설명합니다. 어떤 유형의 코딩 프로젝트를 수행하든 관계없이 언젠가는 색상 작업을 시작하게 될 것입니다. 이것은 많은 사람들이 웹 페이지를 디자인할 때 하는 것처럼 HTML을 사용하여 코딩하는 방법을 배울 때 특히 유용합니다.

색상에서 16진수 코드는 무엇을 의미합니까?

16진수 코드는 3개의 값을 조합하여 RGB 형식으로 색상을 표현하는 방법입니다. 이러한 색상 코드는 웹 디자인을 위한 HTML의 필수적인 부분이며 색상 형식을 디지털로 표현하는 중요한 방법으로 남아 있습니다.

16진수 색상 코드는 파운드 기호 또는 해시태그(#)로 시작하고 그 뒤에 6개의 문자 또는 숫자가 옵니다. 처음 두 개의 문자/숫자는 빨간색에 해당하고 다음 두 개는 녹색에 해당하고 마지막 두 개는 파란색에 해당합니다. 색상 값은 00과 FF 사이의 값으로 정의됩니다.

값이 1-9일 때 숫자가 사용됩니다. 값이 9보다 클 때 문자가 사용됩니다. 예:

• A = 10
• B = 11
• C = 12
• D = 13
• 전자 = 14
• F = 15

16진수 색상 코드 및 이에 상응하는 RGB

가장 일반적인 16진수 색상 코드 중 일부를 기억하면 정확한 색상을 사용하고 싶을 때뿐만 아니라 16진수 색상 코드를 볼 때 다른 색상이 무엇인지 더 잘 예측하는 데 도움이 될 수 있습니다.

• 빨간색 = #FF0000 = RGB(255, 0, 0)
• 녹색 = #008000 = RGB(1, 128, 0)v
• 파란색 = #0000FF = RGB(0, 0, 255)
• 흰색 = #FFFFFF = RGB(255,255,255)
• 아이보리 = #FFFF0 = RGB(255, 255, 240)
• 검정 = #000000 = RGB(0, 0, 0)
• 회색 = #808080 = RGB(128, 128, 128)
• 은색 = #C0C0C0 = RGB(192, 192, 192)
• 노란색 = #FFFF00 = RGB(255, 255, 0)
• 보라색 = #800080 = RGB(128, 0, 128)
• 주황색 = #FFA500 = RGB(255, 165, 0)
• 버건디 = #800000 = RGB(128, 0, 0)
• 자홍색 = #FF00FF = RGB(255, 0, 255)
• 라임 = #00FF00 = RGB(0, 255, 0)
• 아쿠아 = #00FFFF = RGB(0, 255, 255)
• 청록색 = #008080 = RGB(0, 128, 128)
• 올리브 = #808000 = RGB(128, 128, 0)
• 네이비 블루 = #000080 = RGB(0, 0, 128)

웹사이트 색상이 왜 중요한가요?

색상의 영향을 받지 않는다고 생각할 수도 있지만 연구에 따르면 85%의 사람들이 색상이 구매하는 제품에 큰 영향을 미친다고 말합니다. 그는 또한 일부 회사에서 버튼 색상을 변경할 때 전환율이 급격히 증가하거나 감소하는 것을 목격했다고 말합니다.

예를 들어, 프로젝션 스크린을 제조하는 회사인 Beamax는 파란색 링크에 비해 빨간색 링크에 대한 클릭이 53.1% 크게 증가한 것을 확인했습니다.

색상은 클릭뿐만 아니라 브랜드 인지도에도 큰 영향을 미칩니다. 색상의 정신적 영향에 대한 연구에 따르면 색상은 브랜드 인지도를 평균 80% 증가시킵니다. 예를 들어, 코카콜라를 생각할 때 선명한 빨간색 캔을 상상할 것입니다.

웹 사이트의 색 구성표를 선택하는 방법은 무엇입니까?

웹사이트나 웹 애플리케이션에서 선택해야 하는 색상을 결정하려면 먼저 판매하는 제품을 잘 이해해야 합니다. 예를 들어 더 높은 품질의 고급 이미지를 얻으려는 경우 선택해야 하는 색상은 보라색입니다. 그러나 더 많은 청중에게 다가가고 싶다면 파란색입니다. 건강이나 금융 등 민감한 주제에 잘 어울리는 차분하고 부드러운 컬러입니다.

위의 예는 많은 연구에서 입증되었습니다. 그러나 웹 사이트에 대해 선택하는 색상은 디자인의 복잡성과 색상 조합 유형에 따라 다릅니다. 예를 들어, 단색 웹 디자인 팔레트를 사용하는 경우 화면에 충분한 다양성을 얻으려면 해당 색상의 7개 이상의 음영이 필요할 수 있습니다. 텍스트, 배경, 링크, 호버 색상, CTA 버튼 및 헤더와 같은 사이트의 특정 부분에 대한 색상을 설정해야 합니다.

이제 "웹 사이트 및 웹 응용 프로그램의 색 구성표를 선택하는 방법은 무엇입니까?" 단계별로 살펴보겠습니다.

1. 기본 색상을 선택합니다.

기본 색상을 결정하는 가장 좋은 방법은 제품이나 서비스의 분위기에 맞는 색상을 살펴보는 것입니다.

아래에 몇 가지 예를 나열했습니다.

• 빨간색: 설렘이나 행복을 의미합니다.
• 주황색: 친근하고 즐거운 시간을 나타냅니다.
• 노란색은 낙관과 행복을 의미합니다.
• 녹색: 신선함과 자연을 의미합니다.
• 파란색: 신뢰성 및 보증을 나타냅니다.
• 보라색: 품질의 역사를 가진 저명한 브랜드를 나타냅니다.
• 브라운: 누구나 사용할 수 있는 믿을 수 있는 제품을 의미합니다.
• 검은색은 사치 또는 우아함을 의미합니다.
• 흰색: 세련되고 사용자 친화적 인 제품을 나타냅니다.

2. 추가 색상을 선택합니다.

기본 색상을 보완하는 하나 또는 두 개의 추가 색상을 선택하십시오. 이상적으로는 기본 색상을 "멋지게" 만드는 색상이어야 합니다.

3. 배경색을 선택하세요.

기본 색상보다 덜 "공격적인" 배경 색상을 선택하십시오.

4. 글꼴 색상을 선택합니다.

웹사이트의 텍스트 색상을 선택합니다. 단색 검정색 글꼴은 드물고 권장되지 않습니다.

디자이너를 위한 최고의 웹 컬러 팔레트

Softmedal 웹 색상 팔레트 컬렉션에서 원하는 색상을 찾을 수 없는 경우 아래의 대체 색상 사이트를 참조하십시오.

색상 선택은 긴 과정이며 종종 올바른 색상을 찾기 위해 많은 미세 조정이 필요합니다. 이 시점에서 관련 색 구성표를 처음부터 생성하는 100% 무료 웹 응용 프로그램을 사용하여 시간을 절약할 수 있습니다.

1. 팔레톤

Paletton은 모든 웹 디자이너가 알아야 할 웹 애플리케이션입니다. 시드 색상을 입력하기만 하면 나머지는 앱이 알아서 처리합니다. Paletton은 디자인에 대해 전혀 모르는 사람들과 초보자를 위한 신뢰할 수 있는 선택이자 훌륭한 웹 앱입니다.

2. 색상 안전

WCAG가 디자인 프로세스에서 우려되는 사항이라면 Color Safe가 사용하기에 가장 좋은 도구입니다. 이 웹 응용 프로그램을 사용하면 WCAG 지침에 따라 완벽하게 혼합되고 풍부한 대비를 제공하는 색 구성표를 만들 수 있습니다.

Color Safe 웹 앱을 사용하여 사이트가 WCAG 지침을 준수하고 모든 사람이 완전히 액세스할 수 있는지 확인합니다.

3. 어도비 컬러 CC

공개용으로 제작된 무료 Adobe 도구 중 하나입니다. 누구나 처음부터 색 구성표를 만들 수 있는 정교한 웹 응용 프로그램입니다. 이를 통해 필요에 가장 잘 맞는 다양한 색상 모델을 선택할 수 있습니다. 인터페이스가 처음에는 다소 혼란스러워 보일 수 있지만 익숙해지면 아름다운 색상 옵션을 선택하는 데 문제가 없을 것입니다.

4. 분위기

무료 웹 응용 프로그램인 Ambiance는 웹의 다른 색상 사이트에서 미리 만들어진 웹 색상 팔레트를 제공합니다. 프로필에 색상을 저장하고 처음부터 고유한 구성표를 만들 수 있는 기존 웹 앱처럼 작동합니다. 이 모든 웹 색상 팔레트는 Colorlovers에서 제공됩니다. Ambiance 인터페이스는 탐색을 더 쉽게 만들고 UI 디자인을 위한 색상 상호 작용에 더 집중합니다.

5. 0~255

0to255는 정확히 색 구성표 생성기는 아니지만 기존 색 구성표를 미세 조정하는 데 도움이 될 수 있습니다. 웹 앱은 다양한 색상을 모두 보여주므로 색상을 즉시 혼합하고 일치시킬 수 있습니다.

사용 가능한 색 구성표를 만드는 것이 어렵다면 위의 응용 프로그램 중 일부를 검토할 수 있습니다.

최고의 웹 컬러 팔레트

다음 사이트는 다양한 웹 색상 팔레트를 사용하여 효과를 극대화합니다. 그들이 불러일으키는 감정과 전달하는 감정에 따라 신중하게 선택됩니다.

1. 오도포드

Odopod는 단조로운 색상 팔레트로 디자인되었지만 홈페이지의 그라디언트로 지루해 보이지 않는 것을 목표로했습니다. 큰 타이포그래피는 뛰어난 대비를 제공합니다. 방문자가 클릭하기를 원하는 위치는 분명합니다.

2. 토리의 눈

Tori's Eye는 단색 색 구성표의 좋은 예입니다. 여기서는 녹색 음영을 중심으로 하는 단순하지만 강력한 색상 팔레트의 효과를 볼 수 있습니다. 한 색상의 한 음영이 거의 항상 같은 색상의 다른 음영과 함께 작동하기 때문에 이 색 구성표는 일반적으로 쉽게 제거할 수 있습니다.

3. 치즈 서바이벌 키트

빨간색은 웹사이트 색상 팔레트에 매우 인기 있는 색상입니다. 풍부한 감정을 전달할 수 있어 다재다능합니다. 치즈 서바이벌 키트 웹사이트에서 볼 수 있듯이 소량으로 사용할 때 특히 강력합니다. 빨간색은 보다 중성적인 색상으로 부드러워지고 파란색은 CTA 및 비즈니스에서 방문자의 관심을 끌기 원하는 기타 영역에 도움이 됩니다.

4. 아레프

Ahrefs는 색상 팔레트를 자유롭게 사용하는 웹 사이트의 예입니다. 진한 파란색이 주요 색상으로 사용되지만 사이트 전체에 변형이 존재합니다. 주황색, 분홍색 및 청록색 색상도 마찬가지입니다.

색상에 대해 자주 묻는 질문

1. 웹사이트에 가장 적합한 색상은 무엇입니까?

파란색은 35%로 가장 인기 있는 색상이므로 가장 안전한 선택입니다. 그러나 경쟁업체가 모두 파란색을 사용하는 경우 귀하의 제안과 브랜드를 "차별화"하는 것이 합리적일 수 있습니다. 그러나 방문자를 압도하지 않도록 해야 합니다.

2. 웹사이트에는 몇 가지 색상이 있어야 합니까?

브랜드의 51%는 단색 로고를 사용하고 39%는 두 가지 색상을 사용하며 19%의 회사만 풀 컬러 로고를 선호한다는 점을 고려하십시오. 여기에서 무지개 색으로 웹사이트를 만드는 것보다 1, 2, 3색으로 된 웹사이트가 더 의미가 있음을 알 수 있습니다. 그러나 Microsoft 및 Google과 같은 브랜드는 디자인에 최소 4가지 단색을 사용하므로 더 많은 색상으로 작업하는 것이 유리하다고 생각합니다.

3. 색상은 어디에 사용해야 하나요?

시선을 사로잡는 색상은 드물게 사용해야 합니다. 그렇지 않으면 효과가 사라집니다. 이 효과는 "지금 구매" 버튼과 같은 전환 지점에 있어야 합니다.