웹을 디자인할 때 맨 먼저 떠올리기 쉬운 것이 바로 색상을 바꾸는 것입니다. 그만큼 색상은 쉽게 자주 변하는 속성 중 하나 입니다. 그런데 웹에서 어떻게 색상을 넣을까요? 색상을 소스 코드로 입력하는 몇 가지 대표적인 방법에 대해 알아보겠습니다.
목차
HEX 색상
#000000 형태의 색상 값은 모든 브라우저에서 지원하므로 색상을 표현하는 가장
기본적인 방법입니다. 이것을 Hex 색상(Hexadecimal colors)이라고 합니다.
모든 값은 00 ~ FF 사이여야 하고 #FFFF00처럼 # 기호 다음에 6자리의 16진수로
표시합니다.
이 6자리의 색상 값은 앞에서부터 두 자리씩 묶어 #RRGGBB 형식으로 표시합니다.
여기서 RR은 빨간색(red), GG는 초록색(green), BB는 파란색(blue)의 양을
표시합니다.
예를 들어 #FFFF00은 빨간색과 초록색으로 채우고 파란색은 전혀 섞이지 않은
색입니다.
#000000처럼 두 자리 씩 중복될 경우 #000으로 3자리로 줄여서 표기할 수 있습니다. 예를 들어 #FF0000는 #F00으로, #00FF00는 #0F0으로, #0000FF는 #00F으로 줄일 수 있으며 6자리 또는 3자리 색상 값 둘 다 사용할 수 있습니다.
.eg1 {
width: 100%;
height: 20px;
background-color: #F00;
}
.eg2 {
width: 100%;
height: 20px;
background-color: #0F0;
}
.eg3 {
width: 100%;
height: 20px;
background-color: #00F;
}
RGB 색상
RGB는 앞에서부터 차례대로 빨간색과 초록색, 파란색의 양을 나타내는데 여기선 16진수가 아닌 십진수로 표현합니다. 하나도 섞이지 않았을 때는 0으로 표시하고, 가득 섞였을 때는 255로 표시하며 그 사이 값으로 각 색상의 양을 조절합니다.
예를 들어 배경색을 빨간색으로 표시하려면 다음과 같이 합니다.
.eg4 {
width: 100%;
height: 50px;
background-color: rgb(255,0,0);
border: 1px solid #fff;
}
RGBA 색상
rgba에서 맨 끝의 a 즉 α(alpha)는 불투명도 값을 나타내는 것으로 0부터 1까지의 값중에서 사용할 수 있습니다. 1은 완전 불투명한 것이고 0.7이나 0.3처럼 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해집니다.
예를 들어 반투명한 빨간색 계열 색상을 표시하려면 다음과 같이합니다.
투명도를 표기할 때는 0.5 대신 소수점 앞의 0을 생략하고 .5라고 표기해도 됩니다.
다음은 같은 오렌지 색상을 절반쯤 투명하게 만든 예시입니다.
.eg5 {
width: 100%;
height: 20px;
background-color: rgb(255,165,0);
}
.eg6 {
width: 100%;
height: 20px;
background-color: rgba(255,165,0,.5);
}
HSL 색상
HSL(색상, 채도, 밝기)를 차례대로 hue(색상), saturatuin(채도), lightness(밝기)를 나타냅니다.
색상(Hue)은 색의 3요소 중 하나로 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시합니다. 0°와 360°는 빨간색, 120°에는 초록색, 240°에는 파란색이 배치되고 그 사이사이에 나머지 색들이 배치됩니다. 채도(Saturation)는 색의 3요소 중 하나로 %로 표시합니다. 아무 것도 섞이지 않은 상태가 채도가 가장 높은 상태입니다. 채도가 0%면 회색 톤, 100%면 순색으로 표시됩니다. 밝기(Lightness)도 %로 표시하는데 0%가 가장 어둡고 100%가 가장 밝습니다.
.eg7 {
width: 100%;
height: 20px;
background-color: hsl(120,100%,25%);
}
HSLA 색상
hsla에서 맨 끝의 a 즉 α(alpha)는 불투명도 값을 나타내는 것으로 0부터 1까지의 값중에서 사용할 수 있습니다. 1은 완전 불투명한 것이고 0.7이나 0.3처럼 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해집니다.
예를 들어 반투명한 블루 계열 색상을 표시하려면 다음과 같이합니다.
다음은 같은 퍼플 색상을 절반쯤 투명하게 만든 예시입니다.
.eg8 {
width: 100%;
height: 20px;
background-color: hsl(300,100%,25%);
}
.eg9 {
width: 100%;
height: 20px;
background-color: hsla(300,100%,25%,.5);
}
색상 이름 표기법
red나 yellow, black, pink 처럼 잘 알려진 색상 이름으로 색상을 표기할 수 있습니다. 모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe color)라고 합니다.
16가지 기본 색상(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)을 포함해 모두 216가지입니다.
.eg10 {
width: 100%;
height: 20px;
background-color: hotpink;
}
transparent 색상
transparent는 완전히 투명한 색상을 나타냅니다. 검정색에 알파 값을 0으로 한 것으로 rgba(0, 0, 0, 0)과 같습니다.
.egtr {
width: 100%;
height: 20px;
background-color: transparent;
}