Color picker

Use the native <input type="color"> element to let users select a color.

Opacity

The native color input does not currently have good support for alpha. If alpha is required, handle it separately with a Slider or TextField.

Use cases

Make sure the color picker is suitable for your use case. There may be other, more appropriate components available.

Use case	Color picker	Select	TextField
Choose a value from a color field	✅	❌	❌
Pick between a small number of predefined choices	❌	✅	❌
Enter a color code value	❌	❌	✅

✅ Do

• Use a clear, descriptive label to explain what the color controls.
• Display the selected color so users can confirm the result.
• Use the native color input to select a single color.
• Use a separate control to adjust the color’s alpha value.

🚫 Don’t

• Don’t use a native color input to limit selection to one of predefined color values.

API reference

• FormControlLabel
• Input
• <input type="color">