Color Models
고유방식을 이용해 색상을 표현하는 다양한 컬러 모델 중, 웹상에 색상을 표현할 수 있는 방식은 hex codes, rgb (rgba), hsl (hsla), named colors 등이 있습니다. 이들의 형식과 개념을 알아봅니다.
1. RGB: Red, Green, Blue
RGB는 Red, Green, Blue를 의미하는데요, 각 고유컬러 빛의 양을 가산혼합방식(Addictive color model)으로 스크린상에 표현하는 컬러모델입니다. 이들 세가지 색상을 각각 0~255까지의 숫자로 형식에 맞게 표기하면, 연산에 의해 웹상에서 해당색상을 구현해주며 이를 RGB 컬러값이라고 합니다.
형식: RGB(red, green, blue) 각각 0~255 사이의 숫자
CSS 예시
h1 {color: rgb(0,0,0);} /* 글자색은 모든 색의 값이 0, 즉 색이 하나도 없는 검정색입니다. */
h2 {color: rgb(255,0,0);} /* Red만 최대치이고 그린과 블루값이 0, 즉 최대로 선명한 빨강색입니다. */
h3 {color: rgb(127,127,127);} /* 글자색이 중간명도의 회색이 됩니다. 세개의 컬러값이 모두 같으면 색조없이 검정색(0,0,0)~회색~흰색(255,255,255)으로 표현됩니다. */참고: 어렸을 때 “빛의 삼원색과 염료(잉크)의 삼원색은 반대다”라는 걸 배웠을텐데요, 빛의 삼원색인 R,G,B는 색상값이 높을수록 밝아져서 RGB모두 최고값일 때 가장 밝은 흰색이 되고, 인쇄시 사용하는 컬러모드인 CMYK의 Cyan, Magenta, Yellow, 즉 염료/안료의 경우 색상값이 높을수록 진해져/어두워져 CMY값 모두 최대치로 섞으면 검정색이 됩니다. (감산혼합방식, Subtractive color model)
RGBA
RGB에 Alpha값을 포함하여 포토샵이나 png파일처럼 투명한 정도를 표현할 수 있습니다.
투명도를 나타내는 알파값은 0(완전투명)~1(완전불투명)까지의 숫자로 표기하며, 소숫점의 경우 0을 생략할 수 있습니다.
(예: rgb(160,0,25,0.7) 과 rgb(160,0,25,.7)은 동일)
형식: rgba(red, green, blue, alpha)
CSS 예시
.transparent {background-color: rgba(106,90,205,0);} /* 완전 투명해서 색 출력 안됨 */
.half_transparent {background-color: rgba(106,90,205,0.5);} /* 투명도 50% */
.opaque {background-color: rgba(106,90,205,1);} /* 완전 불투명, 알파값 없는 것과 결과 동일 */
2. Hexadecimal Color Codes: R,G,B를 각각 16진수x2자리씩 표현한 방식
RGB 값을 16진수씩 두자릿수로 각각 표시하면 각 컬러당 총 256 (16x16)개의 값을 가지게 되고 이를 합해 256x256x256 을 곱한 수만큼의 색상을 표현할 수 있습니다. 따라서 RGB 코드와 16진수 코드가 표현할 수 있는 색상 수는 같습니다.
*16진수: 0 1 2 3 4 5 6 7 8 9 A B C D E F (아라비아숫자는 10개 밖에 없으므로 나머지는 알파벳 더해서 16개의 숫자로 표현)
형식: #RRGGBB
CSS 예시
h1 {color: #000000;} /* 검정 */
h2 {color: #FF0000;} /* 빨강 */
h3 {color: #808080;} /* 회색 */
※Coding tip: 컬러의 두자리 숫자가 같을 경우 줄여쓸 수 있습니다.
예) #112233 는 #123 으로 줄여쓸 수 있습니다 (#123123를 줄인거 아님 주의)
한 문서내에서는 다 줄이거나, 다 안 줄이거나 스타일을 통일해주는게 좋습니다.
#RRGGBBAA
Hex codes 역시 rgb 값 여섯자리 뒤에 알파값 두자리를 더해 투명도를 나타낼 수 있습니다. 그러나 투명도 0~100%를 256으로 나눠서 나타내야 하므로 조금 번거롭습니다.
예) 투명도 0%의 hex alpha값은 00, 100%는 ff입니다. 50%를 나타내려면 256개의 숫자 중 절반인 128번째가 되고 이 숫자의 hex값은 80입니다. 이런 식으로 계산하기 때문에 투명도 설정값을 넣을 땐 rgba가 좀 더 편합니다.
※ 16진수 표기법은 코딩에서 컬러를 표현하는 가장 효율적인 방식이라고 생각합니다. 코딩은 간략함이 미덕인데 컬러를 가장 간단하게 표기할 수 있기 때문입니다.
예1) 검정색 표기 방식 비교
RGB: rgb(0,0,0)
Hex: #000
HSL: hsl(0, 0%, 100%)
Color Name: black
예2) Slate Blue라는 컬러 표기 방식
RGB: rgb(106,90,205)
Hex: #6A5ACD
HSL: hsl(248,53%,58%)
Color Name: slateblue
3. HSL/HSLA: Hue, Saturation, Lightness (+Alpha)
CSS3부터 채택된 방식이며 색조, 채도, 명도값을 통해 색상값을 나타냅니다.
Hue: 색조 - 빨강 노랑 파랑 같은 고유 빛 - 를 0~359까지로 표현 (0이 빨강)
Saturation: 채도를 0%~100% 사이 값으로 표현, hue가 얼마나 많이 가미됐는가의 기준이라 보시면 됩니다. 즉 100%라 적으면 순도 100% 채도의 순수 컬러이고 0%면 hue가 하나도 안들어간 무채색으로, 명도에 따라 흰색~회색~검정색으로 표현됩니다.
Lightness: 명도를 0%~100% 사이 값으로 표현, 0%면 밝기가 전혀 없는 상태인 검은색, 100%은 밝기가 최대치이므로 흰색입니다. Hue가 최대치로 선명한 상태(흰색, 검정색 등의 무채색이 전혀 안 섞인 순수 색)일 때는 50%라고 하면 됩니다.
CSS 예시
h1 {color: hsl(0, 100%, 50%);} /* Red값 최대치 선명한 레드 = #ff0000 = rgb(255,0,0) */
4. Named Colors 혹은 Color Names
수많은 색상 중 대표적인 컬러를 선별해 고유 이름을 주어, CSS에서 복잡한 표기법 대신 사용할 수 있는 140개의 색상명이 있습니다.
https://www.w3schools.com/colors/colors_names.asp 에 색상명이 정리되어 있고 hex값이 같이 표기되어 있어 참고할 수 있습니다.
이 색상들은 전문가들이 대표적인 색을 골라 이름을 붙여준 것일테니 색을 고르는게 너무 힘들다면 이 중에서 정하는 것도 괜찮겠습니다.
형식: colorname
CSS 예시
h1 {color: darkslateblue;} /* 글자색 DarkSlateBlue */
div {background-color: azure;} /* 배경색 Azure */
* 회색의 경우, Gray, Grey (American English, British English) 두 표기법 모두 사용 가능하며 같은 색을 나타냅니다.
** 밝은 배경색을 사용하는 경우에 직접 고른 색이 자칫 촌스러워 보일 수 있는데 이럴 때 색상이름 중에서 고르면 무난하게 선택할 수 있는 것 같습니다.
5. currentcolor
currentcolor 속성을 사용하면 선행하는 글자색의 컬러값을 그대로 상속받게 됩니다.
CSS 예시:
div {
padding: 5px;
font-size: 60px;
color: #9988ef;
text-shadow: 0 0 6px #FFF;
background-color: currentcolor; /* 배경색이 글자색인 #9988ef를 상속받음 */
}HTML:
<div>Text shadow effect, currentColor</div>div 박스의 배경색이 글자색을 상속받아 같은 색이 됩니다.
※coding tip: currentcolor를 사용하면 글자색만 교체해도 다같이 자동교체되므로 수정시 실수로 누락되는 일이 없다.
그런데, 많은 엘리먼트가 컬러값을 따로 표기하지 않는 경우 currentcolor값을 디폴트로 가지고 있기 때문에, 실제로 굳이 표기할 일이 없을지도 모른다. (예: underline 등의 text-decoration이나 border, text-shadow 색은 특별한 언급이 없을 경우 자동으로 글자색을 상속받는다.)
6. HWB: Hue, Whiteness, Blackness
CSS4부터 사용될 컬러 모델
CSS4 버전 표준으로 제안된 컬러 표기법이라고 하며, HSL의 채도, 명도 계산법이 복잡하게 느껴지는 사용자의 고충을 덜 수 있는 대안으로 보입니다.
예) Hue=0 (빨간색)에서 Whiteness, Blackness 둘 다 0%면 채도 최대치의 선명한 빨간색이고, 여기서 Whiteness 값만 늘어나면 점점 밝은 빨강~흰색까지 됩니다. 반대로 Whiteness값이 0이면서 Blackness값만 늘어나면 빨강색이 점점 검게 어두워지는 것이고요. 두 값이 같이 늘어나면 흰색, 검은색을 같이 섞게 되니까 빨강색+회색이 되어 점점 탁해지는 식이죠.
https://www.w3schools.com/colors/colors_hwb.asp
말로 설명하면 hsl방식과 별 차이 없어보이지만, 한 번 써보니 쉽고 직관적으로 색을 예측할 수 있는 방식 같습니다. (어차피 hex codes나 rgba 쓰겠지만...)
유용한 도구: 온라인 색상값 변환기
※Coding tip: 한 색상에 대해 각 컬러 모델의 코드값을 알려주는 온라인 도구를 이용해 원하는 색상값을 알아낼 수 있습니다.
▶색상 고르기 + 색상값 변환기: 왼쪽의 color picker와 Hue 막대를 조합해서 원하는 색을 고르면 해당하는 값으로 오른쪽 숫자가 모두 변경됩니다. 반대로 오른쪽의 #(hex값), rgb, hsl, cmyk 적힌 곳 중 하나에 값을 입력해도 나머지 값을 일괄 변환해줍니다.
▶컨버터 기능 + 색상 가이드: 제일 윗칸에 원하는 형식의 값을 형식에 맞게 입력하면 각각의 값으로 변환해주며, 아래 Use this color in our Color Picker 를 클릭하면 해당 색과 관련된 다양한 색상 가이드를 얻을 수 있다. (예: 해당 색상과 같은 채도의 다른 색상들 리스트, 해당 색상의 다양한 명도/채도 리스트) 이를 참고해 서브 컬러나 배경색 등을 고르면, 사이트를 깔끔하고 일관성있게 디자인할 수 있습니다.
www.w3schools.com/colors/colors_converter.asp
Use this color in our Color Picker 페이지
활용 예) #5b5bcd 색의 color picker 정보에서 명도만 다른 색상들(위 이미지에서 빨간 체크한 색)로 이미지박스를 만들었습니다.
텍스트 편집기 (source code editor) 기능 활용
※Coding tip: 컬러 사용에 좀 더 친숙해지고 싶다면 컬러값을 실제색상으로 보여주는 텍스트에디터의 기능을 사용하면 바로 색을 확인할 수 있습니다. html, css 파일을 지원하는 텍스트 에디터엔 대부분 이런 기능이 있습니다.
VS Code
Microsoft사의 무료 코드 에디터인 VS Code는 코드앞에 작은 썸네일로 컬러를 보여주고 이를 클릭하면 해당 color picker가 나오는데 여기서 직접 색상을 수정할 수 있습니다.
Brackets
VS Code가 사용하기 부담스럽다면, HTML+CSS 용으로는 Brackets도 충분할 것 같습니다. Brackets에서는 플러그인을 설치하면 색상을 해당코드 위에 하이라이트해서 보여줍니다.
컬러 사용시 고려할 점
"내가 워낙 컬러감각을 타고나서 내 사이트에는 다양한 색들을 쏟아붓는 것이 브랜드 정체성에 맞다, 거의 미쏘니에 빙의했다" 이런 확고한 철학이 있는 경우를 제외하고, 보편적 디자인과 사용자 경험을 최대화시키고 싶은 분이라면 컬러 사용을 최소화하는 것이 좋습니다.
또한, Primary color 외에 필요한 색상(배경색, hover/mouseover색, 하이라이트색 등)은 톤을 맞춰서 구성하는 것이 자연스럽습니다. Color picker 활용 추천.
패션종사자들은 매년(s/s, f/w) 다음해의 유행컬러나 패턴 등을 여러 키워드와 함께 발표하는데, 조금 덜 민감하긴 하지만 그래픽 분야에도 유행컬러가 있습니다. Pantone에서 발표한 올해의 컬러는 Classic Blue(#0F4C81)였습니다. 차분하고 너무 차갑지 않은 블루톤입니다. 굳이 사용할 필요는 없지만 그래픽 디자인에도 유행 컬러가 있다는 걸 아는 정도로만...
