---
title: "Custom Color Input — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Andrew Kréitor · Forms. Form-ready color picker input"
canonical: "https://framer.elliotli.dev/component/custom-color-input"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Custom Color Input

# Custom Color Input

Form-ready color picker input

[View on Framer](https://framer.com/marketplace/components/custom-color-input/?via=elliot-li)

![Custom Color Input preview image 1](https://framer.elliotli.dev/og/component/custom-color-input/f6c325062df55b3d/1600x1200.jpg)

## Summary

Form-ready color picker input

## Description

**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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-76gzhzkh-WUUh3T83LAWFGHEhUs2kLCAvrGrwzZ)-   Customise the label, sizing, fonts, and state styling in the properties panel
    
-   Publish — the picked color submits automatically with the form
    

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10887

## Details

- **Author**: Andrew Kréitor
- **Price**: $12.00
- **Published**: 2026-05-26
- **Updated**: 2026-05-28
- **Added**: 2026-05-25
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from