CSS로 색상 표현하기(HEX, RGB, 색 이름)

html 파일에 사용된 텍스트나 div 배경 등에 색상을 사용할 때는 CSS를 이용하면 된다. CSS에서 색상을 표현하는 방법 세가지를 포스팅으로 정리하려고 한다.

 

 

색 이름 사용하기

우리가 사용하는 색상 이름을 바로 입력하여 사용이 가능하다.

 

p {
 color: red;
 background-color: white;
}

 

CSS에서는 140가지의 색상을 이름으로 지원한다고 한다. 아래 url을 클릭하면 지원하는 색상표를 확인할 수 있다. 그러나 이 방법은 black, white가 아닌 이상 색상을 세밀하게 원하는 대로 조절할 수 없어서 디자이너들은 거의 사용하지 않는다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB를 사용하는 것이다.

https://www.w3schools.com/cssref/css_colors.asp

CSS Colors

 

RGB 사용하기

RGB 색상표기법은 rgb(red, green, blue) 형식으로 색상을 표현하는데, 각 요소에는 0에서 255사이의 숫자를 입력한다. 여기에 투명도를 더하고 싶다면 rgba(red, green, blue, alpha) 형식으로 blue뒤에 쉼표로 구분하고 네번째 자리에 불투명도를 표기해주면 된다. 투명도 표기법은 0~1까지 사용할 수 있고, 숫자가 적을수록 투명해진다. 0은 완전 투명, 1은 불투명이다. 예를 들어, 투명도 50%의 검정색, 투명도 30%의 노랑색을 표현하고 싶다면 아래와 같이 쓸 수 있다.

 

/* 투명도 적용하지 않음 */

p {
  color: rgba(0, 0, 0); /* 검정색 */
  background-color: rgba(251, 247, 17); /* 노랑색 */
}

/* 투명도 적용 */

p {
  color: rgba(0, 0, 0, 0.5); /* 투명도 50% 검정색 */
  background-color: rgba(251, 247, 17, 0.7); /* 투명도 30% 노랑색 */
}

 

HEX 사용하기

실제로 실무에서 가장 많이 사용하는 색상 표기법이다. RGB 순서대로 16진수로 변환하여 00~ff까지 두자리씩 표기한다. 여섯자리의 색상코드 앞에는 샵(#)을 붙인다. 숫자가 작을수록 어두운 색상으로 #000000은 검정색, #ffffff는 하얀색이다. 같은 숫자가 반복된다면 #000000 -> #000, #ffffff -> #fff 이런 식으로 줄여서 세자리로 표기해도 무방하다. 

 

p {
 color: #94FB11;
 background-color: #3111FB;
}

 

마음에 드는 색상을 직접 골라서 사용하고 싶다면 아래 사이트를 추천한다. HEX, RGB 색상코드를 모두 제공하기 때문에 색상을 고르고 색상코드를 복사 붙여넣기하여 편리하게 사용이 가능하다.

https://htmlcolorcodes.com/color-picker/

Color Picker — HTML Color Codes