[CSS] 색상 표현하는 방법 알아보기

CSS 색상 표현 방법

CSS의 색상 표현 방법에 대해 설명하는 포스팅입니다.

---

1. 색상명으로 표현

색상 이름으로 표현 가능하다.
약 140가지의 색상명들이 브라우저에 미리 정의되어 있다.

color: yellow;

// yellow, red, green, blue... 등등 색상명 넣기

2. RGB 값으로 표현

RGB(Red Green Blue)와 같은 형식으로 색을 표현할 수 있다.
RGB 각각의 변수에 0에서 255 사이의 정수를 입력하거나 백분율 값을 지정해 색상을 결정한다.

background-color:rgb(255, 0, 0);

3. RGBA 값으로 표현

2번의 RGB 방식에서 불투명도까지 조절 가능한 방법이다.
rgb 변수 다음에 오는 자리에서 0.0(투명)부터 1.0(불투명) 사이의 값을 입력해 불투명도를 조절한다.

background-color:rgba(255, 0, 0, 0.2);

4. HEX 값으로 표현

#123456 형식의 16진수 값으로 색상을 표현하는 방법이다.

color: #F5F5F5; background-color: #000000;

5. HSL/HSLA 값으로 표현

HSL은 색상, 채도, 명도로 색상을 정의하며 HSLA는 HSL 방식에서 불투명도까지 조절 가능하다. 색상은 0~360까지의 색상환에 따라 결정되며, 0:red, 120:green, 240:blue로 나타난다.채도와 명도는 백분율로 나타낸다.HSLA는 HSL방식에서 불불투명도 지정 기능이 추가된 것이며 HSLA(색상, 채도, 명도, 불투명도) 형식으로 표시한다.

background-color: hsl(0, 100%, 80%);
color: hsla(0, 100%, 60%, 0.5);