[CSS] css 색상표현하기

css에서 색상을 표현하는 방법은 3가지가 있습니다.

 

1, 색상 이름 사용

원하는 색상의 이름을 바로 입력하여 사용합니다.

140가지의 색상을 이름으로 지원하지만, 디자인에 맞는 색상을 사용하기엔 한계가 있습니다.

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

CSS Colors

위의 링크를 참조하시면 다양한 색상의 이름을 알 수 있습니다.

p {color:red;}

 

2, RGB 사용하기

RGB 표기법은 rgb(red, green, blue) 형식으로 색상을 표현합니다.

각 요소에 0 ~255 사이의 숫자를 입력해 색상을 표현하게 되는데, 투명도를 추가하여 표현 가능합니다.

rgba (red, green, blue, alpha)로 a의 값에 투명도를 표기해주시면 됩니다.

투명도는 0~1까지 사용할 수 있습니다.

p {color:rgba(0, 0, 0, 0.7);}

 

3, HEX 사용하기

실무에서 많이 사용하는 표기법입니다.

RGB를 16진수로 변환하여 00~ff까지 두 자리씩 표기합니다.

코드를 작성할 때는 제일 앞에 #를 붙여줍니다.

00 (검정) -> ff (흰색) 

같은 숫자가 반복되는 색상이면 3자리로 줄여 표기합니다.

p {color:#fff;background:#94fb11;}