CSS 색상 표현

CSS 색상 표현

CSS에서는 색상을 표현하는 여러가지 방법이 있습니다.
이번 시간에는 그 중 몇가지의 표현 방법을 알아보겠습니다.

---

RGB 표현 방법

RGB 색상은 각각 red, green, blue의 세가지 색을 혼합하여 색을 표현합니다.
RGB 색상 지정 방법은 정수 입력을 하거나 백분율 값을 지정하여 색상을 지정합니다.

    .blue {color: rgb(0, 0, 255)}
    .green {color: rgb(0, 128, 0);}

16진수 표현 방법

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

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

RGBA 표현 방법

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

    h1 {background-color: rgba(0, 0, 255,0.3);}
    h2 {background-color: rgba(0,128,0,0.3);}

HSL 표현 방법

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

    #h1 {background-color: hsl(240, 100%, 30%);}
    #h2 {background-color: hsl(120, 100%, 50%);}

HSLA 표현 방법

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

    #h1 {background-color: hsla(240, 100%, 50%, 0);}
    #h2 {background-color: hsla(240, 100%, 50%, 0.2);}

opacity 표현 방법

색상말고도 투명 값을 설정할 수 있으며, 방법은 opacity이다.
opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

    #h1 {background-color: rgb(0, 0, 255); opacity:0}
    #h2 {background-color: rgb(0, 128, 0); opacity:0.2}