CSS 법률 색상 값

❮ 이전 다음 참조 ❯

CSS 색상

CSS의 색상은하기의 방법에 의해 지정 될 수있다 :

진수 색상
RGB 색상
RGBA 색상
HSL 색상
HSLA 색상
소정 / 브라우저 간 색 이름

진수 색상

16 진수 색상 값은 모든 주요 브라우저에서 지원됩니다.

16 진수 색상으로 지정됩니다 #RRGGBB의 RR (red) , GG (green) 와 BB (blue) 진수 정수 색상의 구성 요소를 지정합니다. 모든 값은 00 FF 사이 여야합니다.

청색 성분은 가장 높은 값으로 설정되어 있기 때문에 예를 들어, # 0000FF의 값은 청색으로 렌더링 (ff) 및 나머지는 00으로 설정된다.

예

다른 HEX 색상을 정의합니다 :

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

»그것을 자신을 시도

RGB 색상

RGB 색상 값은 모든 주요 브라우저에서 지원됩니다.

: RGB 칼라 값으로 지정되는 rgb(red, green, blue) . (적색, 녹색, 청색)의 각 파라미터는 색상의 세기를 정의하고, 0과 255 퍼센트 사이의 정수 값이 될 수있다 (from 0% to 100%) .

예를 들어, rgb(0,0,255) 청색 파라미터가 가장 높은 값으로 설정되어 있기 때문에 값이 청색으로 렌더링한다 (255) 및 나머지는 0으로 설정된다.

: 또한, 다음과 같은 값이 동일한 컬러를 정의 rgb(0,0,255) 와 rgb(0%,0%,100%) .

예

다른 RGB 색상을 정의합니다 :

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

»그것을 자신을 시도

RGBA 색상

RGBA 색상 값은 IE9 +, 파이어 폭스 3+, 크롬, 사파리, 및 오페라 10 이상에서 지원됩니다.

오브젝트의 투명도를 지정 - RGBA 색상 값은 알파 채널 RGB 색 값의 확장이다.

일 : RGBA 색상 값으로 지정되는 rgba(red, green, blue, alpha) . 알파 매개 변수는 0.0 사이의 숫자입니다 (fully transparent) 과 1.0 (fully opaque) .

예

불투명도와 다른 RGB 색상을 정의합니다 :

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

»그것을 자신을 시도

HSL 색상

HSL 색상 값은 IE9 +, 파이어 폭스, 크롬, 사파리, 및 오페라 10 이상에서 지원됩니다.

HSL은 색조, 채도 및 밝기를 의미 - 색상의 원통형 좌표 표현을 나타냅니다.

일 : HSL 색상 값이 지정됩니다 hsl(hue, saturation, lightness) .

색조 컬러 휠의 정도 (from 0 to 360) 0 - (or 360) (240)는 파란색, (120)는 녹색, 빨간색입니다. 채도 백분율 값이고; 0 % 회색의 그늘을 의미하고, 100 % 풀 컬러입니다. 밝기는 비율입니다; 0 % 100 %가 흰색, 검은 색입니다.

예

다른 HSL 색상을 정의합니다 :

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

»그것을 자신을 시도

HSLA 색상

HSLA 색상 값은 IE9 +, 파이어 폭스 3+, 크롬, 사파리, 및 오페라 10 이상에서 지원됩니다.

오브젝트의 투명도를 지정 - HSLA 색상 값은 알파 채널 HSL 색 값의 확장이다.

일 : HSLA 색상 값으로 지정 hsla(hue, saturation, lightness, alpha) 알파 파라미터 불투명도를 정의한다. 알파 매개 변수는 0.0 사이의 숫자입니다 (fully transparent) 과 1.0 (fully opaque) .

예

불투명도와 다른 HSL 색상을 정의합니다 :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

»그것을 자신을 시도