색상 표현 방법

CSS 색상표현방법

CSS의 색상은 글자색(color) 뿐 아니라 배경색(background), 테두리(border)등 다양한 CSS속성들이 적용됩니다. 이때, 색상을 표현하는 것에는 다양한 방법이 존재합니다.

---

색상명

해당 색상을 의미하는 고유명사를 속성값으로 사용합니다. 사용할 수 있는 속성값으로는 red, green, blue, aqua, corel, ... 등 여러 가지가 있으나 해당 색상값을 의미하는 단어를 미리 알고 있어야 합니다.

속성 값	속성 설명
color: orange;	글자를 오렌지색으로 표현합니다.
background: beige;	배경을 베이지색으로 표현합니다.
border-color: tomato;	테두리를 토마토색으로 변경합니다.

픽셀(px)은 해상도에 따라 상대적으로 달라지는 기본 단위 입니다.

HEX값

red, green, blue의 세 가지 색을 16진수 00~ff 사이의 수치로 표현하는 것으로서 #rrggbb형태로 기술합니다. #aabbcc와 같이 세 가지 색 모두 두 자리 값이 같으면 #abc라고 한자리로 줄여 쓸 수 있습니다. #ffffff는 흰색을 의미하며 #000000은 검정색을 의미합니다.

HEX 값	속성 설명
color: #000000;	red:0, green:0, blue:0 색상으로 표현
color: #ff0000;	red: 255, green:0, blue:0 색상으로 표현
color: #00ff00;	red:0, green:255, blue:0 색상으로 표현
color: #0000ff;	red:0, green:0, blue:255 색상으로 표현
color: #ffff00;	red:255, green:255, blue:0 색상으로 표현
color: #00ffff;	red:0, green:255, blue:255 색상으로 표현
color: #ff00ff;	red:255, green:0, blue:255 색상으로 표현
color: #ffffff;	red:255, green:255, blue:255 색상으로 표현 (흰색)

RGB값

rgb(red, green, blue) 형태로 기술하며 red, green, blue는 10진수 0~255 사이의 수치로 표현합니다.

속성 값	속성 설명
color: rgb(255, 128, 0);	글자를 red:255, green:128, blue:0 색상으로 표현합니다.

HSL값

hsl(hue, saturation, lightness) 형태로 기술하며 hue(색상)는 0~360 색상환 값, saturation(채도)과 lightness(명도)는 %값으로 표현합니다.

속성 값	속성 설명
color: hsl(300, 100%, 50%);	글자를 hue:300도, 채도:100%, 명도:50%로 표현합니다.

RGBA값

rgba(red, green, blue, alpha) 형태로 기술하며 alpha는 0~1 사이의 투명도를 나타냅니다.

속성 값	속성 설명
color:rgba(255,0,0,0.5);	글자를 빨간색 반투명으로 표현합니다.

HSLA값

hsla(hue, saturation, lightness, alpha) 형태로 기술하며 0~1 사이의 투명도를 나타냅니다.

속성 값	속성 설명
color:hsla(300,100%,50%,0.5);	글자를 핑크색 반투명으로 표현합니다.

예제