웹 페이지 색상 매칭 기술, 텍스트 글꼴, 글꼴 크기, 글꼴 레이아웃 등_기본 튜토리얼

웹 페이지를 만드는 초보자는 웹 페이지의 배경으로 아름다운 그림을 사용하는 데 더 익숙할 수 있습니다. 그러나 대형 상업용 웹 사이트를 탐색하면 웹을 만드는 데 흰색, 파란색, 노란색 등을 더 많이 사용하는 것을 알 수 있습니다. 페이지가 더욱 우아하고 관대하며 따뜻해 보입니다. 더 중요한 것은 시청자가 웹 페이지를 여는 속도를 크게 높일 수 있다는 것입니다.

일반적으로 웹페이지의 배경색은 더 부드럽고, 더 단순하고, 더 밝아야 하며, 자연스럽고 편안해 보이도록 어두운 텍스트를 함께 사용해야 합니다. 더욱 눈길을 끄는 시각적 효과를 얻으려면 제목에 더 어두운 색상을 사용하세요. 다음은 제가 웹페이지를 만들고 다른 사람의 웹페이지를 탐색할 때 웹페이지의 배경색과 텍스트 색상을 일치시킨 경험입니다. 이 색상은 텍스트의 배경색이나 제목의 배경색으로 사용할 수 있습니다. 다른 글꼴과 짝을 이루면 분명히 좋은 효과가 있을 것입니다. 웹 페이지를 만들 때 모든 사람에게 유용할 것입니다.

BgcolorΚ″#F1FAFA″——본문 배경색이 깔끔하고 고급스럽습니다
BgcolorΚ″#E8FFE8″——제목 배경색이 더 좋습니다
BgcolorΚ″#E8E8FF″ ——본문 배경색이 더 좋고, 글자색은 검정색이 좋습니다
BgcolorΚ″#8080C0″——노란색과 흰색 텍스트를 사용하는 것이 좋습니다 it
BgcolorΚ ″#E8D098″————연한 파란색이나 파란색 텍스트가 있는 것이 좋습니다
BgcolorΚ″#EFEFFDA″——연한 파란색 또는 빨간색 텍스트가 있는 것이 좋습니다 it
BgcolorΚ″ #F2F1D7″——검은색 글자로 고급스럽고, 빨간색이면 눈길을 끈다
BgcolorΚ″#336699″——흰색 글자로 하면 더 잘보임
BgcolorΚ″#6699CC″———— 흰색 글자가 더 잘보이네요 제목으로 써도 됩니다
BgcolorΚ″#66CCCC″ —— 흰색 글자가 더 잘보이네요, 당신 제목으로 써도 됩니다
BgcolorΚ″#B45B3E″——흰색 글자가 더 잘 어울리네요 썸, 제목으로 해도 됩니다
BgcolorΚ″#479AC7″——흰색 글자가 더 잘 보이네요 텍스트, 제목을 만들 수 있습니다
BgcolorΚ″#00B271″——흰색 텍스트로 하면 더 보기 좋습니다. 제목
BgcolorΚ″#FBFBEA″————더 좋아 보입니다 일반적으로 검정색 텍스트를 기본 텍스트로
BgcolorΚ″#D5F3F4″————일반적으로 기본 텍스트로 검정색 텍스트를 사용하는 것이 더 좋습니다
BgcolorΚ″#D7FFF0″——— —보통 본문에 검정색 텍스트가 더 잘 보입니다
BgcolorΚ″#F0DAD2″————주로 본문에 검정색 텍스트가 더 잘 보입니다
BgcolorΚ "#DDF3FF "——검은색 글자가 더 잘 어울리는 것 같아요. 일반적으로 본문
처럼 연한 녹색 배경에 검은색 글자, 흰색 배경에 파란색 글자가 눈에 띄는데, 전자가 배경을 강조하고 후자가 강조합니다. 텍스트. 흰색 텍스트가 있는 빨간색 배경, 노란색 텍스트가 있는 어두운 배경이 매우 효과적입니다.
이 글은 누구나 자신의 상상력을 발휘해 더욱 혁신적이고 시선을 사로잡는 색상을 매치해 웹페이지를 더욱 매력적으로 만들 수 있습니다.

요즘 인터넷이 점점 인기를 얻고 있습니다. 최근 인터넷 서핑은 점차 우리 삶에 없어서는 안 될 부분이 되었습니다. 온라인 세계는 다채롭고 훌륭하고 아름다운 웹 페이지가 많이 등장했습니다. 많은 양의 네트워크 정보를 표현하는 것은 텍스트, 이미지, 플래시 애니메이션 등이 전부입니다. 그 중에서 텍스트는 웹 페이지에서 가장 중요한 디자인 요소입니다. 웹 디자인을 처음 시작하는 분들에게는 웹 디자인에서 텍스트 레이아웃 디자인을 이해하고 익히는 것이 특히 중요합니다. 저자는 아래에 개인적인 의견을 이야기하고 싶습니다.
텍스트 형식

글꼴 크기, 글꼴, 줄 간격

글꼴 크기는 포인트 #quotel.quoter# 또는 픽셀과 같은 다양한 방법으로 계산할 수 있습니다. (픽셀). 픽셀 기술을 기반으로 한 인쇄는 포인트로 변환해야 하므로 포인트를 단위로 사용하는 것이 좋습니다.
웹 페이지의 본문을 표시하는 데 가장 적합한 글꼴 크기는 약 12포인트입니다. 한 페이지에 배치해야 하는 콘텐츠의 양이 많기 때문에 현재 많은 종합 웹사이트에서는 일반적으로 9포인트의 글꼴 크기를 사용합니다. 머리글이나 강조가 필요한 기타 영역에는 더 큰 글꼴을 사용할 수 있으며 바닥글 및 지원 정보에는 더 작은 글꼴을 사용할 수 있습니다. 작은 글꼴 크기는 무결성과 세련된 느낌을 주는 경향이 있지만 가독성이 떨어집니다.
웹 디자이너는 글꼴을 사용하여 디자인에 표현하고 싶은 감정을 더욱 완벽하게 구현할 수 있습니다. 글꼴 선택은 감정적이고 직관적인 행위입니다. 그러나 어떤 글꼴을 선택하든 웹 페이지의 전반적인 디자인과 뷰어의 요구 사항을 기반으로 해야 합니다. 예를 들어 굵은 글꼴은 강렬하고 강력하며 남성적인 특성을 가지며 기계, 건설 산업 등의 콘텐츠에 적합합니다. 얇은 글꼴은 우아하고 세심하며 여성적인 특성을 가지며 의류, 화장품 콘텐츠에 더 적합합니다. , 식품 및 기타 산업. 같은 페이지에서 글꼴 유형이 적으면 레이아웃이 우아하고 안정적이며, 글꼴 유형이 많으면 레이아웃이 활발하고 다채롭습니다. 핵심은 페이지 내용을 기준으로 이 비례관계를 어떻게 파악하느냐이다.

플랫폼 독립성 강화 측면에서 텍스트 콘텐츠는 기본 글꼴을 사용하는 것이 가장 좋습니다. 브라우저는 로컬 컴퓨터의 글꼴 라이브러리를 사용하여 페이지 콘텐츠를 표시하기 때문입니다. 웹 디자이너로서 대부분의 브라우저에는 세 가지 글꼴 유형만 있고 해당 컴퓨터에 일부 해당 특정 글꼴이 설치되어 있다는 점을 고려해야 합니다. 지정한 글꼴이 뷰어의 컴퓨터에서 반드시 발견되지 않을 수도 있으며 이는 웹 디자인에 큰 제한을 가져옵니다. 문제에 대한 해결책은 특수 글꼴을 사용해야 하는 경우 텍스트를 이미지로 만든 다음 페이지에 삽입하는 것입니다.

줄 간격의 변경도 텍스트 가독성에 큰 영향을 미칠 수 있습니다. 일반적으로 본문의 경우 글꼴 크기에 가까운 줄 간격 설정이 더 적합합니다. 줄 간격의 일반적인 비율은 10:12입니다. 즉, 문자가 10포인트라면 줄 간격은 12포인트가 됩니다. 이는 주로 다음 사항을 고려하기 때문입니다. 적절한 줄 간격은 보는 사람의 눈을 안내하는 뚜렷한 수평 공백 띠를 형성하는 반면, 과도한 줄 간격은 텍스트 줄의 연속성을 잃게 만듭니다.

줄 간격은 가독성에 미치는 영향 외에도 레이아웃의 장식 효과를 높이기 위해 줄 간격을 의식적으로 넓히거나 좁혀 독특한 미학적 관심을 반영할 수 있습니다. 예를 들어 줄 간격을 넓히는 것은 편안하고 여유로운 분위기를 반영할 수 있으며, 재미있고 서정적인 내용에 적합합니다. 또한, 세심한 배치를 통해 넓은 공간과 좁은 공간이 공존할 수 있어 공간적 위계와 레이아웃의 유연성을 높이고 독특한 독창성을 보여줄 수 있습니다.

줄 간격은 line-height 속성을 사용하여 설정할 수 있으며, 단위는 포인트 또는 기본 줄 높이의 백분율을 사용하는 것이 좋습니다. 예: {라인 높이: 20pt}, {라인 높이: 150%}.

텍스트의 전체적인 배열

페이지의 본문 부분은 여러 개의 개별 단어가 배열된 그룹으로 형태를 최대한 활용해야 합니다. 페이지 전체 레이아웃에서 이 그룹의 효과를 확인하세요. 예술적 관점에서 볼 때, 글꼴 자체는 사람의 개성과 감성에 큰 영향을 미치는 예술 형태라고 볼 수 있습니다. 웹 디자인에서 글꼴 처리는 색상, 레이아웃, 그래픽 등과 같은 다른 디자인 요소를 처리하는 것만큼 중요합니다. 어떤 의미에서 모든 디자인 요소는 그래픽으로 이해될 수 있습니다.

1. 그래픽 텍스트

글꼴에는 두 가지 기능이 있습니다. 하나는 단어 의미와 의미의 기능을 구현하는 것이고, 다른 하나는 미적 효과입니다. 소위 텍스트의 그래픽화란 미적 효과를 강조하고 상징적 텍스트를 그래픽 요소로 표현하는 동시에 본연의 기능을 강화하는 것을 의미한다. 웹 디자이너는 일반적인 방식으로 글꼴을 설정하거나 예술적으로 디자인할 수 있습니다. 무슨 일이 있어도 모든 것은 디자인 목표를 더 잘 달성하는 방법에 초점을 맞춰야 합니다.
텍스트를 그래픽화하고 이미지화하면 심오한 디자인 아이디어를 보다 창의적인 형태로 표현할 수 있으며, 이는 웹페이지의 단조로움과 단순함을 극복하고 사람들의 마음을 감동시킬 수 있습니다.

2. 텍스트의 오버레이

텍스트와 이미지, 텍스트와 텍스트 사이를 겹쳐 공간감, 점프감, 투명성, 소음, 서사 등을 만들어내며 페이지의 중심이 됩니다. 활동적이고 눈길을 끄는 요소. 오버레이 기술은 텍스트의 가독성에 영향을 주지만 페이지에 독특한 시각적 효과를 만들 수 있습니다. 가독성을 추구하지 않고 의도적으로 "노이즈"를 추구하는 이러한 표현 기법은 예술적 경향을 구현합니다. 따라서 전통적인 레이아웃 디자인뿐만 아니라 웹 디자인에도 널리 사용됩니다.

3． 제목 및 본문

제목과 본문을 배열할 때 본문을 2열, 3열, 4열로 먼저 배열한 후 제목을 배치하는 것을 고려해 볼 수 있습니다. 텍스트를 열로 나누는 목적은 페이지의 공간과 유연성을 확보하고 열의 경직성과 제목 삽입 방식의 단일성을 피하기 위한 것입니다. 제목은 전체 단락이나 기사의 제목이지만 반드시 단락 시작 부분에 배치할 필요는 없습니다. 중앙, 수평, 수직, 측면 배치가 가능하며, 단어그룹에 직접 삽입할 수도 있어 기존의 규칙을 깨는 참신한 레이아웃이 가능합니다.

4. 텍스트 배열의 네 가지 기본 형태

페이지의 주요 텍스트 부분은 배열된 여러 개별 단어로 구성된 그룹입니다. 전체 레이아웃에서 이 그룹 모양의 역할을 최대한 발휘할 필요가 있습니다. 페이지의.
양쪽 끝이 같음: 왼쪽 끝에서 오른쪽 끝까지의 텍스트 길이가 균일하고 문자 그룹이 정사각형 표면을 형성하여 직립하고 엄격하며 아름답게 보입니다.
중앙 배치: 단어 간격이 동일할 때 페이지 중앙을 축으로 하여 텍스트를 더욱 돋보이게 하고 대칭적인 형식미를 연출합니다.
왼쪽 정렬 또는 오른쪽 정렬: 왼쪽 정렬 또는 오른쪽 정렬을 사용하면 선의 시작이나 끝 부분이 자연스럽게 명확한 수직선을 형성하여 그래픽과 일치하기 쉽습니다. 이 편곡 방식은 느슨하면서도 촘촘하고, 공허하고 단단하며, 뛰어오르고 우아하며, 리듬과 리듬의 형식적인 아름다움을 만들어낸다. 왼쪽 정렬은 사람들의 독서 습관에 부합하고 자연스럽게 보입니다. 오른쪽 정렬은 독서 습관에 맞지 않기 때문에 거의 사용되지 않지만 새로운 것처럼 보입니다.
이미지 주변 정렬: 이미지 가장자리를 중심으로 텍스트를 정렬합니다. 텍스트에 기본 이미지를 삽입하면 조화롭고 자연스러운 느낌이 듭니다.

말의 강조

1. 줄 시작 부분의 강조
는 텍스트의 첫 번째 단어나 문자를 확대하여 장식하고 문단 시작 부분에 삽입하는 것을 전통적인 미디어 레이아웃 디자인에서 "드롭 스타일"이라고 합니다.이 기술의 발명은 유럽의 중세 서기관까지 거슬러 올라갑니다. 시선을 끌고 레이아웃을 꾸미고 활성화시키기 때문에 웹페이지의 텍스트 레이아웃에 사용됩니다. 드롭 범위는 전체 텍스트 줄 하나의 범위에 걸쳐 있어야 합니다. 확대 정도는 웹 페이지 환경에 따라 다릅니다.
2． 인용 강조
웹페이지 텍스트를 정리하다 보면 개요 텍스트, 즉 인용문을 자주 접하게 됩니다. 인용문은 문단이나 장, 본문 전체의 주요 내용을 요약한 것이므로 레이아웃에서 강조할 수 있도록 특별한 페이지 위치와 공간을 부여해야 합니다. 인용문은 본문의 왼쪽, 오른쪽, 위, 아래, 중앙에 삽입하는 등 다양한 방식으로 배열할 수 있으며, 글꼴이나 크기가 본문과 다를 수 있습니다.
3． 개별 단어 강조
개별 단어를 페이지의 초점으로 생각한다면 볼드체, 프레임 추가, 밑줄 추가, 표시 기호, 이탤릭체 글꼴 추가 등을 통해 의식적으로 단어의 시각적 효과를 강화할 수 있습니다. 페이지 전체에서 눈에 띄고 시선을 사로잡습니다. 또한 일부 텍스트의 색상을 변경하면 해당 텍스트 부분이 강조될 수도 있습니다. 이러한 방법은 실제로 대비의 법칙을 사용합니다.

텍스트 색상

웹 디자인에서 디자이너는 텍스트, 텍스트 링크, 방문한 링크 및 현재 활성화된 링크에 대해 다양한 색상을 선택할 수 있습니다. 예를 들어 FrontPage 편집기를 사용하는 경우 기본 설정은 다음과 같습니다. 일반 글꼴 색상은 검은색이고 기본 링크 색상은 파란색이며 마우스를 클릭하면 보라색으로 변경됩니다. 다양한 색상의 텍스트를 사용하면 강조하고 싶은 부분이 더욱 눈길을 끌 수 있지만, 텍스트의 색상은 모든 것을 강조하려는 경우에는 아무것도 강조되지 않을 수 있다는 점에 유의해야 합니다. 더욱이, 페이지에 너무 많은 색상을 사용하면 특별한 디자인 목적이 없는 한 뷰어가 페이지 내용을 읽는 능력에 영향을 미칠 수 있습니다.

색상의 사용은 전체 텍스트의 특별한 부분을 강조하는 것 외에도 전체 카피의 감성 표현에 영향을 줄 수 있습니다. 여기에는 색상의 정서적 상징이 포함되는데, 이에 대해서는 공간적 제약으로 인해 여기서는 깊이 논의하지 않습니다.

또 주목해야 할 점은 텍스트 색상의 대비입니다. 여기에는 밝기, 순도, 따뜻한 것과 차가운 것의 대비가 포함됩니다. 이는 텍스트의 가독성에 영향을 미칠 뿐만 아니라, 더 중요한 것은 색상을 사용하여 원하는 디자인 효과, 디자인 감성, 디자인 아이디어를 얻을 수 있다는 것입니다.

1. 색 처리
　
색은 인간의 시각에 가장 민감한 것입니다. 홈페이지의 색상을 잘 처리하면 금상첨화일 수 있으며 절반의 노력으로 두 배의 결과를 얻을 수 있습니다. 색상의 일반적인 적용 원칙은 "전체 조화, 부분 대비"입니다. 즉, 홈페이지의 전반적인 색상 효과가 조화를 이루어야 하며 부분적이고 작은 영역만 강한 색상 대비를 가질 수 있어야 합니다. 색상 사용시 홈페이지 콘텐츠의 필요에 따라 다양한 기본 색상을 사용할 수 있습니다. 예를 들어 부드러운 녹색, 에메랄드 그린, 황금색 노란색, 회갈색은 각각 봄, 여름, 가을, 겨울을 상징할 수 있습니다. 둘째, 군대와 경찰을 위한 올리브 그린, 의료 및 건강 관리를 위한 화이트 등 전문적인 색상이 있습니다. 색상은 또한 차갑고 따뜻한 느낌, 전진 및 후퇴 효과 등과 같은 명백한 심리적 감정을 가지고 있습니다. 또한, 색상에는 환경, 문화, 전통 및 기타 요인의 영향으로 인해 다양한 인종 집단도 색상 선호도에 큰 차이가 있습니다. 이러한 색상의 특성을 최대한 활용하면 우리 홈페이지에 심오한 예술적 의미가 부여되어 홈페이지의 문화적 취향이 향상될 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 색 구성표입니다.

1. 따뜻한 색상. 즉, 빨간색, 주황색, 노란색, 황토색 및 기타 색상의 조합입니다. 이 색상을 사용하면 홈페이지에 따뜻하고 열정적인 분위기를 줄 수 있습니다. ​

2. 시원한 색감. 즉, 청록색, 녹색, 보라색 및 기타 색상의 조합입니다. 이 색상을 사용하면 홈페이지에 조용하고 시원하며 우아한 분위기를 줄 수 있습니다. ​

3. 대비되는 색상. 즉, 같은 공간에서 전혀 반대되는 색상 특성을 지닌 색상을 일치시키는 것입니다. 예: 빨간색과 녹색, 노란색과 보라색, 주황색과 파란색 등. 이 색상 조합은 강렬한 시각적 효과를 만들어내며 사람들에게 밝고 다채로우며 축제적인 느낌을 줄 수 있습니다. 물론, 대비되는 톤을 잘못 사용하면 역효과를 낳을 수 있으며 촌스럽고 눈길을 끄는 효과가 나타날 수 있습니다. 이를 위해서는 '큰 조화, 작은 대비'라는 중요한 원칙을 파악해야 합니다. 즉, 전체적인 톤이 통일되고 조화로워야 하며 지역적으로 약간의 강한 대비가 있을 수 있습니다. ​

마지막으로 홈페이지 배경색의 깊이감과 밝기도 고려해야 합니다. 사진 용어를 빌리자면 '하이키'와 '로우키'입니다. 배경색이 밝은 것을 하이키, 배경색이 어두운 것을 로우키라고 합니다. 배경색이 어두운 경우에는 텍스트의 색상을 밝게 하고, 밝은 색상의 콘텐츠(텍스트 또는 그림)를 돋보이게 하기 위해 어두운 배경을 사용하고, 배경색이 밝은 경우에는 텍스트의 색상을 사용합니다. 텍스트는 더 어두워야 하며 밝은 색상의 배경을 사용하여 어두운 콘텐츠(텍스트 또는 이미지)를 강조해야 합니다. 이러한 심도 변화를 색상 과학에서는 "밝기 변화"라고 합니다.일부 홈페이지에서는 배경색이 검은색인데 텍스트도 좀 더 어두운 색으로 되어 있어서 색상의 밝기가 상대적으로 가깝기 때문에 읽을 때 독자의 눈이 매우 딱딱하게 느껴져 읽기 효과에 영향을 줍니다. 물론 색상의 밝기는 너무 많이 변경할 수 없습니다. 그렇지 않으면 화면의 밝기 대비가 너무 강해 독자의 눈을 참을 수 없게 됩니다.

웹페이지 배색 　

웹페이지의 색상은 홈페이지 이미지 구축의 핵심 중 하나이지만, 배색은 네티즌들에게 골칫거리이다. 웹 페이지의 배경, 텍스트, 아이콘, 테두리, 하이퍼링크 등에는 어떤 색상을 사용해야 하며, 예상되는 의미를 가장 잘 표현하려면 어떤 색상과 일치해야 합니까? Ajie는 여러분에게 영감을 주기 위해 이곳에서의 몇 가지 경험에 대해 이야기합니다.

먼저 색에 대한 기본 지식을 이해해 봅시다.

1. 색은 빛의 굴절에 의해 생성됩니다.

2. 빨간색, 노란색, 파란색은 삼원색이며, 이 세 가지 색상과 다른 색상을 혼합할 수 있습니다. 웹 페이지의 HTML 언어에서 색상 표현은 이 세 가지 색상의 숫자 값으로 표현됩니다. 예를 들어 빨간색은 색상(255,0,0), 16진수 표현은 (FF0000), 흰색은 (FFFFFF)입니다. , "bgColor=#FFFFFF"는 배경색이 흰색임을 의미하는 경우가 많습니다.

3. 색상은 무채색과 유채색 두 가지로 분류됩니다. 무채색은 검정, 흰색, 회색계열 색상을 말합니다. 색상이란 무채색을 제외한 모든 색상을 말합니다.

4. 모든 색상에는 채도와 투명도의 속성이 있습니다. 속성의 변화에 ​​따라 색상이 달라지므로 최소 수백만 가지 색상을 생성할 수 있습니다.

웹페이지를 만들 때 컬러를 사용하는 것이 좋은가요, 무채색을 사용하는 것이 좋은가요? 전문 연구기관의 연구에 따르면 컬러의 기억효과는 흑백의 3.5배에 이른다. 즉, 일반적으로 전체 흑백 페이지보다 컬러 페이지가 더 매력적입니다.

일반적인 접근 방식은 기본 콘텐츠 텍스트에 무색(검은색)을 사용하고 테두리, 배경, 그림에 색상을 사용하는 것입니다. 이렇게 하면 페이지 전체가 단조롭지 않고 주요 내용도 눈부시지 않게 됩니다.

●무색 조합

검정색과 흰색이 가장 기본적이고 심플한 조합입니다. 검정색 배경에 흰색 문자, 검정색 배경에 흰색 문자가 매우 선명합니다. 회색은 어떤 색상과도 잘 어울리는 보편적인 색상이며, 반대되는 두 색상 사이의 조화로운 전환을 도와줄 수도 있습니다. 정말 적합한 색상을 찾을 수 없다면 회색을 시도해 보세요. 효과는 확실히 나쁘지 않을 것입니다.

●배색

색상은 시시각각 변하는데, 배색이 우리 연구의 핵심입니다. 우리는 여전히 색상에 대해 더 많이 배워야 합니다.

1. 컬러서클. "빨간색->노란색->녹색->파란색->빨간색" 색상을 순서대로 오버그레이드하여 색상 링을 얻을 수 있습니다. 색상환의 양쪽 끝은 따뜻한 색상과 차가운 색상으로 중간에 중간 색상이 있습니다. (아래 그림과 같습니다)

빨간색, 주황색, 주황색, 노란색, 노란색, 황록색, 녹색, 청록색, 청록색, 파란색, 청자색, 보라색, 보라색-빨간색, 빨간색

|___________| |_________ |

따뜻한 색 중립적

| 서로 다른 색상은 보는 사람에게 서로 다른 심리적인 느낌을 줄 것입니다.

빨간색---흥미로운 색입니다. 자극 효과는 사람들이 충동적이고, 분노하고, 열정적이고, 활기차게 느끼게 만들 수 있습니다.

녹색---차갑고 따뜻한 색상 사이에서 조화, 평온, 건강 및 안전감을 줍니다. 골드 컬러와 연한 화이트 컬러를 조합해 우아하고 편안한 분위기를 연출할 수 있습니다.

오렌지---또한 밝고 경쾌하며 따뜻하고 패셔너블한 효과를 지닌 흥미로운 색상입니다.

노란색---행복, 희망, 지혜와 밝은 성격을 가지고 있으며 가장 밝습니다.

블루---가장 멋지고 신선하며 가장 전문적인 색상입니다. 화이트를 섞어서 하늘색처럼 부드럽고 우아하고 로맨틱한 분위기를 연출합니다 :)

화이트---하얀색, 밝음, 순수함, 깨끗한 느낌을 가지고 있습니다.

검은색---깊고 신비롭고 고요하고 슬프고 우울한 감정을 가지고 있습니다.

회색---절제, 평범, 부드러움, 겸손, 중립, 우아함의 느낌을 가지고 있습니다. ​

각 색상의 채도와 투명도에 조금씩 변화를 주면 다른 느낌을 연출할 수 있습니다. 녹색을 예로 들면, 황록색은 젊고 생동감 넘치는 시각적 예술적 개념을 갖고 있는 반면, 청록색은 조용하고 어둡게 보입니다.

● 웹 컬러 매칭의 원리

1. 색상의 선명함. 웹페이지의 색상은 밝고 눈길을 사로잡아야 합니다.

2. 색상의 독특함. 모든 사람에게 강한 인상을 줄 수 있는 독특한 색상을 선택하세요. (디자인씽킹 2부 홈페이지 CI 표준색상 참고)

3. 색상의 적절성. 즉, 표현하는 내용의 분위기에 적합한 색상입니다. 예를 들어 여성 사이트의 유연성을 반영하기 위해 분홍색을 사용합니다.

4.색깔의 연상. 색상에 따라 연관성도 달라집니다. 파란색은 하늘을 생각하고, 검정색은 밤을 생각하고, 빨간색은 행복한 사건을 생각합니다. 선택한 색상은 웹페이지의 의미와 관련이 있어야 합니다.

●웹 컬러 마스터링 과정

웹 페이지 제작 경험이 축적되면서 우리의 컬러 사용은 단색 -> 컬러풀 -> 표준 컬러 -> 단색의 추세를 보이고 있습니다.一开始因为技术和知识缺乏，只能制作 出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂 乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一 色彩甚至非彩色就可以设计出简洁精美的站点。

○网页色彩搭配的技巧 　

文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是：

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容

颜 色 搭 配

一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

a) 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

b) 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

c) 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

d) 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

a) 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

b) 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

c) 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

d) 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一 个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、 黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

a)          如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

b)        在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

a)          在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

b)         在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

c)         在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、              紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

a)          在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

b)         在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

c)         在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

六、              白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

a)         在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

b)        在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

c)        在白色中混入少量的蓝，给人感觉清冷、洁净。

d)        在白色中混入少量的橙，有一种干燥的气氛。

e)         在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。

f)         在白色中混入少量的紫，可诱导人联想到淡淡的芳香。