웹문서와 색상, 색상을 표현하는 방법(rgb color)

웹문서를 만들 때 흰 바탕에 검정 글자만으로 만들 수는 없습니다.
또한 알록달록하게 많은 색상을 사용하지 않고 몇몇 색을 설정하여 웹페이지를 만들고 있습니다.

 

기업의 CI/BI처럼 웹페이지를 만들때 주요 색상을 정하고 웹페이지를 만듭니다.
기획을 통해 정한 색상 계획은 일관성 있는 웹페이지를 만들 수 있습니다.

웹페이지 작성 시 색상은 html의 css 속성과 속성 값으로 표현할 수 있습니다.

 

빛의 삼원색과 RGB 및 CMYK

빛의 삼원색은 흔히 포토샵에서 볼 수 있는 RGB모드로 red, green, blue의 색상을 혼합하여 표현합니다. 이들 색상으로 다양한 색상을 표현할 수 있으며, 스크린을 통해 확인 가능합니다. RGB는 색상을 섞을수록 밝은색, 흰색이 됩니다.

RGB와 달리 CMYK는 cyan, magenta, yellow, black 색상을 혼합하여 색상을 표현합니다. rgb와 반대로 색상을 섞을수록 어두워집니다. 또한 인쇄용으로 활용하고 있습니다.
같은 색상이라도 rgb와 cmyk가 체감상 다르게 보일 수 있습니다. 활용 목적에 맞게 이를 활용해야 합니다.

웹페이지를 만들기 위해 포토샵으로 디자인할 때는 rgb모드로 해야합니다. 색상 값을 확인하고 그 수치를 입력해야 원하는 결과값을 확인할 수 있습니다.

 

색상표현

html으로 색상을 표현하기 위해서는 css 속성이나 style 속성에서 색상값을 주어야 합니다.
색상이름을 직접 입력하거나(영어) rgb값 혹은 16진수 값으로 입력하면 됩니다.
또한 투명값을 주기 위해서는 alpha 혹은 transparent을 사용할 수 있습니다.

- 빨강색 : red / #ff0000 / rgb(255,0,0)

- 초록색 : green / #00ff00 / rgb(0,255,0)

- 파랑색 : blue / #0000ff / rgb(0,0,255)

 

 

16진수

16진수는 한 자리 수 단위가 16개입니다.
0~9까지 그리고 A~F까지 총 16개가 한 자리 수로 사용합니다.

10진수라면 9 다음에 10으로 두 자리 수로 넘어갑니다. 16진수에서는 9 다음에 A로 넘어갑니다.
만약 10진수로 255는 16진수로 FF로 표현됩니다.

rgb(255,0,0)은 #ff0000와 같은 표현입니다.
0~255 혹은 0~ff의 수치값들은 RGB값으로 순서상 빨강, 초록, 파랑들의 수치값들입니다.

빛의 삼원색인 RGB값들은 섞을수록 밝아져서 RGB값이 255,255,255 혹은 #ffffff은 흰색으로 표현됩니다.
반대로 0,0,0 혹은 #000000은 검정색이 됩니다.

 

색상이 주는 느낌

색상이 주는 느낌을 미리 파악하면 기획의도에 맞는 디자인과 웹사이트 제작이 가능합니다.

- 색상은 인간의 행동과 지각에 영향을 줄 수 있습니다.
- 색상은 음식의 맛에 영향을 줄 수 있습니다.
- 색상은 매력에 영향을 줄 수 있습니다.

 

빨강

빨강색은 주목도가 높아 시선을 모으는데 좋습니다.
위험, 힘, 강력한, 불, 피, 긴급, 교통체증, 열정, 사랑, 열정 등의 느낌을 주는데 용이합니다.

초록

초록색은 편안한 느낌을 주는 색상입니다.
신선함, 건강, 평화, 평온, 쾌적한 교통, 쾌적한 등의 느낌을 주는데 좋습니다.

파랑

파랑은 자주 사용하는 사무용 색상입니다.
물, 바다, 깊은, 안정성, 보수주의, 지혜, 지능, 진실, 평화, 천국 등의 느낌을 줍니다.

노랑

노랑색은 행복한 느낌을 주는 색상입니다.
햇빛, 가벼운, 선명함, 에너지, 따뜻함, 행복, 쾌활 등의 느낌을 주는데 용이합니다.

검정

검정색은 권위와 신비의 느낌을 줍니다.
파워, 두려움, 신비, 죽음, 형식적인 느낌을 줍니다.

회색

회색은 보수적인 색상입니다.
신뢰, 고전지식, 전문지식의 느낌을 줍니다.

흰색

흰색은 순결의 느낌을 줍니다.
청결, 중립, 선량의 느낌을 줍니다.