HTML <input type=”color”> – 올바른 이해와 사용 방법

`<input type="color">`

<input> 태그의 type="color"는
사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드를 나타냅니다.

이 컬러 피커(color picker, 색상 선택기)에서는 투명도(알파 채널) 조정 기능이 제공되지 않습니다.

컬러 피커 형태의 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다.

관련 속성 사용하기

<input type="color">의 관련된 속성에 대해 알아보겠습니다.

input tpe="color"의 관련 속성
속성	설명
`value`	필드에서 선택된 색상의 초깃값을 지정합니다.
`disabled`	컨트롤이 비활성된 상태임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
`list`	`list` 속성의 값으로 연결하려는 `<datalist>` 태그의 `id` 속성의 값을 사용합니다.

`value` 속성

필드에서 선택된 색상의 초깃값을 지정합니다.

초깃값을 지정하면, 컬러 피커가 기본 색상으로 미리 채워지고 해당 값을 기본값으로 사용하게 됩니다.

값 형식

항상 16진수(hex) 형식의 7 자리 RGB 색상 코드(예: #ff0000)로 지정합니다. 대소문자는 구분하지 않지만 소문자 형태로만 저장됩니다.
알파 채널이 있는 색상은 지원되지 않습니다. 9 자리 16진수 표기법(예: #009900aa)으로 색상을 지정할 수 없습니다.
특히 CSS의 표준화된 색상 이름(예: red)이나 CSS 함수 구문(예: rgb(), rgba(), hsl() 등)을 사용하여 값을 설정할 수 없습니다.
HTML과 CSS는 별도의 언어 및 사양이라는 점을 염두에 두면 이는 당연한 일입니다.

입력 값이 비어있거나 유효하지 않은 형식의 경우에는 값은 #000000으로 설정됩니다.

`disabled` 속성

컨트롤이 비활성된 상태임을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

비활성화된 컬러 피커는 클릭을 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다.

`list` 속성

list 속성의 값으로 연결하려는 <datalist> 태그의 id 속성의 값을 사용합니다.

부연설명
<datalist> 태그는 웹 양식 관련 컨트롤에서 사용할 수 있는 미리 정의된 옵션 데이터 목록을 나타냅니다.

다음의 예제에서는 입력 양식 컨트롤인 <input type="color">에 사용자가 쉽게 색상 값을 선택할 수 있도록,
<datalist>가 미리 정의된 색상 목록을 제공하는 용도로 사용되었습니다.

HTML

<label for="colors">색상 선택</label>
<input type="color" list="red-colors" id="colors"> <!-- list 속성을 추가 -->
<datalist id="red-colors"> <!-- 고유한 id를 지정 -->
    <option value="#ff0000"></option>
    <option value="#0000ff"></option>
    <option value="#ffff00"></option>
</datalist>

<datalist> 태그와 연결한 웹 양식 콘트롤인 <input type="color">에 list 속성을 추가하고, 이 속성의 값으로 연결할 <datalist>의 id 값을 지정합니다.

위 예제에서 사용자가 컬러 피커를 활성화하면, 지정된 미리 정의된 색상 목록이 표시됩니다.
사용자는 목록에서 색상을 선택하거나 직접 색상 값을 입력할 수 있습니다.

기술적인 문법 요약

datalist 태그의 구문 형식
암시적인 `role` 속성 값	없음

접근성 고려사항

<input type="color">를 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

브라우저 호환성

input type 속성의 color 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<input type="range">`	20	14	29	12.1
`list`	20	12	4	12.1

명세서

input type 속성의 color 값에 대한 명세서 사양
명세서 사양
`<input type="range">`	HTML Standard #color-state-(type=color)

참고문헌

MDN - <input type="color">

<input type="color">