---
title: color
slug: Web/CSS/color
tags:
  - CSS
  - CSS Colors
  - CSS Property
  - CSS Text
  - Layout
  - Reference
  - Web
  - 색
translation_of: Web/CSS/color
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>color</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 요소의 글씨 및 <a href="/ko/docs/Web/CSS/text-decoration">글씨 장식</a>의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다.</span> <code>currentcolor</code>는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다.</p>

<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>



<p>HTML에서 색을 사용하는 법은 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a> 문서에서 정리한 내용으로 읽을 수 있습니다.</p>

<h2 id="구문">구문</h2>

<pre class="brush: css no-line-numbers">/* 키워드 값 */
color: currentcolor;

/* &lt;named-color&gt; 값 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* &lt;hex-color&gt; 값 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* &lt;rgb()&gt; 값 */
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%);

/* &lt;hsl()&gt; 값 */
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;
</pre>

<p><code>color</code> 속성은 하나의 {{cssxref("&lt;color&gt;")}} 값을 사용해 지정합니다.</p>

<p>값이 단일 색상이어야 함에 주의하세요. {{cssxref("&lt;gradient&gt;")}}는 사실 {{cssxref("&lt;image&gt;")}} 자료형이기 때문에 사용할 수 없습니다.</p>

<h3 id="값">값</h3>

<dl>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>요소의 글씨와 장식 부분의 색.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

{{csssyntax}}

<h2 id="예제">예제</h2>

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

<pre class="brush: css">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); }
</pre>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>

<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>

<ul>
 <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
   <td>{{Spec2('CSS4 Colors')}}</td>
   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
    Adds color keyword <code>rebeccapurple</code>.<br>
    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>color</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
   <td>{{Spec2('CSS3 Colors')}}</td>
   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adds the <code>orange</code> color and the system colors.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<div>{{cssinfo}}</div>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.color")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{cssxref("&lt;color&gt;")}} 자료형</li>
 <li>다른 색상 관련 속성: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li>
 <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li>
</ul>