CSS에서의 색상 설정

CSS에서 색상은 다음과 같은 방식으로 지정될 수 있다.

• RGB 색상
• Hexadecimal 색상
• RGBA 색상 ★
• HSL 색상
• HSLA 색상 ★
• 색상 키워드(이름)

RGB 색상

RGB 색상 값은 모든 주요 브라우저에서 지원된다. RGB 색상 값은 rgb(red 빨강, green 녹색, blue 파랑)으로 지정한다. 각 변수(빨강, 녹색, 파랑)는 색상의 강도를 정의하고 0부터 255 사이의 정수, 또는 퍼센트 값(0% ~ 100%)으로 지정할 수 있다.

예를 들어, rgb(0, 0, 255) 값은 파랑으로 표현된다. 파랑(blue)의 변수가 최대 값으로 설정되고, 나머지 값(red, green)은 0으로 설정되기 때문이다.

예1

 {
 width:100px;  
 height:100px;  
 background-color:rgb(165, 42, 42);  
 border:1px solid rgb(0, 0, 0);  
 }

예2

 {
 width:100px;  
 height:100px;  
 background-color:rgb(100%,67%,50%);  
 border:1px solid rgb(0%, 0%, 0%);  
 }

! 주의
rgb(255, 0, 51.2)  정수만을 입력해야 한다. 소수는 안됨.
rgb(100%, 0, 20%)  퍼센트 값과 정수 값을 섞어서 쓰면 안된다.

16진수 색상 코드. 일명 Hex 코드 (Hexadecimal Colors)

16진수 색상 값은 모든 주요 브라우저에서 지원된다. 16진수 색상은 #RRGGBB, 즉 RR(Red - 빨강), GG(Green - 녹색), (Blue- 파랑) 16진수 색상으로 지정한다. 모든 값은 0 ~ FF 사이여야 한다.

예를 들어, #0000FF 값은 파랑색으로 렌더링 된다. 파란색 구성요소의 최대 값(FF)으로 설정 되고 나머지는 0으로 설정 되기 때문이다.

6자리, 또는 3자리의 Hex 코드를 지정할 수 있다.

예3

 {  
 width:100px;  
 height:100px;  
 background-color:#2580a2;  
 border:1px solid #000000;  
 }  

예4

 {  
 width:100px;  
 height:100px;  
 background-color:#f03;  
 border:1px solid #000;  
 }  

! Hex 코드는 RGB 값을 16진수로 표현한 것이므로, 사실 RGB의 범주에 들어가야 한다.


RGBA 색상 ★

RGBA 색상 값은 익스플로러 버젼 9 이상, 파이어폭스 3 이상, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다. RGBA 색상 값은 알파 채널(알파값, 즉 투명도)이 더해진 RGB 색상 값의 확장이다. RGBA 색상 값은 rgba(red 빨강, green 녹색, blue 파랑, alpha 투명도) 로 지정한다. 알파(투명도) 변수는 0.0(완전 투명)과 1.0(완전 불투명) 사이이다.

예5 완전 투명 Red rgba(255, 0, 0, 0.0)
10% 불투명한 Red rgba(255, 0, 0, 0.1)
30% 불투명한 Red rgba(255, 0, 0, 0.3)
70% 불투명한 Red rgba(255, 0, 0, 0.7)
100% 불투명 Red rgba(255, 0, 0, 1.0)

예6

 {  
 width:100px;  
 height:100px;  
 background-color:rgba(188, 143, 143, 0.4);  
 border:1px solid rgba(0, 0, 0, 1.0);  
 }  

HSL 색상

HSL 색상 값은 익스플로러 버젼 9 이상, 파이어폭스, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다. HSL은 각각 Hue(색조), Saturation(채도), Lightness(명도)로, 원통좌표계(cylindrical-coordinate)의 색상을 나타낸다.

그림1. source : wikipedia, HSL and HSV

HSL 색상 값은 HSL(색조, 채도, 명도)로 지정한다. Hue(색조)는 색상환(color wheel)에서의 각도(degree)이다. 0은 빨강, 120은 녹색, 240은 파랑이다. Saturation(채도)는 퍼센트 값이다. 0%은 회색 음영을 의미하고, 100%는 풀 컬러이다. Lightness(명도)는 퍼센트 값이다. 0%는 검정, 100%는 흰색을 의미한다.

예7

 {  
 width:100px;  
 height:100px;  
 background-color:hsl(120,100%,25%);  
 border:1px solid hsl(0, 0%, 0%);  
 }  

HSLA 색상 ★

HSLA 색상 값은 익스플로러 버젼 9 이상, 파이어폭스 버젼 3 이상, 크롬, 사파리, 오페라 버젼 10 이상에서 지원된다.

HSLA 색상 값은 알파(투명도) 값이 더해진, HSL 색상값의 확장이다. HSLA 색상 값은 HSLA(Hue, Saturation, Lightness, Alhpa)로 지정한다. 마지막 변수 alpha 로는 투명도를 설정한다. 알파 변수는 숫자 0.0과 1.0 사이이다.

예8 완전 투명 Steelblue hsla(207, 44%, 49%, 0)
9% 불투명한 Steelblue hsla(207, 44%, 49%, 0.09)
30% 불투명한 Steelblue hsla(207, 44%, 49%, 0.3)
60% 불투명한 Steelblue hsla(207, 44%, 49%, 0.6)
100% 불투명 Steelblue hsla(207, 44%, 49%, 1)

예9

 {  
 width:100px;  
 height:100px;  
 background-color:hsla(60, 100%, 25%, 0.4);  
 border:1px solid hsla(0, 0%, 0%, 1);  
 }  

색상 키워드

CSS에서는 색상의 이름(키워드)으로 색상을 지정할 수 있다. 색상 키워드에 대해서는 CSS 색상 키워드 라는 글을 참고.

예10

 {  
 width:100px;  
 height:100px;  
 background-color:tomato;  
 border:1px solid black;  
 }