CSS 법적 색상 값
CSS 색상
CSS의 색상은 다음 방법으로 지정할 수 있습니다.
- 16진수 색상
- 투명도가 있는 16진수 색상
- RGB 색상
- RGBA 색상
- HSL 색상
- HSLA 색상
- 미리 정의된/크로스 브라우저 색상 이름
currentcolor키워드 로
16진수 색상
16진수 색상은 #RRGGBB로 지정됩니다. 여기서 RR(빨간색), GG(녹색) 및 BB(파란색) 16진수 정수는 색상 구성 요소를 지정합니다. 모든 값은 00에서 FF 사이여야 합니다.
예를 들어 #0000ff 값은 파란색 구성 요소가 가장 높은 값(ff)으로 설정되고 다른 구성 요소가 00으로 설정되기 때문에 파란색으로 렌더링됩니다.
예시
다양한 HEX 색상 정의:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
투명도가 있는 16진수 색상
16진수 색상은 #RRGGBB로 지정됩니다. 투명도를 추가하려면 00과 FF 사이에 두 자리 숫자를 추가합니다.
예시
투명도를 사용하여 다양한 HEX 색상 정의:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB 색상
RGB 색상 값은 다음 구문을 가진 rgb() 함수 로 지정됩니다.
rgb(red, green, blue)
각 매개변수(빨간색, 녹색 및 파란색)는 색상의 강도를 정의하며 0에서 255 사이의 정수 또는 백분율 값(0%에서 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 색상 값은 개체의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다.
RGBA 색상은 다음 구문을 가진 rgba() 함수 로 지정됩니다.
rgba(red, green, blue, alpha)
알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.
예시
불투명도로 다양한 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은 색조, 채도 및 밝기를 나타내며 색상의 원통형 좌표 표현을 나타냅니다.
HSL 색상 값은 다음 구문을 가진 hsl() 함수 로 지정됩니다.
hsl(hue, saturation, lightness)
색조는 색상환의 정도(0에서 360까지) - 0(또는 360)은 빨간색, 120은 녹색, 240은 파란색입니다. 채도는 백분율 값입니다. 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 색상 값은 객체의 불투명도를 지정하는 알파 채널이 있는 HSL 색상 값의 확장입니다.
HSLA 색상 값은 다음 구문을 가진 hsla() 함수 로 지정됩니다.
hsla(hue, saturation, lightness, alpha)
알파 매개변수는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.
예시
불투명도로 다양한 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 */
사전 정의된/크로스 브라우저 색상 이름
140가지 색상 이름은 HTML 및 CSS 색상 사양에 미리 정의되어 있습니다.
예: blue, red, coral, brown등:
예시
다른 색상 이름 정의:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
미리 정의된 모든 이름 목록은 색상 이름 참조 에서 찾을 수 있습니다 .
현재 색상 키워드
키워드는 요소 의 currentcolor색상 속성 값을 나타냅니다.
예시
<div> 요소의 텍스트 색상이 파란색이기 때문에 다음 <div> 요소의 테두리 색상은 파란색이 됩니다.
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}