---
title: "Color Picker App Installation Guide"
description: "The Marketplace Color Picker app lets you choose the color of your choice from the color picker tool in Contentstack entries."
url: "https://www.contentstack.com/docs/marketplace/color-picker"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-06-23"
---

# Color Picker App Installation Guide

To further enhance the business user experience, Contentstack provides prebuilt custom field apps that let you extend the functionality of your custom fields to serve your unique business needs while providing a native Contentstack look and feel.

With the Contentstack Color Picker app and Custom Fields, you can now select a color as an input. With the Color Picker custom field, you can select and adjust color values.

For example:

*   You can use the app for changing the color of the custom built web pages dynamically.
*   In an eCommerce website, a set of colors can be used as a filter for products which can be stored in Contentstack CMS.

## Prerequisites

*   [Contentstack account](https://www.contentstack.com/login/)
*   Access to the Contentstack Organization/Stack as the Owner/Admin

Let's follow this step-by-step guide to install and configure Color Picker within your stack.

## Steps for Execution

1.  [Install and Configure Color Picker in Contentstack Marketplace](#install-and-configure-color-picker-in-contentstack-marketplace)
2.  [Use Color Picker within your Stack](#use-color-picker-within-your-stack)

1.  ## Install and Configure Color Picker in Contentstack Marketplace
    
    Follow the steps to install the application in Contentstack.
    
    1.  Log in to your [Contentstack account](https://www.contentstack.com/login/).
    2.  Navigate to the “App Switcher” icon in the top-right corner and click **Marketplace**.![Contentstack-App-Switcher-Marketplace](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt47c618781b542b64/68ee96ad6bfd93c9913fee8a/Contentstack-App-Switcher-Marketplace.png)
    3.  Click **Apps** from the left panel.
    4.  Within the Marketplace, you can see all the available apps. Hover over the **Color Picker** app and click **Install App**.![Color-picker-app-marketplace.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9d2eec5ae196902d/69eeabbb51dedac2c2916e67/Color-picker-app-marketplace.png)  
        
    5.  In the popup window, select the stack where you want to install the Color Picker app and click the **Install** button.  
        ![Color-Picker-Install-App](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2ff7c5f560df38dc/64b9189927713f0e046a1352/Color-Picker-Install-App.png)  
        
    6.  On the **UI Locations** tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.![Color-Picker-UI-Locations](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb61c0382da3928a9/65b7b10493cdf13aaf7ca9bc/Color-Picker-UI-Locations.png)
      
    8.  **Note**: No additional configuration is required to use the Color Picker app.
        
2.  ## Use Color Picker within your Stack
    
    To use the Color Picker application within an entry of your stack, follow the steps given below:
    
    1.  Go to your stack, click the **Content Models** icon in the left navigation panel, and click the **\+ New Content Type** button.
    2.  Create a content type by adding relevant details as displayed below:  
        ![Color-Picker-Content-Type.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt349a1d89a30bd5e8/64257a90524c8410f07bdd30/Color-Picker-Content-Type.png)  
        
    3.  In the Content Type Builder page, add a Custom field in your content type by clicking the **Insert a field** link represented by a **+** sign.
    4.  Under **Select Extension/App**, select **Color Picker**, and click the **Proceed** button.  
        ![Color-Picker-Custom-Field-Select-App.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt70aca831c8eff8e7/64257a90cc01de1087082dc7/Color-Picker-Custom-Field-Select-App.png)  
        Color Picker is added in the custom field.![Color-Picker-Custom-Field.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt94876fcb3fa28df4/64257a90e4a307119b1d0878/Color-Picker-Custom-Field.png)  
        
    5.  After adding the app in a custom field, click **Save** or **Save and Close** to save your changes.
    6.  To use the Color Picker app, create an entry for this content type. In the left navigation panel, navigate to the **Entries** page, click **\+ New Entry** to create a new entry for the above content type, and then click **Proceed**.  
        You will see the Color Picker custom field on your entry page as shown below:![Color-Picker-Sample-Entry.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4b5240781dd594c4/64257a90e22a5011175ccd8c/Color-Picker-Sample-Entry.png)  
        
    7.  You can pick a color by dragging the cursor or providing the color codes.  
        ![Color-Picker-Details.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt13b9e8e0d44d5672/64257a90e22a5011175ccd90/Color-Picker-Details.png)  
        
    8.  After setting the slider, **Save** and **Publish** your entry.