[CSS] CSS 색상 표현방법 (RGB, HSL 등)

 

CSS에는 여러가지 색상 표현방법이 있다.

CSS3 이전에는 16진수, 색상명, RGB 값으로 색상을 표현하는 방법이 있었으나, 

CSS3에서부터 RGBA, HSL, HSLA 색상값이 추가되었다.

 

16진수 표기법

- # 이후 16진수 색상값, #rrggbb 형식.

- 각 값들이 반복되는 경우 #rgb로 한 자리씩 생략 가능. ( #ff0000 > #f00)

div { 
	background-color: #0000ff; 
	color: #fff;
}

 

색상명 표기법

- 각 색상들의 명칭으로 표기.

- w3schools 색상명 확인 바로가기

HTML Color Names

div {
	background-color: blue;
	color: white;
}

 

RGB 값 표기법

- RGB값을 10진수 형식으로 표기. ( rgb(100,100,100) )

- 각 색상 범위는 0~255, 쉼표로 구분.

- rgba로 투명도 조절까지 가능. a는 알파채널( alpha channel )을 뜻하며 알파채널은 투명도를 의미한다.

투명도는 0.0에서 1 사이 값을 지정한다.

div {
	background-color: rgba(0,0,255,0.9);
	color: rgb(255,255,255);
}

 

HSL 값 표기법

색상환

- Hue, Saturatuion, Lightness 색조, 채도, 명도

- Hue(색조)는 색상환의 각도로 표현.  ( 0 ~ 360. 0 = red, 120 = green, 240 = blue. )

- Saturation(채도)은 백분율로 표현. ( 0% = 채도 없음. 100% = 가장 높은 채도. )

- Lightness(명도)는 백분율로 표현. ( 0% = 가장 어두운 색(검정색) / 100% = 가장 밝은 색(흰색) )

- rgba와 마찬가지로 a를 붙여서 투명도를 표현 할 수 있다.

div {
	background-color: hsla(240,100%,50%,1);
	color: hsl(0,0%,100%);
}