[css] 색상값 단위 5가지(rgba 포함)

 

 

[css] 색상값 단위 5가지(rgba 포함)

 

css 색상값(color value)을 입력할 때 다음 색상 단위를 이용할 수 있습니다.

 

1. 색상 이름(red,black, blue 등) 

2. rgb(red, green, blue)값

3. rgba(red, green, blue, alpha)값

4. hsl(hue, saturation, linhtness)값

5. hsla(hue, saturation, lightness, alpha)값

 

 

이 중, rgba, hsl, hsla는 css3 으로 다음 브라우저에서만 지원합니다.

 

 

IE9+,Chrome 4.0+, FireFox 3.0+, Safari 3.1+, Opera 10.0+,

 

 

 

 

CSS 색상 단위

1. 색상 이름(color keyword)

black, white, red, green, lime 등

 

 

2. 숫자 색상 값

 

(1) RGB 색상값

 

-rgb는 red, green, blue의 약자입니다.

 

다음 색상값은 모두 같은 색입니다.

 

 #f00
 #ff0000
rgb(255,0,0)
rgb(100%, 0%, 0%)

-16진수는 3자리나 6자리로 가능한데,

#rgb는 #rrggbb와 같음. (예: #fb0 = #ffbb00 / #fff = #ffffff )

 

-rgb로 표현할 때는 0과 255 사이의 숫자  또는 백분율 0% 100% 사이

 

rgb(0,0,255) = rgb(0%,0%,255%)

 

사용 예:

 

div {background-color: rgb(0,255,0);} / * green */

 

 

 

(2) RGBA 색상값
 
rgba(red, green, blue, alpha)

 

RGB 색상에 alpha(투명도)가 추가된 것.

alpha 값은 0.0(완전 투명) 과 1.0(완전 불투명) 사이 입니다.

 

사용 예:

 

div{border: 20px solid rgba(255, 0, 0, 0.3);}

 

 

투명도 지정은 opacity 속성을 사용하는 방법도 있습니다.

 

opacity 속성(투명도 지정)

 

rgba, opacity 차이

 

div { background-color: rgb(255,0,0); opacity: 0.3; }

 

(3) HSL 색상값

 

CSS3에서 rgb색상에 대한 보완으로 hue,saturation,lightness 색상값을 추가했습니다.

 

hue - 색조, saturation - 채도, lightness - 명도

 

 
hue 는 0~360 사이의 숫자. ( 0 또는 360은 red, 120은 green, 240은 blue)

saturation은 0%~100%  (0%는 회색 빛, 100%는 원래의 완전한 색상)
lightness은 0%~100% (0%는 검정색, 100%는 흰색)

 

 

사용 예:

 

#test {background-color: hsl(120,100%,50%);} / * green */

  

 

(4) HSLA 색상값

HSL에 ahpha(투명도)가 추가된 것 

 

#test {background-color: hsla(120,100%,25%,0.3);} / * dark green with opacity */

  

 

 

색상 코드표 바로 가기

 

색상 선택 picker

 

 

편리한 RGBA값 CSS 코드 생성기 CSS3.0 MAKER

 

CSS 3.0 MAKER란 사이트에서는  RGBA 값을 직접 선택하면,

 

CSS 코드를 자동 생성시켜줍니다. (아래 그림)
 

 

 

RGBA 생성기 http://www.css3maker.com/css-3-rgba.html

 

 

 

참조 : http://www.w3.org/TR/css3-color/#colorunits

 

[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기

 

배경 이미지를 넣는 background-image 속성

 

background 속성(배경 전체 지정)