Forms

Color Picker

semantic HTML

색상 값과 미리보기 선택을 제공합니다.

stablefreeSince 0.4

Live example

Brand color

#167d5b

<label id="brand-color-label">Brand color</label><div data-standard-component="color-picker" value="#167d5b" aria-labelledby="brand-color-label"></div><output data-example-output>#167d5b</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

색상 미리보기와 텍스트 값에 각각 이름을 제공하고 required, reset, disabled 상태를 폼에 반영합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->