A color input lets a user select a color value through a browser control.
Make this comfortable
HTML color input: collect a preference without making color the message
When the element earns its place
A team chooses an accent for its internal dashboard. The picker records a preference, while the adjacent label and preview description explain what the color will affect. Color alone must never convey whether a case is approved or held. A live application can validate contrast against its text colors and preview the result before saving, but those behaviors require code beyond the input shown here.
<form action="/teams/appearance" method="post">
<label for="team-accent">Dashboard accent color</label>
<input id="team-accent" name="accent" type="color" value="#315a87">
<p>The accent marks section headings; case status remains written in text.</p>
<button type="submit">Save appearance</button>
</form>Behavior boundary
The server must validate the accepted color representation and reject a choice that violates product contrast rules. A color input has a value even when the user never opens its picker, so a default is a real choice.
Cost and operational limits
The browser supplies the picker without a third-party widget. Contrast analysis and live previews add client work if the product needs them; store the resulting preference only after server validation.
Common Mistakes
- Do not use color as the only status signal.
- Do not promise a contrast-safe theme merely because the picker accepted a value.
- Do not forget that the initial color can be submitted unchanged.
Connected lessons
html
forms