Css Reference

CSS CSS 색상

CSS 색상

CSS로 색을 표현할 수 있는데 색을 표현하는 방법에는 다음과 같은 방법이 있다.

색상 이름으로 표현
RGB 색상값으로 표현
16진수 색상값으로 표현
RGBA 색상값으로 표현
HSL 색상값으로 표현
HSLA 색상값으로 표현

색상이름으로 표현

색상 이름으로 표현가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다.

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	yellow
silver	teal	white	yellow

HTML에서 색상 이름은 대소문자를 구분하지 않는다.

<style>
    .blue { color: blue; }
    .green { color: green; }
    .silver { color: silver; }
</style>

RGB 색상값으로 표현

모니터나 스크린은 빨간색, 녹색, 파란색을 혼합하여 색을 표현한다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다. RGB 색상의 기본(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

<style>
    .blue { color: rgb(0,0,255); }
    .green { color: rgb(0,128,0); }
    .silver { color: rgb(192,192,192); }
</style>

16진수 색상값으로 표현

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색은 각각 00부터 FF까지의 범위를 가진다.

<style>
    .blue { color: #0000FF; }
    .green { color: #008000; }
    .silver { color: #C0C0C0; }
</style>

RGBA 색상값으로 표현

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값이다. 알파채널이란 색상의 투명도를 나타내는 채널이다.

<style>
    #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);}
</style>

HSL 색상값으로 표현

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현한다. HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미한다.

색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타낸다. 색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 된다.

<style>
    #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);}
</style>

채도는 0%부터 100% 사이의 값을 가지며, 색상의 연하고 짙은 정도를 나타낸다. 채도 값이 0%면 회색이 되고, 100%면 원래 색상이 된다.

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

명도는 0%부터 100% 사이의 값을 가지며, 색상의 밝고 어두운 정도를 나타낸다. 명도 값이 0%면 검정색이 되고, 50%면 원래 색상, 100%면 흰색이 된다.

<style>
    #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%);}
</style>

HSLA 색상값으로 표현

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

<style>
    #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%);}
</style>