How to create color picker in html

HtmlHow-ToBeginner · 3 min read

How to Create a Color Picker in HTML: Simple Guide

You can create a color picker in HTML using the <input type="color"> element. This element shows a color selection tool in supported browsers, allowing users to pick a color visually.

📐

Syntax

The basic syntax for a color picker in HTML is using the input element with type="color". You can also set an initial color value with the value attribute using a hex color code.

type="color": tells the browser to show a color picker.
value="#RRGGBB": sets the default selected color (hex format).
name: assigns a name to the input for form submission.

html

<input type="color" name="favcolor" value="#ff0000">

Output

A small square color box showing red (#ff0000) that opens a color picker when clicked.

💻

Example

This example shows a color picker input with a label. When you click the color box, a color selection dialog appears. The chosen color is shown next to the picker.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Picker Example</title>
</head>
<body>
  <label for="colorPicker">Choose a color: </label>
  <input type="color" id="colorPicker" name="colorPicker" value="#00ff00">
  <span id="colorValue">#00ff00</span>

  <script>
    const colorInput = document.getElementById('colorPicker');
    const colorValue = document.getElementById('colorValue');

    colorInput.addEventListener('input', () => {
      colorValue.textContent = colorInput.value;
    });
  </script>
</body>
</html>

Output

A label 'Choose a color:' followed by a green color box. When clicked, it opens a color picker. The hex code of the selected color updates next to it.

⚠️

Common Pitfalls

Some common mistakes when using the color picker include:

Not setting a valid hex color in the value attribute, which may cause the picker to default to black.
Using unsupported browsers that do not show the color picker UI (older browsers).
Expecting the color picker to work without JavaScript for showing the selected color value.

Always test your color picker in modern browsers like Chrome, Firefox, Edge, or Safari.

html

<!-- Wrong: invalid value format -->
<input type="color" value="red">

<!-- Correct: valid hex color -->
<input type="color" value="#ff0000">

Output

The first input may show black or default color picker; the second input shows red color picker.

📊

Quick Reference

Attribute	Description	Example
type	Defines input type as color picker
value	Sets default color in hex format
name	Name for form data submission
id	Unique identifier for label association

✅

Key Takeaways

Use to create a native color picker in HTML.

Set the default color with the value attribute using a hex code like #ff0000.

Test your color picker in modern browsers for best support.

Use JavaScript to show or use the selected color value dynamically.

Avoid invalid color formats in the value attribute to prevent fallback colors.