CSS 색상 표현

CSS 색상 표현

CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 다양한 색상 표현을 알아봅시다.

---

색상 이름

색상 이름으로 표현이 가능합니다.

.blue { color: blue; }
.green { color: green; }
.silver { color: silver; }

HEX (16진수)

RGB 색상값을 16진수로 변환한 것입니다. 기본색(red, freen, blue)을 각각 00부터 FF까지 범위로 표현합니다.

.blue { color: #0000FF; }
.green { color: #008000; }
.silver { color: #C0C0C0; }

RGB

RGB 색상은 각각 red, green, blue의 세가지 색을 혼합하여 색을 표현합니다.
색상값으로 정수 입력, 백분율 값을 통해 색상을 지정합니다.

#header_01 {background-color: rgba(0,255,0,0);}
#header_02 {background-color: rgba(0,255,0,0.2);}
#header_03 {background-color: rgba(0,255,0,0.4);}
#header_04 {background-color: rgba(0,255,0,0.6);}
#header_05 {background-color: rgba(0,255,0,0.8);}
#header_06 {background-color: rgba(0,255,0,1);}

RGBA

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상 값,
알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널입니다.
알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.

#header_01 {background-color: rgba(0,255,0,0);}
#header_02 {background-color: rgba(0,255,0,0.2);}
#header_03 {background-color: rgba(0,255,0,0.4);}
#header_04 {background-color: rgba(0,255,0,0.6);}
#header_05 {background-color: rgba(0,255,0,0.8);}
#header_06 {background-color: rgba(0,255,0,1);}

HSL

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현합니다.
HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다.
색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타냅니다.

#header_01 {background-color: hsl(0, 100%, 0%);}
#header_02 {background-color: hsl(0, 100%, 20%);}
#header_03 {background-color: hsl(0, 100%, 40%);}
#header_04 {background-color: hsl(0, 100%, 50%);}
#header_05 {background-color: hsl(0, 100%, 60%);}
#header_06 {background-color: hsl(0, 100%, 80%);}
#header_07 {background-color: hsl(0, 100%, 100%);}
                

HSLA

HSLA 색상값은 HSL 색상값에 알파 채널 값을 더한 색상값입니다.

#header_01 {background-color: hsla(0, 100%, 50%, 0);}
#header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
#header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
#header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
#header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
#header_06 {background-color: hsla(0, 100%, 50%, 1);}

opacity

opacity 속성은 색상에 대한 투명도를 설정해 줍니다.
opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다.

 #header_01 {background-color: rgb(0,255,0); opacity:0}
#header_02 {background-color: rgb(0,255,0); opacity:0.2}
#header_03 {background-color: rgb(0,255,0); opacity:0.4}
#header_04 {background-color: rgb(0,255,0); opacity:0.6}
#header_05 {background-color: rgb(0,255,0); opacity:0.8}
#header_06 {background-color: rgb(0,255,0); opacity:1}