Custom Color Input

Form-ready color picker input

What it is

A color picker built to work inside native Framer forms. It renders as a clean input field with a live color swatch. Clicking the field opens a full HSV color picker, and whatever the user selects is stored as a hex value and submitted with the form under the field name you choose.

Key features

• Native form integration — the selected hex is the field's submitted value, no setup required

• Full HSV picker — a saturation/value palette, a hue slider, and a hex input field for typing exact colors

• Live preview — the input swatch and picker preview update in real time as the user drags

• Three interaction states — independently styled Default, Hover, and Focus states

• Grouped controls — every property is organized into clear, collapsible sections (Content, Layout, Label Style, Input Style, and the three states)

• Flexible sizing — fixed-width or fill-width, adjustable height, corner radius, and label gap

• Typography control — set font family, size, weight, and color for both the label and the input

How to use

1. Place the component inside a Framer form and set the Form Name to match your form field

Support

Have a question or run into an issue? Reach out and I'll be happy to help. Refund details are available on the checkout page.