CSS 유효 색상 값
CSS 색상
CSS에서 색상을 다음과 같은 방법으로 지정할 수 있습니다：
- 16진수 색상
- 투명도가 있는 16진수 색상
- RGB 색상
- #p3 {background-color: rgb(0, 0, 255);} /* 파란색 */
- HSL 색상
- HSLA 색상
- 预定义/跨浏览器的颜色名称
- 사용
currentcolor키워드
16진수 색상
16진수 색상을 #RRGGBB로 지정합니다. RR(빨간색), GG(녹색), BB(파란색) 16진수 정수는 색상의 구성 요소(부분)를 지정합니다. 모든 값은 00에서 FF 사이여야 합니다.
예를 들어, ＃0000ff 값은 파란색으로 표시됩니다. 파란 부분이 최고 값(ff)으로 설정되었으며, 다른 부분은 00으로 설정되었습니다.
예제
다른 HEX 색상을 정의합니다：
#p1 {background-color: #ff0000;} /* 빨간색 */
#p2 {background-color: #00ff00;} /*緑색 */
#p3 {background-color: #0000ff;} /* 파란색 */
투명도가 있는 16진수 색상
16진수 색상을 #RRGGBB로 지정합니다. 투명도를 증가시키려면 00과 FF 사이에 두 개의 추가 숫자를 추가하십시오.
예제
투명도가 있는 HEX 색상을 정의합니다：
#p1a {background-color: #ff000080;} /* 투명도가 있는 빨간색 */
#p2a {background-color: #00ff0080;} /* 투명도가 있는緑색 */
#p3a {background-color: #0000ff80;} /* 투명도가 있는 파란색 */
RGB 색상
RGB 색상 값은 rgb() 함수정의하고, 문법은 다음과 같습니다：
rgb(red, green, blue)
각 매개변수(red, green, blue색의 강도를 정의합니다. 0에서 255 사이의 정수 또는 백분율 값(0%에서 100%까지)이 될 수 있습니다.
예를 들어, 값 rgb(0,0,255)는 파란색으로 표시됩니다. blue 매개변수가 최고 값(255)으로 설정되었으며, 다른 매개변수는 0으로 설정되었습니다.
此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
예제
또한, 다음 값은 같은 색상을 정의합니다: rgb(0,0,255)과 rgb(0%,0%,100%)。
다른 RGB 색상을 정의합니다：
#p1 {background-color: rgb(255, 0, 0);} /* 빨간색 */
#p2 {background-color: rgb(0, 255, 0);} /* 녹색 */
#p3 {background-color: rgb(0, 0, 255);} /* 파란색 */
RGBA 색상
RGBA 색상은 RGB 색상 값을 확장하여 Alpha 채널을 추가합니다 - 객체의 불투명도를 지정합니다。 rgba() 함수정의하고, 문법은 다음과 같습니다：
rgba(red, green, blue, alpha)
alpha 파라미터는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다.
예제
불투명도가 있는 다른 RGB 색상을 정의합니다：
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 불투명도 있는 빨간색 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 불투명도 있는 녹색 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 불투명도 있는 파란색 */
HSL 색상
HSL은 색상의 휠(hue), 부드러움(saturation), 밝기(lightness)을 의미합니다 - 색상의 원형 좌표 시스템을 대표합니다。
사용 hsl() 함수HSL 색상 값을 지정하는 함수의 문법은 다음과 같습니다：
hsl(hue, saturation, lightness)
색상은 색环상의 각도(0에서 360까지)입니다 - 0(또는 360)는 빨간색이고 120는 녹색이고 240는 파란색입니다。
부드러움은 백분율 값입니다; 0％는 회색 그림자이고 100％는 전체 색상입니다。
명확도는 백분율입니다; 0％는 검은색이고 100％는 흰색입니다。
예제
다른 HSL 색상을 정의합니다：
#p1 {background-color: hsl(120, 100%, 50%);} /* 녹색 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 양녹색 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 깊은 녹색 */
#p4 {background-color: hsl(120, 60%, 70%);} /* 부드러운 녹색 */
HSLA 색상
HSLA 색상 값은 HSL 색상 값의 확장으로, Alpha 채널을 가지고 있습니다 - 객체의 불투명도를 지정합니다.
HSLA 색상 값은 hsla() 함수지정하면, 함수의 문법은 다음과 같습니다：
hsla(hue, saturation, lightness, alpha)
alpha 파라미터는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다.
예제
불투명도가 있는 다른 HSL 색상을 정의합니다：
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 불투명도가 있는 녹색 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 불투명도가 있는 연녹색 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 불투명도가 있는 검은 녹색 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* 불투명도가 있는 부드러운 녹색 */
预定义/跨浏览器的颜色名称
HTML과 CSS 색상 규범에서는 140개의 색상 이름이 предопределены.
예를 들어：blue、red、coral、brown 와 같이：
예제
다른 색상 이름을 정의합니다：
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
모든 предопределенные имена можно найти в нашей таблице цветов.
currentcolor 키워드
currentcolor 키워드 참조 요소의 color 속성 값을 인용합니다.
예제
다음 <div> 요소의 경계선 색상은 레드가 될 것입니다. 왜냐하면 <div> 요소의 텍스트 색상이 레드이기 때문입니다：
#myDIV {
color: red; /* 레드 텍스트 색 */
border: 10px solid currentcolor; /* 레드 캔들 색 */
}
