[{"data":1,"prerenderedAt":115},["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,"seo":111,"stem":112,"updated":113,"__hash__":114},"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",{"title":5,"description":104},"help\u002Finput-fields\u002Fcolor-input-fields","2026-06-15","sDZ147V7uiM26A4X1TuXqfF84Ejl4tCXlwrhzA48DZI",1787923688294]