path: root/files/ko/web/html/applying_color/index.html

---
title: CSS로 HTML 요소에 색 입히기
slug: Web/HTML/Applying_color
tags:
  - Beginner
  - CSS
  - CSS Colors
  - Guide
  - HTML
  - HTML Colors
  - color
  - 색
translation_of: Web/HTML/Applying_color
---
<div>{{HTMLRef}}</div>

<p>색은 인간의 감정을 표현하는 기본적인 형태입니다. 아이들은 뭔가 그릴 수 있는 민첩성을 갖추기도 전에 색을 가지고 놉니다. 사람들이 웹 사이트를 개발할 때 보통 색을 제일 먼저 입혀보고 싶어 하는 건 이런 이유일지도 모릅니다. <span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>와 함께라면 무궁무진한 방법으로 여러분의 <a href="/ko/docs/Web/HTML">HTML</a> <a href="/ko/docs/Web/HTML/Element">요소</a>에 색을 넣어 원하는 모습을 만들 수 있습니다. 이 글은 CSS 색을 HTML에 적용하는 기초를 소개합니다.</span></p>

<p>다행히도 HTML에 색을 추가하는 건 정말 쉽고 거의 모든 곳에 할 수 있는 일입니다.</p>

<p>{{anch("색을 입힐 수 있는 것", "색을 입힐 수 있는 목록, 그때 사용할 CSS 속성")}}, {{anch("색을 나타내는 법", "색을 나타내는 법")}}, {{anch("색 사용하기", "실제로 색 사용하기")}} 등 색을 쓸 때 알아야 할 주제는 대부분 짚고 가겠습니다. {{anch("사용자의 색 선택", "사용자가 색을 선택")}}할 수 있는 방법도 확인해보겠습니다.</p>

<p>마지막으로는 적절한 색을 고르고, 서로 다른 시각적 조건을 가진 사람들을 고려하는 등 {{anch("현명하게 색 고르기", "현명한 색 선택")}}에 대해 간단히 알아보겠습니다.</p>

<h2 id="색을_입힐_수_있는_것">색을 입힐 수 있는 것</h2>

<p>요소 차원에서 보자면 HTML의 모든 것에 색을 입힐 수 있습니다. 대신에 글씨와 테두리처럼, 요소 안에 그려지는 것의 종류에 따라 알아보겠습니다. 각각의 종류에 적용할 수 있는 CSS 속성의 목록도 보겠습니다.</p>

<p>가장 기초적인 단계로는 {{cssxref("color")}} 속성이 HTML 요소의 콘텐츠 전경색을 지정하고, {{cssxref("background-color")}} 속성이 요소의 배경색을 지정합니다. 두 속성은 거의 모든 요소에 사용할 수 있습니다.</p>

<h3 id="글씨">글씨</h3>

<p>요소를 렌더링할 때 글씨, 글씨 배경과 기타 꾸미기 효과의 색은 아래에 나열한 속성이 결정합니다.</p>

<dl>
 <dt>{{cssxref("color")}}</dt>
 <dd>글씨와 글씨 장식(밑줄, 윗줄, 취소선 등)을 그릴 때 사용할 색입니다.</dd>
 <dt>{{cssxref("background-color")}}</dt>
 <dd>글씨의 배경색입니다.</dd>
 <dt>{{cssxref("text-shadow")}}</dt>
 <dd>글씨의 그림자 효과를 설정합니다. 여러 옵션 중에서 그림자 색을 정할 수 있습니다. (이후 다른 옵션에 따라 흐려지고 배경과 섞입니다)<span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</span></dd>
 <dt>{{cssxref("text-decoration-color")}}</dt>
 <dd>기본 설정에서 글씨 장식(밑줄, 윗줄, 취소선 등)은 <code>color</code> 속성의 값을 색으로 사용합니다. 그러나 <code>text-decoration-color</code> 속성을 지정하면 다른 색으로 바꿀 수 있습니다.</dd>
 <dt>{{cssxref("text-emphasis-color")}}</dt>
 <dd>글씨 위에 표시할 강조 표시의 색입니다.</dd>
 <dt>{{cssxref("caret-color")}}</dt>
 <dd>요소의 {{Glossary("caret", "캐럿")}}(글씨 입력 커서) 색입니다. {{HTMLElement("input")}}이나 {{HTMLElement("textarea")}}, HTML {{htmlattrxref("contenteditable")}} 속성을 설정한 요소처럼 편집 가능한 경우에만 유용합니다.</dd>
</dl>

<h3 id="박스">박스</h3>

<p>모든 요소는 모종의 콘텐츠를 가진 박스로, 콘텐츠 외에도 배경과 테두리를 가질 수 있습니다.</p>

<dl>
 <dt>{{anch("테두리")}}</dt>
 <dd>{{anch("테두리")}} 항목에서 박스 테두리에 사용할 수 있는 CSS 속성의 목록을 확인하세요.</dd>
 <dt>{{cssxref("background-color")}}</dt>
 <dd>전경 콘텐츠가 없는 곳에 표시할 배경색입니다.</dd>
 <dt>{{cssxref("column-rule-color")}}</dt>
 <dd>긴 글씨를 여러 단으로 나눌 때 그릴 구분선의 색입니다.</dd>
 <dt>{{cssxref("outline-color")}}</dt>
 <dd>요소의 바깥에 외곽선을 그릴 때 사용할 색입니다. 외곽선은 문서에서 공간을 차지하지 않아서 다른 요소를 가릴 수 있다는 점에서 테두리와 다릅니다. 보통 현재 선택돼 입력 이벤트를 받을 수 있는 요소를 강조할 때 사용합니다.</dd>
</dl>

<h3 id="테두리">테두리</h3>

<p>모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다. <span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Styling borders using CSS</a> to learn more about applying styles to borders.</span></p>

<p>{{cssxref("border")}} 단축 속성을 사용하면 색은 물론 <a href="/ko/docs/Web/CSS/border-width">너비</a>와 <a href="/ko/docs/Web/CSS/border-style">스타일</a>(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.</p>

<dl>
 <dt>{{cssxref("border-color")}}</dt>
 <dd>모든 면의 테두리가 사용할 단색입니다.</dd>
 <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt>
 <dd>테두리 색을 방향에 따라 다르게 설정할 수 있습니다.</dd>
 <dt>{{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}</dt>
 <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd>
 <dt>{{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}</dt>
 <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd>
</dl>

<h3 id="다른_방법">다른 방법</h3>

<p>웹 기술에서 CSS만 색을 지원하는건 아닙니다. 웹에서 사용할 수 있는 다른 그래픽 기술에서도 색을 지원합니다.</p>

<dl>
 <dt>HTML <a href="/ko/docs/Web/API/Canvas_API">Canvas API</a></dt>
 <dd>{{HTMLElement("canvas")}} 요소로 2D 비트맵 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/Canvas_API/Tutorial">캔버스 자습서</a>를 방문해 더 알아보세요.</dd>
 <dt><a href="/ko/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt>
 <dd>선, 패턴, 특정 모양의 형태를 그리는 명령어를 사용해 이미지를 그릴 수 있습니다. SVG 명령어는 XML 형식을 따르며, 웹 페이지에 바로 삽입할 수도 있고, 다른 이미지처럼 {{HTMLElement("img")}} 요소에 넣을 수도 있습니다.</dd>
 <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt>
 <dd>Web Graphics Library는 OpenGL ES 기반의 API로, 웹에서 고성능 2D 및 3D 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL 자습서</a>를 방문해 더 알아보세요.</dd>
</dl>

<h2 id="색을_나타내는_법">색을 나타내는 법</h2>

<p>CSS에서 색을 나타내려면 우선 "색"이라는 개념을, 원색이나 밝기 등 구성 요소를 분리해 수치로 표기하는 등 컴퓨터가 이해할 수 있는 디지털 형태로 변환해야 합니다. 변환 방법이 여러 가지이듯 CSS가 색을 표현하는 방법도 여러 가지입니다.</p>

<p>각각의 형태에 대한 더 자세한 내용은 CSS {{cssxref("&lt;color&gt;")}} 단위 문서를 참고하세요.</p>

<h3 id="키워드">키워드</h3>

<p>CSS 표준은 다수의 색 키워드를 사전에 정의하고 있으므로, 원하는 색을 가리키는 키워드가 있다면 숫자형 표현 대신 사용할 수 있습니다. 색 키워드는 원색과 2차색(<code>red</code>, <code>blue</code>, <code>orange</code> 등), 단계별 무채색(<code>black</code>에서 <code>white</code>까지, <code>darkgray</code>와 <code>lightgrey</code> 등) 외에도 <code>lightseagreen</code>, <code>cornflowerblue</code>, <code>rebeccapurple</code>처럼 다양한 종류의 혼합색을 포함하고 있습니다.</p>

<p>사용할 수 있는 모든 색 키워드의 목록은 <a href="/ko/docs/Web/CSS/color_value#%EC%83%89%EC%83%81_%ED%82%A4%EC%9B%8C%EB%93%9C"><code>&lt;color&gt;</code>의 색상 키워드 항목</a>을 참고하세요.</p>

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

<p>RGB 색은 세 가지 방법으로 표현할 수 있습니다.</p>

<h4 id="16진수_문자열_표기법">16진수 문자열 표기법</h4>

<p>16진수 문자열 표기법은 색의 구성요소(빨강, 초록, 파랑)를 16진수 숫자로 표현합니다. 네 번째 구성 요소로 알파 채널(불투명도)을 포함할 수도 있습니다. 하나의 구성 요소는 0에서 255 사이(0x00에서 0xFF)를 숫자 두 개로, 또는 0에서 15 사이(0x0에서 0xF)를 숫자 한 개로 표기합니다. 단, 모든 구성 요소는 같은 수의 문자로 표기해야 합니다. 한 자릿수(0~F)로 표기한다면, 구성 요소의 최종 값은 자신의 문자를 두 번씩 사용해 계산합니다. 즉, <code>"#D"</code>의 값은 <code>"#DD"</code>입니다.</p>

<p>16진수 문자열 표기법은 항상 <code>"#"</code>으로 시작해야 하고, 16진수 숫자는 그 후에 위치합니다. 문자열은 대소문자를 구분하지 않습니다.</p>

<dl>
 <dt><code>"#rrggbb"</code></dt>
 <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd>
 <dt><code>"#rrggbbaa"</code></dt>
 <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd>
 <dt><code>"#rgb"</code></dt>
 <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd>
 <dt><code>"#rgba"</code></dt>
 <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd>
</dl>

<p>예를 하나 들자면 불투명한 파랑은 <code>"#0000ff"</code>이나 <code>"#00f"</code>로 표현할 수 있습니다. 25%만 불투명한 파랑으로 만들 땐 <code>"#0000ff44"</code> 또는 <code>"#00f4"</code>로 표기합니다.</p>

<h4 id="RGB_함수형_표기법">RGB 함수형 표기법</h4>

<p>16진수 문자열 표기법과 같이, RGB(Red/Green/Blue) 함수 표기법은 빨강, 초록, 파랑, 그리고 불투명도를 나타낼 선택적 알파 채널 구성요소를 사용해 색을 나타냅니다. 그러나 문자열 표기법과 달리 CSS 함수 {{cssxref("color_value", "rgb()", "#rgb()")}}를 사용합니다. <code>rgb()</code> 함수의 세 매개변수는 순서대로 빨강, 파랑, 초록 값이며, 생략 가능한 마지막 네 번째 매개변수가 알파 채널을 나타냅니다.</p>

<p>각 매개변수의 유효한 값은 다음과 같습니다.</p>

<dl>
 <dt><code>red</code>, <code>green</code>, <code>blue</code></dt>
 <dd>각각 0 이상, 255 이하인 {{cssxref("&lt;integer&gt;")}}이거나, 또는 0% 이상 100% 이하인 {{cssxref("&lt;percentage&gt;")}}여야 합니다.</dd>
 <dt><code>alpha</code></dt>
 <dd>0.0(완전히 투명) 이상, 1.0(완전히 불투명) 이하의 숫자여야 합니다. 백분율도 사용할 수 있으며, 0%는 0.0, 100%는 1.0에 대응합니다.</dd>
</dl>

<p>예를 들어, 50% 불투명도의 밝은 빨강은 <code>rgb(255, 0, 0, 0.5)</code>와 <code>rgb(100%, 0, 0, 50%)</code> 두 방법으로 만들 수 있습니다.</p>

<h3 id="HSL_함수형_표기법">HSL 함수형 표기법</h3>

<p>많은 경우, 디자이너와 아티스트는 HSL(색조/채도/명도) 모델을 사용한 색을 선호합니다. 웹에서 HSL 색상은 HSL 함수 표기법을 사용해 나타냅니다. CSS <code>hsl()</code> 함수의 사용법 자체는 <code>rgb()</code> 함수와 매우 유사합니다.</p>

<div style="padding-bottom: 20px;">
<figure style="width: 500px;"><img alt="HSL color cylinder" src="1200px-hsl_color_solid_cylinder_alpha_lowgamma.png">
<figcaption><strong>그림 1. HSL 색 원기둥.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). <a href="https://www.wikipedia.org/">Wikipedia</a>의 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> 라이선스 아래에서 재배포.</figcaption>
</figure>
</div>

<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("&lt;angle&gt;")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p>

<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p>

<p>Think of it like creating the perfect paint color:</p>

<ol>
 <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li>
 <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li>
 <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li>
</ol>

<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p>

<p>Here are some sample colors in HSL notation:</p>

<div id="hsl-swatches">
<div class="hidden">
<pre class="brush: css">table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding:4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}</pre>

<pre class="brush: html">&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th scope="col"&gt;Color in HSL notation&lt;/th&gt;
   &lt;th scope="col"&gt;Example&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre>
</div>

<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
</div>

<div class="note">
<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p>
</div>

<h2 id="색_사용하기">색 사용하기</h2>

<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p>

<h3 id="스타일_시트에_색_지정하기">스타일 시트에 색 지정하기</h3>

<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p>

<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p>

<div>{{EmbedLiveSample("스타일_시트에_색_지정하기", 650, 150)}}</div>

<h4 id="HTML">HTML</h4>

<p>The HTML responsible for creating the above example is shown here:</p>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="box boxLeft"&gt;
    &lt;p&gt;
      This is the first box.
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="box boxRight"&gt;
    &lt;p&gt;
      This is the second box.
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code>&lt;div&gt;</code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p>

<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p>

<h4 id="CSS">CSS</h4>

<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p>

<pre class="brush: css">.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}</pre>

<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p>

<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p>

<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p>

<pre class="brush: css">.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}</pre>

<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p>

<pre class="brush: css">.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}</pre>

<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p>

<ul>
 <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li>
 <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li>
 <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li>
</ul>

<pre class="brush: css">.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}</pre>

<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p>

<ul>
 <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li>
 <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li>
 <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li>
 <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li>
 <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li>
</ul>

<h2 id="사용자의_색_선택">사용자의 색 선택</h2>

<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p>

<p>The <code>&lt;input&gt;</code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p>

<h3 id="예제_색_선택하기">예제: 색 선택하기</h3>

<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p>

<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>

<div class="note">
<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
</div>

<h4 id="HTML_2">HTML</h4>

<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p>

<pre class="brush: html">&lt;div id="box"&gt;
  &lt;label for="colorPicker"&gt;Border color:&lt;/label&gt;
  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
  &lt;p id="output"&gt;&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p>

<pre class="brush: css">#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color">&lt;input type="color"&gt;</a></code> element.</p>

<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);</pre>

<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>

<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code>&lt;p&gt;</code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p>

<h2 id="현명하게_색_고르기">현명하게 색 고르기</h2>

<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p>

<h3 id="적절한_색_찾기">적절한 색 찾기</h3>

<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p>

<h4 id="기본색">기본색</h4>

<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p>

<ul>
 <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li>
 <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li>
 <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li>
</ul>

<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="https://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="https://www.colorzilla.com/chrome">Chrome</a> / <a href="https://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>

<div class="note">
<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
</div>

<h4 id="팔레트_다듬기">팔레트 다듬기</h4>

<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p>

<p>A few examples (all free to use as of the time this list was last revised):</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li>
 <li><a href="http://paletton.com">Paletton</a></li>
 <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li>
</ul>

<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>

<div class="note">
<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
</div>

<h3 id="색채이론_관련_자료">색채이론 관련 자료</h3>

<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p>

<dl>
 <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt>
 <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd>
 <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt>
 <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd>
</dl>

<h3 id="색과_접근성">색과 접근성</h3>

<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p>

<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>

<div class="note">
<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
</div>

<p>For more information about color blindness, see the following articles:</p>

<ul>
 <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li>
 <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
 <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li>
</ul>

<h3 id="팔레트_디자인_예제">팔레트 디자인 예제</h3>

<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p>

<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p>

<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p>

<p><img alt="Right after loading Paletton." src="paletton1.png"></p>

<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p>

<p><img alt="After entering base color" src="paletton2.png"></p>

<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p>

<p><img alt="Now with complementary colors included." src="paletton3.png"></p>

<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p>

<p><img alt="Triad color scheme selected" src="paletton4.png"></p>

<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p>

<p><img alt="Triad color scheme selected" src="paletton-color-detail.png"></p>

<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p>

<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p>

<h3 id="색_배경_대비_출력">색, 배경, 대비, 출력</h3>

<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p>

<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p>

<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p>

<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p>

<div class="note">
<p><strong>참고:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p>
</div>

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

<ul>
 <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
 <li><a href="/ko/docs/Web/Guide/Graphics">웹 그래픽</a></li>
</ul>