[HTML, CSS] CSS 색상 설정하기

이번 글에서는 CSS에서 색상을 설정하는 방법들에 대해서 설명하겠습니다. 색상을 지정하는 방식에 따라서 약 5가지 방법으로 구분할 수 있습니다.

 

① 16진수 - #RRGGBB

RGB 색 모형에서 빨간색, 초록색, 파란색의 값을 각각 16진수로 표현하는 방법입니다. 모든 값들은 16진수이기 때문에 00과 FF 사이의 값이어야 합니다. 

#hexcolor1 { color: #ff0000; } /* red */
#hexcolor2 { color: #00ff00; } /* green */
#hexcolor3 { color: #0000ff; } /* blue */

※ 16진수를 활용할 때, #RRGGBB 다음에 두 자릿수를 덧붙여서 알파 값을 넣어서 투명도를 지정할 수 있습니다.

#hexcolor1_transparent { color: #ff000080; } /* transparent red */
#hexcolor2_transparent { color: #00ff0080; } /* transparent green */
#hexcolor3_transparent { color: #0000ff80; } /* transparent blue */

 

② RGB - rgb(red, green, blue)

첫 번째 방법은 16진수를 활용해 색을 지정했다면, 두 번째 방법은 rgb 함수를 활용하는 것입니다. rgb(빨간색, 초록색, 파란색)에서 3가지 색을 1) 0과 255 사이의 정수 값으로 지정하거나, 2) 0%과 100% 사이의 퍼센트 값으로 지정할 수 있습니다. 16진수를 10진수로, 또는 퍼센트로 바꿔서 사용한다고 생각하시면 됩니다.

#rgbcolor1 { color: rgb(255, 0, 0); } /* red */
#rgbcolor2 { color: rgb(0, 255, 0); } /* green */
#rgbcolor3 { color: rgb(0%, 0%, 100%); } /* blue */

※ 첫 번째 방법과 유사하게 rgb 함수에 알파 값을 넣어서 투명도를 지정할 수 있습니다. 네 번째에 들어가는 알파값은, 0.0(완전히 투명함)과 1.0 (완전히 불투명함) 사이의 값으로 지정하거나 퍼센트 값으로 지정할 수 있습니다.

#rgbcolor1_alpha { color: rgb(255, 0, 0, 0.3); } /* transparent red */
#rgbcolor2_alpha { color: rgb(0, 255, 0, 0.3); } /* transparent green */
#rgbcolor3_alpha { color: rgb(0%, 0%, 100%, 30%); } /* transparent blue */

 

③ HSL - hsl(hue, saturation, lightness)

HSL 색 모형을 바탕으로 만들어진 hsl 함수를 활용하여 색을 지정할 수도 있습니다. Hue(색상), Saturation(채도), Lightness(명도)을 각각 지정하는 방법입니다.

- 색상은 0에서 360 사이의 값으로 지정할 수 있으며, 0은 빨간색, 120은 초록색, 240은 파란색입니다.

- 채도(색의 맑은 정도)는 0%에서 100% 사이의 값으로 지정할 수 있으며, 0%는 회색 색조에 가까워지며 100%는 완전한 색상을 표현합니다.

- 명도(색의 밝은 정도)는  0%에서 100% 사이의 값으로 지정할 수 있으며, 0%는 검정색이며 100%는 하얀색입니다. 

#hslcolor1 {background-color:hsl(120,100%,50%);} /* green */
#hslcolor2 {background-color:hsl(120,100%,75%);} /* light green */
#hslcolor3 {background-color:hsl(120,25%,50%);} /* dark green */

※ 두 번째 방법과 동일하게 hsl 함수에 알파 값을 넣어서 투명도를 지정할 수 있습니다. 

#hslcolor_alpha {background-color:hsl(120,100%,50%, 0.3);} /* transparent green */

 

④ 색상의 명칭

CSS에서는 140가지의 색상에 미리 이름이 지정되어 있습니다. 이러한 이름들을 사용해서 색을 간편하게 지정할 수 있습니다. 

ex) Aqua, Black, Crimson, Gainsboro, White...

더 많은 예시는 이 웹사이트(https://www.w3schools.com/cssref/css_colors.php)를 통해 확인할 수 있습니다. 

#predefcolor1 { color: blue; }
#predefcolor2 { color: Maroon; }

 

⑤ 요소의 색상 속성값

만약 색상을 지정하고자 하는 요소에 color 속성값이 지정되어 있다면, currentcolor 값을 통해서 그 색을 사용할 수 있습니다. 만약 현재 요소에 color 속성값이 지정되어 있지 않은 경우, 상속받은 color 속성값을 사용하게 됩니다. 

#color_cur1 {
  color: red; /* Red text color */
  border: 10px solid currentcolor; /* Red border color */
}

#color_cur2 { color: blue; } /* Blue text color */
#color_cur2 span { border: 1px solid currentcolor; } /* Blue border color */