[HTML+CSS][색상과 배경을 위한 스타일] 01 - 웹에서 색상 표현하기

 

[HTML+CSS][텍스트 관련 스타일] 04 - 목록 스타일

 

웹을 디자인할 때 중요한 부분을 차지하는

색상에 대해서 알아보고 색상을 표기하는 방법들에 대해서

살펴보자.

 

 

---

 

 

16진수 표기법

 

‘#’ 기호 다음에 6자리의 16진수로 표시하며 #RRGGBB 형식으로 표시해 준다.

 

이때, 숫자가 커질수록 색이 많이 섞였다는 것을 의미한다.

 

 

---

 

 

rgb 와 rgba

 

rgb는 빨간색, 초록색, 파란색의 양을 나타내며

0부터 255까지의 십진수로 표현해 주면 된다.

 

rgba는 기존 rgb가 성격은 같지만 불투명도 값을 나타내며

0부터 1까지의 수로 나타내 주면 된다.

 

 

---

 

 

hsl 와 hsla

 

hue(색상), saturation(채도), lightness(밝기)를 나타내며,

색상은 색상원의 각도를 골라 사용하고 채도와 밝기는 %로 나타내 주면 된다.

 

 

hsla는 마찬가지로 불투명도 값이 추가된 것이라고 보면 된다.

 

 

---

 

 

색상 이름 표기법

 

잘 알려진 색상 이름으로 표시하면 되며,

16가지 기본 색상을 포함해 총 216가지 이다.

 

16가지 기본 색상 : aqua, black, blue, fuchsia, gray, green, lime,

maroon, navy, olive, purple, red, silver, teal, white, yellow

 

 

---

 

 

 

 

---

 

 

색상을 표기하는 방법에 대해 기본적으로 배웠다면

나중에 배경에 색을 입힐경우에

훨씬 색을 잘 입힐 수 있을 것 같다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※