---
title: "Color picker"
date: "2023-10-05T00:47:43+00:00"
summary: "Easily select and customize colors for your website with our intuitive color picker tool. Choose from a pre-defined palette or use the advanced picker for precise color selection and management."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/color-picker"
id: "bc249254-5cb0-43ea-8cb9-d330649c5335"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-colorpicker$"},
            "title": {"type": "string"},
            "value": {
              "type": "object",
              "properties": {
                "link": {"type": "boolean"},
                "value": {
                  "type": "object",
                  "properties": {
                    "hex": {"type": "string"},
                    "rgba": {"type": "string"}
                  }
                },
                "uid": {"type": "string"},
                "name": {"type": "string"},
                "class":{
                  "type": "string",
                  "pattern": "^\\.coh-color-[-a-z0-9]+$"
                },
                "variable": {"type":"string"}
              }
            }
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "Color picker" form element on a component set up like so

![cc5d8330-Screenshot%202023-12-04%20at%2015.24.50.png](https://acquia.widen.net/content/c50ab0a7-f888-421e-9546-bcf19cdbf371/web/cc5d8330-Screenshot%202023-12-04%20at%2015.24.50.png)

And used on Node layout canvas like so

![d51450b1-Screenshot%202023-12-06%20at%2001.11.13.png](https://acquia.widen.net/content/a990a064-373f-4f88-ac01-e9a3fe97ea33/web/d51450b1-Screenshot%202023-12-06%20at%2001.11.13.png)

 Example output of color picker form field with color selected via "Palette" from pre-defined list:

    {
      "type": "form-field",
      "id": "6f77718b-d050-4950-80c5-b32a726c728d",
      "machine_name": "color-picker1",
      "data": {
        "uid": "form-colorpicker",
        "title": "Color picker",
        "value": {
          "link": true,
          "value": {
            "hex": "#4ae0aa",
            "rgba": "rgba(74, 224, 170, 1)"
          },
          "name": "Green 400",
          "uid": "green-400",
          "class": ".coh-color-green-400",
          "variable": "$coh-color-green-400",
          "inuse": true,
          "tags": [
            "suitable for background"
          ]
        }
      }
    }

Color picker form field with color selected via "Picker" :

    {
      "type": "form-field",
      "id": "b66d1cb3-5fff-4dcd-94fb-a2af72906493",
      "machine_name": "color-picker",
      "data": {
        "uid": "form-colorpicker",
        "title": "Color picker",
        "value": {
          "hex": "#4ae0aa",
          "rgba": "rgba(74, 224, 170, 1)"
        }
      }
    }