CodesBeautify

HTML Color Input Generator

Generate an input type color with a label, a starting value and optional suggested swatches.

HTMLvalue #2563eb
<label for="brand-color">Brand colour</label>
<input type="color" id="brand-color" name="brand-color" value="#2563eb">
Runs locally in your browser

About the HTML Color Input Generator

An <input type="color"> opens the operating system colour picker and hands your form a value back. The rule people run into first is the value format: it must be a seven character lowercase hex string such as #2563eb. Three digit shorthand, a colour name, rgb() and anything with transparency are all rejected and silently replaced with black, so this generator validates what you type and tells you when it is not usable.

Attach a <datalist> of swatches and browsers that support it show your suggestions alongside the picker, which is a quiet way to steer people towards brand colours without preventing a custom choice. List the swatches as comma separated hex codes and the datalist, its id and the list attribute are wired up for you.

Two things to plan for. The control has no empty state, it always holds a colour, so required can never fail and you cannot represent no colour chosen without a separate checkbox. And the picker itself is drawn by the operating system, so it looks different on Windows, macOS, Android and iOS and cannot be restyled; only the swatch button on the page accepts CSS. The value arrives as opaque hex, so if you need an alpha channel collect it in a separate field. To turn the result into rgb or hsl, use the Color Converter.

How to use

  1. Set the label and the field name.
  2. Enter the starting colour as a six digit hex value.
  3. Optionally list swatch colours separated by commas.
  4. Copy the input and datalist into your form.

Common questions

Why does my default colour turn black?
The value has to be a six digit hex string like #2563eb. Shorthand, colour names and rgb() are rejected and fall back to #000000.
Can I pick a transparent colour?
No, the control returns opaque hex only. Collect opacity in a separate range input if you need it.
Can I restyle the picker popup?
The popup belongs to the operating system and ignores your CSS. You can only style the swatch button that opens it.
What are the swatches for?
They fill a datalist of suggested colours shown next to the picker, useful for offering brand colours while still allowing a free choice.