HTML <input type="color">: 색 선택

color 유형의 <input> 요소는 사용자가 색을 선택하거나 입력할 수 있는 컨트롤입니다.

<input type="color">에는 16진수 형식(#rrggbb)의 알파 채널 없는 간단한 색만 입력할 수 있습니다. CSS의 표준 색 이름, 함수 표기법, 알파 채널을 포함하는 16진수 색 코드 등은 지원하지 않습니다.

실제 컨트롤의 외형은 브라우저와 플랫폼에 따라서 모습이 크게 달라질 수 있습니다. 입력받은 값의 형식 검증을 내장한 것을 제외하면 평범한 텍스트 입력 칸일 수도 있고, 플랫폼의 표준 색 선택 도구를 제공할 수도 있고, 브라우저가 별도로 제공하는 색 선택 도구를 보여줄 수도 있습니다.

<p>색을 결정하세요:</p>
<div>
  <input type="color" id="head" name="head" value="#e66465">
  <label for="head">머리</label>
</div>
<div>
  <input type="color" id="body" name="body" value="#f6b73c">
  <label for="body">몸통</label>
</div>

input {
  margin: 0.4rem;
}

값

color 유형의 값은 16진수 형식의 RGB 색을 나타내는 7글자 문자열입니다. value 특성과 입력 값 모두 대문자와 소문자를 가리지 않고 받지만, 실제로 저장되는 값은 항상 소문자를 사용합니다. value 특성과 입력 값이 비어있거나 유효하지 않은 경우에는 값을 #000000으로 취급하므로, <input type="color">의 값은 항상 7글자 16진수 RGB 색 코드이고 비어있지 않은 것으로 취급할 수 있습니다.

유효성 검증

사용자 에이전트가 색 선택 칸의 값을 7글자 소문자 16진수 표기법으로 변환할 수 있어야 유효합니다.

예제

사전에 정의한 색 견본 제공하기

브라우저가 지원하는 경우, <datalist>와 <option> 요소를 <input type="color">와 함께 사용하면 사전에 정의한 색 견본(스와치)을 제공할 수 있습니다.

<datalist id="list">
  <option>#ff0000</option>
  <option>#ee0000</option>
  <option>#dd0000</option>
  <option>#cc0000</option>
  <option>#bb0000</option>
</datalist>

<input type="color" list="list" />

명세

• HTML Standard

브라우저 호환성