05. color 표기법 _ 16진수, 컬러네임, rgb

color 표기법은 크게 세가지로 나눌 수 있습니다.

16진수, 색상 이름으로, rgb의 비율로 명시할 수 있습니다.
편하신대로 사용하시면 됩니다.
대표적인 색상을 사용할때는 이름으로, 좀 더 디테일한 색상은 16진수나 rgb로,
투명도를 추가할때는 rgba를 사용하면 됩니다.

16진수

#뒤에 각 색상에 맞는 6자리 숫자,알파벳을 나열해 색상을 표시하는 방법입니다.
자세한 설명과 컬러표는 http://html-color-codes.info/Korean/를 참고하세요.
같은 숫자나 알파벳이 반복되는 경우에는 줄여서 사용할 수 있습니다.
예를 들면 #000000이나 #ffffff의 경우 #000, #fff로 줄여 쓸 수 있습니다.

<p class="color_16">16진수로 색상을 명시합니다</p>
 

CSS

<style>
   p.color_16 {color:#31C6F3;}
</style>
 

16진수로 색상을 명시합니다

color name

직접적으로 색상의 이름을 입력해서 색상을 표시하는 방법입니다.
컬러네임은 http://www.w3schools.com/cssref/css_colornames.asp에서 확인할 수 있습니다.
140여종의 컬러네임이 있는데 이 중에서 17개가 표준 컬러인데 우리가 흔히 아는 컬러를 영어로 표기하면 됩니다.
red나 blue, gray, yellow 등등이요. 그외에도 자주 쓰는 색상의 컬러네임을 알아두면 유용합니다

<p class="color_name">16진수로 색상을 명시합니다</p>
 

CSS

<style>
   div.color_name {background-color:springgreen;}
</style>
 

color name으로 색상을 명시합니다

rgb

rgb의 값을 숫자로 색상을 표시하는 방법입니다.
http://html-color-codes.info/Korean/ 이 사이트에서 밑에 html 컬러 픽커의 rgb값을 참고하면 됩니다.
rgb(숫자, 숫자, 숫자)로 표기하며, 만약 투명도를 주고 싶다면
여기에 a값을 추가하여 rgba(숫자, 숫자, 숫자, 투명도)를 주면 투명도가 조절됩니다.
투명도는 1~0 사이의 값을 가지며 1일때는 투명도가 없는 상태, 0이면 투명도가 100%로 눈에 보이지 않는 상태입니다.

<p class="color_rgb">rgb값으로 색상을 명시합니다</p>
<p class="color_rgba">rgb값에 투명도를 줍니다</p>
 

CSS

<style>
   p.color_rgb {color:rgb(38, 217, 101);}
   p.color_rgba {color:rgba(38, 217, 101, .4);}
</style>
 

rgb값으로 색상을 명시합니다

rgb값에 투명도를 줍니다

* 개인적인 공부를 정리하는 블로그입니다.