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 = 
  <color>  

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

예제

아래 예제 모두 글씨를 빨갛게 만듭니다.

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.

초기값	`canvastext`
적용대상	all elements and text. It also applies to ::first-letter (en-US) and ::first-line (en-US).
상속	yes
Computed value	computed color
Animation type	by computed value type

브라우저 호환성

BCD tables only load in the browser

같이 보기

<color> 자료형
다른 색상 관련 속성: background-color, border-color, outline-color (en-US), text-decoration-color (en-US), text-emphasis-color (en-US), text-shadow, caret-color (en-US), column-rule-color (en-US), color-adjust (en-US)
CSS로 HTML 요소에 색입히기