웹 디자인과 색상 값, 색상의 의미

지난 글에서 조사했듯이 색상이 웹 디자인을 이끈다고 해도 과언이 아니기 때문에 웹 디자인에서 색상 선택은 매우 중요합니다. 색상마다 느낌과 의미가 다 다르기 때문에 웹 사이트의 목적을 알리는 데 있어서 매우 유용하고, 웹 사이트 디자인을 시작할 때 좋은 아이디어를 얻는 데에도 효과적입니다. 웹 페이지의 색상은 특정 웹 사이트의 이미지와 브랜드 아이덴티티, 목적 등을 효과적으로 표현하기 때문에 색상을 선택하는 것이 중요합니다.
이번 글에서는 색상이 가진 의미를 통해서 웹 사이트 색상을 어떻게 선택해야 할지 이야기해 보겠습니다.

웹 디자인과 색상의 의미

색채 이론과 웹디자인의 관련성 등 색상에 관련해서 더 자세히 알아보고 싶으시면 이 글을 한번 읽어보시고 오시면 더 좋습니다.

웹 디자인의 색상

웹에서의 색상 값(Color Values)

일반적으로 색상을 표현하는 색상 모드에는 CMYK(Cyan, Magenta, Yellow, black)와 RGB(Red, Green, Blue)가 있는데, 인쇄물 디자인을 할 때는 CMYK 모드를 쓰고 빛을 이용하는 디바이스를 사용하는 모든 디지털 색상을 표현할 때에는 RGB를 씁니다.
기본적으로 HTML 색상은 RGB 조합을 16진수 표기법(HEX Code)을 사용하고, 광원 중 가장 낮은 값은 숫자 0(HEX: 00)이며, 높은 값은 255(HEX: FF)입니다.
HEX Code의 값은 # 기호로 시작하는 3쌍의 2자리 숫자로 지정되는데, 최근에는 투명도를 나타내기 위해 4쌍의 2자리 숫자로 사용합니다.

Color Values

 

 

HEX 코드와 RGB 코드의 예

· HEX Code

HEX Code

 

· RGB Code

RGB Code

 

· HRX 코드와 투명도

투명도	HEX	RGB No.	투명도	HEX	RGB No.	투명도	HEX	RGB No.	투명도	HEX	RGB No.
100%	FF	255	75%	BF	191	50 %	80	128	25%	40	64
99%	FC	252	74 %	BD	189	49 %	7D	125	24%	3D	61
98%	FA	250	73%	BA	186	48 %	7A	122	23%	3B	59
97%	F7	247	72%	B8	184	47 %	78	120	22%	38	56
96%	F5	245	71%	B5	181	46 %	75	117	21%	36	54
95%	F2	242	70%	B3	179	45 %	73	115	20%	33	51
94%	F0	240	69%	B0	176	44 %	70	112	19%	30	48
93%	ED	237	68%	AD	173	43 %	6E	110	18%	2E	46
92%	EB	235	67%	AB	171	42 %	6B	107	17%	2B	43
91%	E8	232	66%	A8	168	41 %	69	105	16%	29	41
90%	E6	230	65%	A6	166	40 %	66	102	15%	26	38
89%	E3	227	64%	A3	163	39 %	63	99	14%	24	36
88%	E0	224	63%	A1	161	38 %	61	97	13%	21	33
87%	DE	222	62%	9E	158	37 %	5E	94	12%	1F	31
86%	DB	219	61%	9C	156	36 %	5C	92	11%	1C	28
85%	D9	217	60%	99	153	35 %	59	89	10%	1A	26
84%	D6	214	59%	96	150	34 %	57	87	9%	17	23
83%	D4	212	58%	94	148	33 %	54	84	8%	14	20
82%	D1	209	57%	91	145	32 %	52	82	7%	12	18
81%	CF	207	56%	8F	143	31 %	4F	79	6%	0F	15
80%	CC	204	55%	8C	140	30 %	4D	77	5%	0D	13
79%	C9	201	54%	8A	138	29 %	4A	74	4%	0A	10
78%	C7	199	53%	87	135	28 %	47	71	3%	08	8
77%	C4	196	52%	85	133	27 %	45	69	2%	05	5
76%	C2	194	51%	82	130	26 %	42	66	1%	03	3
									0%	00	0

 

Web Safe Colors?

2000년대 초반 컴퓨터가 최대 256가지 색상을 지원했을 때, "Web Safe Colors" 목록에서 256가지 색상 중 40가지 색상이 웹 표준에 적합한 색상으로 지정되었습니다.
이 256가지 크로스브라우저 색상은 모든 컴퓨터에 똑같이 실행되도록 만들어졌습니다.
현재는 대부분의 컴퓨터가 수백만 가지의 다른 색을 표시할 수 있지만 이 색상 목록은 기본적인 색상만 표기됩니다.

Safe Colors

 

색상이 가진 의미

• 빨강(Red - #FF0000): 에너지, 강인함, 열정, 유쾌함, 용기, 불, 빠른 행동, 욕망, 피, 위험, 명성, 생존, 전쟁, 혁명, 위험, 공격성, 힘, 결단력, 역동적, 자극적, 맛, 힘, 리더십, 흥분, 속도, 열, 폭력, 주의 등의 의미를 가집니다.

  

  웹에서 빨간색 사용 예시

   

• 노란색(Yellow - #FFFF00): 태양, 지성, 빛, 학습 능력, 기억력, 사회적 에너지, 협동, 기쁨, 행복, 지성, 낙천주의, 순수함, 열정, 따뜻함, 충성심, 명확성, 지각, 지혜, 정직하지 않음, 비겁함, 추종자, 자신감, 유머, 꿈, 창의력, 행동, 이상주의, 낙천주의, 상상력, 희망, 여름, 철학, 영광, 깨달음의 의를 가집니다.
  시각적 조사는 창의적인 아이디어를 생성할 수 있는 논리적 과정으로, 그림을 그리기 전에 생각하는 과정입니다. 생각과 상상력을 어떻게 펼쳐나갈 것인지를 나타냅니다.

  

  웹에서 노란색 사용 예시

   

• 핑크색(Pink - #FF00FF): 로맨스, 우정, 여성성, 진실, 수동성, 선의, 정서적 치유, 평화, 차분함, 애정, 정서적 성숙, 배려, 양육, 달콤한 맛, 사랑, 달콤한 향기, 영묘함, 섬세함 등을 의미합니다.

  

  웹에서 핑크색 사용 예시

   

• 녹색(Green - #00FF00): 대지의 어머니, 육체적 치유, 풍요, 나무와 식물의 마법, 성장, 음식, 젊음, 안정, 지구력, 신선함, 자연, 조용함, 희망, 건강, 환경, 행운, 재생, 젊음, 나무, 풀, 성장, 조화, 응답성, 관대함, 안전, 연민, 외교, 평온, 침착, 사색, 묵상, 균형, 희망, 우정, 진정, 친근함, 달래기 등을 의미합니다

  

  웹에서 녹색 사용 예시

   

• 파란색(Blue - #0000FF): 소통, 지혜, 보호, 영적 영감, 평온, 온화함, 물, 바다, 창의성, 평화, 진정, 신비, 하늘, 형식, 여행, 헌신, 진보, 자유, 지성, 연민, 슬픔, 안정, 진실, 이해, 자신감, 보안, 청결, 질서, 편안함, 추위, 위로, 감기, 기술, 믿음, 천국, 성실, 지성, 슬픔 등을 의미합니다.

  

  웹에서 파란색 사용 예시

   

• 흰색(White - #FFFFFF): 영성, 여신, 평화, 순결, 처녀성, 경건함, 경외심, 단순함, 소박함, 청결함, 겸손, 정확성, 순수함, 눈, 겨울, 눈, 불임, 임상적, 명확성, 완벽함, 순수함, 처녀성, 빛, 공정함, 안전, 믿음, 차가움, 자선, 연합, 자기희생, 거룩함, 긍정 등을 의미합니다.

  

  웹에서 흰색 사용 예시

   

• 검정색(Black - #000000): 우아함, 세련됨, 격식, 권력, 힘, 불법성, 우울함, 질병, 밤, 죽음 등을 의미합니다.

  

  웹에서 검정색 사용 예시

---

참조(Reference)

• HTML Colors
  (http://www.w3schools.com/html/html_colors.asp)
• HTML Color Codes
  (http://www.colorsontheweb.com/websafecolors.asp)
• Color Meaning
  (http://www.color-wheel-pro.com/color-meaning.html)
• The meaning of colors
  (http://changingminds.org/disciplines/communication/color_effect.htm)