css 색상 표현

CSS의 색상 표현 방법들

css로 색상을 표현하는 방법은 여러가지가 있습니다. 어떠한 방법이 있는지 알아봅시다.

01. 색상의 이름으로 표현

white나, black, red등 색상의 이름으로 결정해줄 수 있습니다. 그러나 세세한 채도나 명도의 변경을 할 수는 없어 잘 쓰이진 않습니다.

color : blue;
background-color : red;

02. 색상의 코드로 표현

#RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법이다. RR, GG, BB는 각각 red, green, blue를 나타내는 값이며 16진수 00에서 FF사이의 값으로 결정됩니다.

color : #0099a4;
background-color : #8f31ea;

03. RGBA로 표현

RGB 표현의 확장으로, 불투명도를 지정하는 기능이 추가된 것입니다. rgba(red, greed, blue, alpha)로 표현하며 alpha 변수의 값은 0.0(투명)과 1.0(불투명) 사이의 값 중 지정합니다

color : rgba(143, 49, 234, 0.2);
background-color : rgba(28, 167, 255, 0.2);

04. HSL로 표현

HSL는 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다.색상은 0부터 360까지의 색상환에 따라 결정되며 0:red, 120:green, 240:blue로 나타내는데, 채도와 명도는 백분율로 나타냅니다. HSLA는 HSL방식에서 불투명도 지정 기능이 추가된 것이며 HSLA(색상,채도,명도,불투명도) 형식으로 나타냅니다.

color : hsl(0,100%,80%);
background-color : hsl(0,100%,20%);