[{"data":1,"prerenderedAt":116},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields":3},{"id":4,"title":5,"body":6,"category":103,"description":104,"extension":105,"keywords":106,"meta":107,"navigation":108,"order":109,"path":110,"rawbody":111,"seo":112,"stem":113,"updated":114,"__hash__":115},"help\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields.md","Color input fields",{"type":7,"value":8,"toc":98},"minimark",[9,28,32,38,42,52,91],[10,11,12,13,17,18,23,24,27],"p",{},"A color input field lets the people using your design generator change a colour in the design, such as an element's fill or stroke. Add it by selecting the element and choosing ",[14,15,16],"strong",{},"Color"," in the add popup (see ",[19,20,22],"a",{"href":21},"\u002Fhelp\u002Finput-fields\u002Fadding-input-fields","Adding input fields","). To target a specific colour, like the stroke rather than the fill, use ",[14,25,26],{},"Select Custom Property"," and click that colour in the Property Panel.",[29,30,16],"h2",{"id":31},"color",[10,33,34,35,37],{},"The plain ",[14,36,16],{}," field is a full colour picker: users can set any colour they like. It has no further settings.",[29,39,41],{"id":40},"color-selection","Color Selection",[10,43,44,45,47,48,51],{},"To keep users on an approved palette, choose ",[14,46,41],{}," instead. Define your ",[14,49,50],{},"Color options",", each a colour with an optional label, then choose how they appear:",[53,54,55,74],"ul",{},[56,57,58,61,62,65,66,69,70,73],"li",{},[14,59,60],{},"Type",": show the palette as a ",[14,63,64],{},"Dropdown",", a ",[14,67,68],{},"Button Grid",", or a ",[14,71,72],{},"Carousel",".",[56,75,76,79,80,83,84,87,88,73],{},[14,77,78],{},"Size",": set the swatch size to ",[14,81,82],{},"Small",", ",[14,85,86],{},"Medium",", or ",[14,89,90],{},"Large",[10,92,93],{},[94,95],"img",{"alt":96,"src":97},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F21ef59e4-a415-451f-30fa-5dd8a61ee700\u002Fmax",{"title":96,"searchDepth":99,"depth":99,"links":100},2,[101,102],{"id":31,"depth":99,"text":16},{"id":40,"depth":99,"text":41},"input-fields","Let users choose a colour, on its own or from a preset palette.","md",[],{},true,40,"\u002Fhelp\u002Finput-fields\u002Fcolor-input-fields","---\ntitle: \"Color input fields\"\ndescription: \"Let users choose a colour, on its own or from a preset palette.\"\ncategory: input-fields\norder: 40\nkeywords: []\n---\nA color input field lets the people using your design generator change a colour in the design, such as an element's fill or stroke. Add it by selecting the element and choosing **Color** in the add popup (see [Adding input fields](\u002Fhelp\u002Finput-fields\u002Fadding-input-fields)). To target a specific colour, like the stroke rather than the fill, use **Select Custom Property** and click that colour in the Property Panel.\n\n## Color\n\nThe plain **Color** field is a full colour picker: users can set any colour they like. It has no further settings.\n\n## Color Selection\n\nTo keep users on an approved palette, choose **Color Selection** instead. Define your **Color options**, each a colour with an optional label, then choose how they appear:\n\n- **Type**: show the palette as a **Dropdown**, a **Button Grid**, or a **Carousel**.\n- **Size**: set the swatch size to **Small**, **Medium**, or **Large**.\n\n![](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F21ef59e4-a415-451f-30fa-5dd8a61ee700\u002Fmax)\n",{"title":5,"description":104},"help\u002Finput-fields\u002Fcolor-input-fields","2026-06-15","B9cjYkFyDskOPaV2uGhJaheJRl6e4r6uBsrJskGGLbg",1789292811349]