Framer Color Picker Field: Setup and Use Cases Guide

Overview

Most forms that need a color value from a visitor end up asking for it the hard way, a free-text field with no validation, or a dropdown of preset swatches that doesn't cover what the visitor actually wants. Forms Plugin's Color Picker field solves this with two input paths at once: a hex text input a visitor can type into directly, and a swatch button that opens the browser's own native color picker for visual selection. Either path writes back the same hex string.

This post covers what the field's settings panel actually controls, how the dual input mechanism works, what the preview swatch does, and when this field makes sense in a form.

Quick Answer

• The field is labeled "Color Picker" in the Advanced Fields picker, and the default Field Name is color-select.
• A visitor sets a color two ways: typing a hex value directly into the text input, or clicking the swatch preview to open the browser's native color picker. Both write back as a hex string.
• Hex format only. There is no RGB or HSL text entry.
• Required is a plain Yes/No toggle. There is no separate Validation sub-panel or custom Required Error message field for this field, unlike Button Option or Image Upload.
• The Color Picker preview sub-panel controls whether a swatch shows next to the input at all, plus its size, corner radius, and border.
• Available on Pro and Scale plans, not Basic.

What is the Color Picker field?

It's one of 14 Advanced Fields in Forms Plugin, alongside File Upload, Phone Number, Country, Image Upload, Range Slider, Button Option, Rating, Promoter Score (NPS), E-Signature, Voice Recording, Audio Upload, Video Upload, and URL Source Collector. Drop it into a form and it gives visitors a text input plus a swatch button for setting a hex color value, which attaches to the form submission as a hex string.

The naming is worth addressing up front, the same way it's worth addressing on other Advanced Fields. The picker tile inside the plugin is labeled "Color Picker." Drop it onto the canvas and the component reads "Color Select." The default Field Name value is color-select. Same field, two names depending on where you're looking, consistent with the naming pattern on several of Forms Plugin's Advanced Fields.

What do the core settings control?

Field Name is the unique identifier that appears in your submitted form data, defaulting to color-select. Rename it if the default clashes with another field or your integration expects a specific key.

Label Name defaults to "Color" and is the visible label above the input. Placeholder defaults to "#000000," shown in the input when it's empty.

Default Color has no value set out of the box, and shows an "Add..." swatch button in the panel. It's optional, use it if you want the field to load with a specific color already selected rather than empty.

Required is a plain Yes/No toggle, defaulting to No. This field does not have a separate Validation sub-panel the way Button Option and Image Upload do. There is no custom Required Error message field to configure here, the toggle is the whole of the required behavior for this field. If you need a custom validation message tied to a color field, that's not something the panel currently exposes.

How does the dual input mechanism work?

This is the field's distinguishing feature, and it works through two separate paths that both resolve to the same underlying value.

The first path is direct text entry. A visitor can type a hex value into the text input, and that input is live-validated against a hex pattern as they type, so only valid hex characters commit to the field. This is the faster path for a visitor who already knows the exact hex code they want to enter, someone pasting in a brand color from a style guide, for example.

The second path is the swatch preview next to the input. Clicking it opens the browser's or operating system's native color picker, which under the hood is a standard HTML color input. The visitor picks a color visually, using whatever picker interface their browser or OS provides, and the selection writes back into the field as a hex string. This is the better path for a visitor who wants to choose a color visually rather than knowing its code in advance.

Both paths produce the same output format, a hex string. There is no RGB or HSL text entry option, the field is hex-only regardless of which input path a visitor uses.

What does the Color Picker preview sub-panel control?

The Color Picker preview sub-panel, labeled "Color Picker" in the settings list, controls the swatch button itself, separate from the input styling covered below.

Show Preview is an On/Off toggle, defaulting to On. When it's On, the swatch button appears next to the text input, giving the visitor the clickable path to the native picker described above. When it's Off, the Preview Size, Preview Radius, and Preview Border controls all hide, and the field shows as a plain text input with no swatch at all, meaning a visitor can only set the color by typing a hex value directly.

Preview Size defaults to 32px and is adjustable. Preview Radius defaults to 8, with a toggle between square corners and a fully rounded shape. Preview Border defaults to "1px solid rgba(0,0,0,0.1)," a light neutral border that keeps the swatch visible against light backgrounds without a heavy visual weight.

Can you style it and add conditional logic?

Every property is editable directly on the Framer canvas. The styling system is the same one used across every Forms Plugin field, with the preview controls above being the one part specific to this field.

Label Style controls the Show/Hide toggle, the required indicator character (defaulting to *), Label Font (defaulting to Inter), and Label Color (defaulting to 888888). Layout controls direction (vertical or horizontal) and gap between label and input, defaulting to 8px. Input Style covers Height (44px), Font (Inter), Text Color (333333), Placeholder Color (999999), Background (BBBBBB, a flat color with no gradient option exposed in this panel), Padding (12 top, 15 right, 12 bottom, 12 left), Border (Solid), Radius (10), and Shadow (Mixed). Focus Style controls the focused-state Border Color (3B82F6), Shadow (Mixed), and Scale (1). Error Style sets the error-state text color to DC2626 in Inter.

Conditions work identically to every other Forms Plugin field. The five available actions are Show/Hide, Required, Read-Only, Disable, and Value Reset, combined with AND/OR logic. The Source Field input takes the name of any other field in the form, Field Type is set to Text, Number, or Date depending on what the watched field is, and Operators include Is Empty, Is Not Empty, Contains, Not Contains, Exact Match (Case Sensitive), Match (Case Insensitive), Starts With, Ends With, Length Greater Than, Length Less Than, and Regex. That's the same system documented on the conditional logic feature page and in the conditional logic guide, nothing color-specific about it. A common pattern: show a Color Picker field only after a visitor selects "custom" from a Button Option preset color selector, rather than displaying the picker up front for every visitor.

What are the real use cases for a color picker field in a form?

Product customization forms. A form where a customer chooses a color variant or preference for a custom order, paint, packaging, print materials, apparel, anything where a precise hex value matters more than a handful of preset swatches.

Brand and design intake forms. Agencies and freelance designers collecting a client's brand color as part of a project intake or onboarding form. A client who already knows their brand hex code can paste it directly, while a client who doesn't can pick visually with the native color picker.

Event and registration forms needing a color-coded selection. Registration flows where attendees are grouped, tagged, or badge-coded by a color choice, a team color for a group event, for example.

Feedback or ticketing forms tagging priority by color. Internal or client-facing intake forms that use a color value to tag priority or category, useful when the downstream system (a CRM, a project board) reads color values directly rather than a text label.

The through-line: any form where the visitor's answer is genuinely a color, not a preset option from a short list, benefits from a field that accepts a real hex value rather than approximating one with a dropdown.

What plan do you need?

Pro or Scale. The Color Picker field is not included on the free Basic plan. Current pricing is one-time and lifetime, no subscription, check that page for the current figures before making a decision. Both Pro and Scale include the field, so the choice between them comes down to how many sites you're running and whether you need the commercial license for client work, not whether you get Color Picker at all. The features page has the full Advanced Fields list alongside everything else included in each plan.

Frequently asked questions

Why does the field show "Color Select" on canvas but "Color Picker" in the picker?
The Advanced Fields picker tile uses "Color Picker" as the display name. Once it's dropped onto the canvas, the component reads "Color Select," and the default Field Name value is color-select. Both refer to the same field. Forms Plugin does this with more than one Advanced Field, so a name shift depending on where you're looking is expected.

Can visitors enter RGB or HSL values instead of hex?
No. The field is hex-only. A visitor can either type a hex value directly into the text input, which is live-validated against a hex pattern, or use the swatch button to open the browser's native color picker, which also writes back as a hex string. There is no RGB or HSL text entry path.

Does the Color Picker field support a custom required error message?
No, not currently. Required is a plain Yes/No toggle with no separate Validation sub-panel or custom message field, unlike some other Advanced Fields such as Button Option or Image Upload, which do expose a custom Required Error field. If a visitor leaves the field empty and it's set to Required, the form uses its default validation behavior rather than a message you've customized.

What happens if I turn off Show Preview?
The swatch button disappears entirely, along with the Preview Size, Preview Radius, and Preview Border controls, since there's nothing left for them to style. The field falls back to a plain text input, meaning visitors can only set a color by typing a hex value directly, without the option to open the native color picker visually.

Can I make the color picker field conditional on another field's answer?
Yes, using the same conditional logic system every other Forms Plugin field uses. The Conditions sub-panel supports Show/Hide, Required, Read-Only, Disable, and Value Reset, triggered by AND/OR rules across the standard operator set. For example: show the Color Picker field only if a visitor selects "custom color" from a dropdown or button group earlier in the form. The conditional logic page has the full rule builder details.

Bottom line

Color Picker gives visitors two ways to land on the same hex value, typing it directly or picking it visually through the browser's native color picker behind the swatch button. It's hex-only, with no RGB or HSL entry, and Required is a simple toggle without a custom error message option, a real difference from fields like Button Option that do expose one. The preview sub-panel controls whether that swatch shows at all, plus its size, radius, and border. Available on Pro and Scale, with styling and conditional logic working identically to every other field in the plugin.