color
color
CSS 속성은 요소의 글씨 및 글씨 장식의 전경색과 currentcolor
의 값을 설정합니다. currentcolor
는 다른 속성에서 사용할 수 있는 간접적인 값이며, border-color
등 일부 속성의 기본값입니다.
HTML에서 색을 사용하는 법은 CSS로 HTML 요소에 색입히기 문서에서 정리한 내용으로 읽을 수 있습니다.
구문
/* 키워드 값 */
color: currentcolor;
/* <named-color> 값 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> 값 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> 값 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);
/* <hsl()> 값 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* 전역 값 */
color: inherit;
color: initial;
color: unset;
color
속성은 하나의 <color>
값을 사용해 지정합니다.
값이 단일 색상이어야 함에 주의하세요. <gradient>
는 사실 <image>
자료형이기 때문에 사용할 수 없습니다.
값
<color>
- 요소의 글씨와 장식 부분의 색.
형식 구문
<color>where
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )where
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
예제
아래 예제 모두 글씨를 빨갛게 만듭니다.
p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }
/* 50% 투명 */
p { color: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }
접근성 고려사항
낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.
색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.
명세
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 The definition of 'color' in that specification. |
Working Draft | Adds commaless syntaxes for the rgb() , rgba() , hsl() , and hsla() functions. Allows alpha values in rgb() and hsl() , turning rgba() and hsla() into (deprecated) aliases for them.Adds color keyword rebeccapurple .Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. Adds hwb() , device-cmyk() , and color() functions. |
CSS Transitions The definition of 'color' in that specification. |
Working Draft | Defines color as animatable. |
CSS Color Module Level 3 The definition of 'color' in that specification. |
Recommendation | Deprecates system-colors. Adds SVG colors. Adds the rgba() , hsl() , and hsla() functions. |
CSS Level 2 (Revision 1) The definition of 'color' in that specification. |
Recommendation | Adds the orange color and the system colors. |
CSS Level 1 The definition of 'color' in that specification. |
Recommendation | Initial definition. |
초기값 | Varies from one browser to another |
---|---|
적용대상 | all elements. It also applies to ::first-letter (en-US) and ::first-line (en-US). |
상속 | yes |
Computed value | If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0) . |
Animation type | a color |
브라우저 호환성
BCD tables only load in the browser