[CSS]웹에서 색상 표현하기

 웹 문서에서 색상을 표현하는 방법에 대해 알아보겠습니다.

 

1. 16진수 표기법

 

 16진수 표기법은 색상을 표현하는 가장 기본적인 방법으로, 세밀히 색상을 조절하고 싶을 때 사용합니다. 

기본형

#RRGGBB (두 자리 씩 16진수, 00~ff)

 

2. rgb와 rgba 표기법

 

 이 표기법은 16진수 표기법과 달리 10진수로 RGB 값을 지정합니다. rgba 로 사용할 때, a는 alpha 값으로, 투명도를 조절할 수 있습니다. 

 R, G, B 값의 범위는 0부터 255이고 alpha 값의 범위는 0부터 1(0에 가까울수록 투명)입니다. 

기본형

rgb(R, G, B)

rgba(R, G, B, a)

 

3. hsl과 hsla 표기법 

 

 hsl은 차례대로 색상(hue), 채도(saturation), 밝기(lightness)를 나타냅니다. alpha로 투명도를 조절할 수 있습니다. 

 

 색상(hue)는 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시합니다. 0도와 360도는 빨간색, 120도는 초록색, 240도는 파란색을 나타냅니다. 

 

 채도(saturation)는 '%'로 표시하며 100%에 가까울수록 채도가 높아집니다. 

 

 밝기(lightness) 또한 '%'로 표시하며 100%에 가까울수록 밝아집니다. 

 

기본형

hsl(색상, 채도%, 밝기%)

hsl(색상, 채도%, 밝기%, a)

 

4. 색상 이름 표기법

 

 이 표기법으론 red나 yellow, black 처럼 잘 알려진 색상 이름으로 표시할 수 있습니다.

 

 모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상이라고 하는데 기본 16가지 색상을 포함해 모두 216가지입니다.

 

(기본 16가지 색상: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)

 

 

- 예제

 

<style>
	.text1 {  /*16진수 표기법*/
    	color: #ffffff;  /*흰 색*/
    }
	.text2 {  /*rgb 표기법*/
    	color: rgb(0, 0, 255);  /*파란색*/
    }
	.text3 {  /*hsl 표기법*/
    	color: hsl(360, 100%, 0%);  /*빨간색*/
    }
    .text4 {  /*색상 이름 표기법*/
    	color: green;  /*초록색*/
    }
</style>