웹 컬러 시스템 #1

1. 컬러의 이해

 

■ 컬러의 역할
어떤 대상의 심상은 형태와 컬러 Color에 가장 많은 영향을 받는다. 두 요소 중에서는 컬러에 더 많은 영향을 받기 때문에 컬러를 더 잘 기억한다고 한다. 미국의 색채학자 루이스 체스킨Louis Cheskin에 따르면 인간이 형태를 바라볼 때는 이성적으로 반응하는데 비해, 컬러를 바라볼 때는 감정적으로 반응한다고 한다. 즉 형태는 인간의 이성을 자극하고 걸러는 정서를 자극하기 때문에 컬러가 인상에 더 강렬하게 남고 기억하기도 쉽다는 말이다. 웹 디자인에서도 컬러는 중요한 역할을 한다.

 

■ 컬러의 종류
우리가 볼 수 있는 컬리는 크게 RGB 컬러와 CMYK 컬러로 나눌 수 있다.

 

■ RGB 컬러

RGB 컬러는 빛의 3원색인 빨강Red, 초록 Green, 파랑 Blue으로 구성된 컬러이다. 예를 들어. TV 모니터는 아주 작은 RGB 화소를 조합하여 영상을 만들어 낸다. RGB 화소는 세 가지 빛 RGB을 혼합하여 다양한 색을 만들어 낼 수 있다. 빛은 섞으면 섞을수록 광량이 더해져 밝고 선명해진다. 이러한 이유로 RGB 컬러를 혼합하는 것을 가산 혼합이라고 한다.

 

■ CMYK 컬러

CMYK 컬러는 염료의 3원색인 맑은 파란색 Cyan, 밝은 자주색 Magenta, 노랑 Yellow에 검정 black이 더해진 컬러이다. 주로 종이에 무언가를 인쇄할 때 사용하는 컬러이다. 염료는 섞으면 섞을수록 반사되는 빛의 양이 줄어 어둡고 탁해진다. 이러한 이유로 CMYK 컬러를 혼합하는 것을 감산 혼합이라고 한다.

 

■ 웹 컬러 코드

웹 컬러 코드는 웹 안전 걸러, 웹 표준 색상, HTML 색상 등으로 다양하게 불리며, 웹 HIML을 제지할 때 쓰는 코드이기도 하다. 포토샵을 사용해 봤다면 Color Picker 대화 상자에서 #00baf'와 간은 코드 값을 본 적이 있을 것이다. 이 코드가 웹 컬러 코드이다. 이렇게 복잡해 보이는 웹 컬러 코드를 쓰는 이유는 무엇일까? 포토샵의 Color Picker 대화 상자에서 파랑을 마우스로 선택하기는 쉽지 않다. 이럴 때 웹 컬러 코드를 사용하면 손쉽게 빛의 3 원색 중 하나인 파랑을 정확히 선택할 수 있다.

 

TIP_웹 컬러 코드(웹 안전 컬러) : 웹 컬러 코드는 RGB 컬러를 기본으로 한다. 컬러는 0~255단계로 총 256단계로 표현된다(RGB 조합에 따라 색이 만들어진다).

TIP_웹 컬러 코드의 분해 : 웹 컬러 코드 (예를 들어. '#00baff' )는 보기에도 꽤 어려워 보인다. 여러 가지 컬러가 존재하고, 컬러마다 코드가 붙여지는데 그 많은 코드를 어떻게 알 수 있을까? 웹 컬러 코드를 무작위로 붙인 것이 아니라 규칙에 따라 붙이기 때문에 생각보다 이해하기 쉽다. 코드를 규칙에 따라 나눠 보면 '#+빨강+초록+파랑' 형태이다. 웹 컬러 코드에는 항상 맨 앞에 샵(#)이 붙는다. 샵 다음에는 빛의 3원 색인 빨강, 초록, 파랑 값을 16진수로 입력하여 표현한다. 각 컬러의 최솟값이 00이고 최댓값이 ff라는 걸 알면 컬러 코드를 쉽게 만들 수 있다. 예를 들어 빨강은 R만 있으면 되므로 R의 최됐값인 ff와 G와 B의 최솟값인 0000을 합친 #ff0000이다. 파랑은 B만 있
으면 되므로 R과 G의 최솟값인 0000과 B의 최댓값인 f를 합친 #0000ff이다. 노랑은 R+G이므로 #ffff00이다. 백색광은 R.G.B 모두 최댓값으로 쓰므로 #ffffff이다. 검정은 빛을 완전히 차단한 상태이므로 RGB 값이 모두 최솟값인 #000000이다.

#ffffff
빨강 초록 파랑

 

 

---

 

2. 컬러 선택을 돕는 도구

 

웹 디자인에서 컬러를 선택할 때는 브랜드 아이덴티티 컬러를 중심으로 가이드를 계획해야 한다. 이미 메인 컬러가 정해진 경우라면 메인 컬러와 조화를 이루는 배색 컬러를 선택해야 한다. 어떤 걸러가 배색되는지에 따라 전혀 다른 느낌이 날 수 있다. 컬러를 한 가지 선택하는 것보다 컬러를 여러 가지로 배색하는 과정은 훨씬 어려운 작업이다. 혼자서 컬러를 배색하기 힘들다면 여러 도구를 빌려 쓰길 추천한다. 추천받은 배색을 경험하다 보면 배색하는 감을 익힐 수 있어 이후에 혼자서 배색을 할 때도 수월하게 할 수 있기 때문이다.

 

■ Colorfavs

Colorfavs는 이미지를 업로드하면 업로드된 이미지를 분석하여 이미지에 맞는 컬러를 골라 주는 웹 사이트이다. 디자인 작업을 마치고 컬러가 고민이라면 이미지를 업로드해서 사용해 볼 수 있다. 이미지는 한 번에 한 장만 분석할 수 있지만 사용법이 매우 단순하다. 이미지 분석 작업은 몇 초면 끝나고, 분석을 마치면 이미지에 이울리는 컬러를 다섯 가지 보 준다. 디자인 작업이나 이미지 수정을 마치고 배경색이나 이미지와 어울리는 컬러 가 고민일 때 한 번씩 써 보면 아이디어를 쉽게 얻을 수 있다.

 

■ 어도비 컬러 CC

어도비 컬러 CC는 어도비에서 만든 컬러 가이드 웹 사이트이다. 유사색, 단색, 삼각형, 보색, 혼합색, 음영, 사용가 정의 등의 다양한 컬러 배색을 제공한다.

 

■ Colorhunt

lorhunt는 네 가지 컬러로 구성된 컬러 조합을 큐레이션 Curation 해 주는 웹 사이트이다. 컬러 조합을 참고하여 원하는 구성을 만들 수 있도록 돕는 서비스이다. New, Hot, Popular , Random 카테고리를 참고하면 원해는 조합을 쉽고 빠르게 찾을 수 있다.

 

■ Coolors

Coolors는 모바일 앱과 웹 페이자를 통해 컬러를 구성할 수 있도록 돕는 웹 사이트로 다섯 가지 조합을 만들 수 있다. 웹에서는 Spacebar를 눌러 무작위로 구성하거나 마음에 드는 컬러만 따로 골라 구성해 저장하고 공유할 수 있다. 기능 메뉴는 네 가지를 제공한다. 각 컬러의 그러데이션 컬러 Grndation Color를 선택할 수 있고 드래그하여 컬러 순서를 바꿀 수도 있다. 컬러 보정 메뉴를 이용해 색조 명도, 채도 등을 조절할 수 있다.

 

■ Colorcrush

Colorcrush는 좋아하는 컬러 조합을 쉽고 빠르게 확인할 수 있도록 돕는 서비스이다. 컬러 조합이 마음에 들지 않으면 왼쪽에 있는 x 아이콘, 마음에 들면 오른쪽에 있는 ♡ 아이콘을 클릭한다.

 

TIP_플랫 UI 컬러 참고 사이트 : 플렛  UI 참고 사이트인 Tint U와 Flat U Colors에서 원하는 컬러를 클릭하면 바로 컬러 코드가 복사되기 때문에 포토샵이나 일러스트레이터에서 그대로 붙여 쓸 수 있다.