[{"data":1,"prerenderedAt":547},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients":3},{"id":4,"title":5,"body":6,"category":522,"description":523,"extension":524,"keywords":525,"meta":537,"navigation":538,"order":539,"path":540,"published":541,"rawbody":542,"seo":543,"stem":544,"updated":545,"__hash__":546},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients.md","Set colors and gradients",{"type":7,"value":8,"toc":514},"minimark",[9,22,25,44,49,175,179,189,270,274,420,424,427,441,444,451,466,487],[10,11,12,13,17,18,21],"p",{},"In the ",[14,15,16],"place",{},"properties panel"," of the ",[14,19,20],{},"template editor",", you give an element a color or a gradient: its fill, its outline or the background of a text. All color properties work the same way: each time, you choose between a solid color and a gradient.",[10,23,24],{},"Here's how:",[26,27,28,35,38,41],"ol",{},[29,30,31,32,34],"li",{},"Turn the color on in the ",[14,33,16],{},".",[29,36,37],{},"Choose a solid color.",[29,39,40],{},"Or create a gradient instead.",[29,42,43],{},"For a gradient, adjust its blends.",[45,46,48],"h2",{"id":47},"turn-the-color-on","Turn the color on",[26,50,51,69],{},[29,52,53,57,58,61,62,65,66,68],{},[54,55,56],"click",{},"Click"," the element on the ",[14,59,60],{},"canvas"," or in the ",[14,63,64],{},"layers panel",". The ",[14,67,16],{}," on the left shows its properties.",[29,70,71,73,74,147,150,151,167,169],{},[54,72,56],{}," the checkbox in front of the color you want to set.",[75,76,77,104,123],"ul",{},[29,78,79,82,83],{},[80,81],"right",{}," For a shape, a text, a group or a mask:\n",[75,84,85,96],{},[29,86,87,91,92,95],{},[88,89,90],"strong",{},"Fill Color"," in the ",[88,93,94],{},"Appearance"," section: the fill.",[29,97,98,91,101,103],{},[88,99,100],{},"Stroke Color",[88,102,94],{}," section: the outline.",[29,105,106,108,109],{},[80,107],{}," For the background of a text:\n",[75,110,111],{},[29,112,113,116,117,91,120,122],{},[88,114,115],{},"Background Color"," and ",[88,118,119],{},"Background Stroke Color",[88,121,94],{}," section.",[29,124,125,127,128],{},[80,126],{}," For an image:\n",[75,129,130,136],{},[29,131,132,91,134,103],{},[88,133,100],{},[88,135,94],{},[29,137,138,91,141,144,145,34],{},[88,139,140],{},"Color Masking",[88,142,143],{},"Filters & Effects"," section: colors the image. Images have no ",[88,146,90],{},[148,149],"br",{},"The color fields appear below the checkbox. A new outline is black.",[152,153,155],"trouble",{"symptom":154},"You can't find Fill Color?",[10,156,157,158,160,161,163,164,166],{},"For groups and masks, the ",[88,159,94],{}," section starts collapsed, and ",[88,162,143],{}," does for every element. ",[54,165,56],{}," the section title to expand it.",[148,168],{},[170,171],"img",{"alt":172,"src":173,"width":174},"Appearance section of a rectangle: Fill Color ticked with Color Type and Color below, Stroke Color not ticked; both checkboxes are highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-03\u002Fpublic",894,[45,176,178],{"id":177},"choose-a-solid-color","Choose a solid color",[10,180,181,182,185,186,34],{},"A color you just turned on is a solid color. ",[88,183,184],{},"Color Type"," shows ",[88,187,188],{},"Solid",[26,190,191,260],{},[29,192,193,194,242,244,245,254,256],{},"Choose the color:",[75,195,196,212,226],{},[29,197,198,200,201],{},[80,199],{}," In the color picker:\n",[75,202,203],{},[29,204,205,207,208,211],{},[54,206,56],{}," the swatch next to ",[88,209,210],{},"Color"," and then your color in the color picker. With the transparency slider, you make it fully or partly see-through.",[29,213,214,216,217],{},[80,215],{}," With a color value:\n",[75,218,219],{},[29,220,221,225],{},[222,223,224],"type",{},"Type"," the color value into the field next to the swatch, for example #1E90FF.",[29,227,228,230,231],{},[80,229],{}," From your screen:\n",[75,232,233],{},[29,234,235,237,238,241],{},[54,236,56],{}," the eyedropper (",[88,239,240],{},"Pick color",") on the right of the field, then the spot with the color.",[148,243],{},"The color is now set.",[152,246,248],{"symptom":247},"Nothing happens with the eyedropper?",[10,249,250,251,253],{},"Not every browser supports the eyedropper; Chrome and Edge do, for example. ",[222,252,224],{}," the color value into the field instead.",[148,255],{},[170,257],{"alt":258,"src":259,"width":174},"Color row with Color Type Solid: swatch, color value and the eyedropper on the right, highlighted as one area.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-04\u002Fpublic",[29,261,262,266,267,269],{},[263,264,265],"look",{},"Look"," at the ",[14,268,60],{}," and check that the color fits.",[45,271,273],{"id":272},"create-a-gradient","Create a gradient",[26,275,276,289,318,373,382,393,403,413],{},[29,277,278,281,282,285,286,288],{},[54,279,280],{},"Choose"," ",[88,283,284],{},"Gradient"," under ",[88,287,184],{},". A linear gradient from red to blue with two colors appears.",[29,290,291,293,294,297,298],{},[54,292,280],{}," the shape of the gradient under ",[88,295,296],{},"Gradient Type",":",[75,299,300,306,312],{},[29,301,302,305],{},[88,303,304],{},"Linear",": the colors run along a straight line.",[29,307,308,311],{},[88,309,310],{},"Radial",": the colors spread out from a center point.",[29,313,314,317],{},[88,315,316],{},"Conic",": the colors sweep around a center point.",[29,319,320,322,323,366,368],{},[222,321,224],{}," the direction and the center. Each shape has its own fields for this:",[75,324,325,343],{},[29,326,327,329,330,116,332,334,335],{},[80,328],{}," For ",[88,331,304],{},[88,333,316],{},":\n",[75,336,337],{},[29,338,339,342],{},[88,340,341],{},"Angle",": the direction of the gradient, from 0 to 360°.",[29,344,345,329,347,116,349,334,351],{},[80,346],{},[88,348,310],{},[88,350,316],{},[75,352,353],{},[29,354,355,358,359,116,362,365],{},[88,356,357],{},"Position",": the center point, with ",[88,360,361],{},"X",[88,363,364],{},"Y",". 0 is the middle of the element, -100 and 100 are its edges.",[148,367],{},[170,369],{"alt":370,"src":371,"width":372},"Appearance section with Color Type set to Gradient: Gradient Type Linear, Angle, the stops bar with a midpoint diamond and the list of stops.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-01\u002Fpublic",343,[29,374,375,377,378,381],{},[54,376,56],{}," a marker above the bar under ",[88,379,380],{},"Stops",". Each marker is one color in the gradient, called a stop. A color picker opens, and you choose the stop's color. Stop colors can be transparent, so a gradient can fade out, for example.",[29,383,384,388,389,392],{},[385,386,387],"drag",{},"Drag"," a marker along the bar to move its color to another spot. For an exact value, use the ",[88,390,391],{},"%"," field in its row of the list below.",[29,394,395,396,398,399,402],{},"For another color, ",[54,397,54],{}," the plus below the list (",[88,400,401],{},"Add color stop","). The new stop is white and sits at the right end. The other stops move closer together.",[29,404,405,406,408,409,412],{},"To remove a color, ",[54,407,54],{}," the minus in its row (",[88,410,411],{},"Remove color stop","). Two stops always remain; then the button is grayed out.",[29,414,415,266,417,419],{},[263,416,265],{},[14,418,60],{}," and check that the gradient fits.",[45,421,423],{"id":422},"adjust-the-blends","Adjust the blends",[10,425,426],{},"Between two neighboring stops, the bar shows a small diamond, the midpoint. That's where the two colors mix half and half.",[26,428,429,434],{},[29,430,431,433],{},[385,432,387],{}," the diamond toward one of the two stops. The color of the other stop now takes up more of the blend. A moved diamond turns blue.",[29,435,436,437,440],{},"To make the blend even again, ",[54,438,439],{},"double-click"," the diamond.",[10,442,443],{},"You can drag the diamond between 5% and 95% of the space between the stops. If two stops sit very close together, there is no room for it, and it is hidden.",[10,445,446],{},[170,447],{"alt":448,"src":449,"width":450},"Stops bar with three stops and one midpoint diamond moved and highlighted blue.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-02\u002Fpublic",339,[452,453,454],"tip",{},[10,455,456,457,460,461,34],{},"Users of your ",[14,458,459],{},"design generator"," can change a color themselves when you connect it to a color input field. For a gradient, this works for each stop on its own. See ",[462,463,465],"a",{"href":464},"\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable","Create a color input field: make a color changeable",[467,468,469],"more",{},[10,470,471,472,474,475,478,479,482,483,34],{},"You color the background of the whole canvas the same way: when no element is selected, the ",[14,473,16],{}," has the ",[88,476,477],{},"Background fill"," checkbox under ",[88,480,481],{},"Fill",". Linear and radial gradients from InDesign keep their stops and midpoints when you import them, see ",[462,484,486],{"href":485},"\u002Fhelp\u002Ftemplate-management\u002Fimport-from-idml","Import templates from InDesign (IDML)",[488,489,490],"related",{},[75,491,492,496,502,508],{},[29,493,494],{},[462,495,465],{"href":464},[29,497,498],{},[462,499,501],{"href":500},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","Appearance, effects and transforms",[29,503,504],{},[462,505,507],{"href":506},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode","Image properties",[29,509,510],{},[462,511,513],{"href":512},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design elements (images, text, shapes)",{"title":515,"searchDepth":516,"depth":516,"links":517},"",2,[518,519,520,521],{"id":47,"depth":516,"text":48},{"id":177,"depth":516,"text":178},{"id":272,"depth":516,"text":273},{"id":422,"depth":516,"text":423},"design-elements-and-tools","Give shapes, outlines, text and images a solid color or a linear, radial or conic gradient.","md",[526,527,90,100,184,188,284,296,528,529,530,341,380,531,532,533,240,534,140,477,535,536],"color","gradient","linear","radial","conic","color stop","midpoint","eyedropper","transparency","Farbe","Farbverlauf",{},true,25,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","2026-10-13","---\ntitle: \"Set colors and gradients\"\ndescription: \"Give shapes, outlines, text and images a solid color or a linear, radial or conic gradient.\"\ncategory: design-elements-and-tools\norder: 25\nkeywords: [\"color\", \"gradient\", \"Fill Color\", \"Stroke Color\", \"Color Type\", \"Solid\", \"Gradient\", \"Gradient Type\", \"linear\", \"radial\", \"conic\", \"Angle\", \"Stops\", \"color stop\", \"midpoint\", \"eyedropper\", \"Pick color\", \"transparency\", \"Color Masking\", \"Background fill\", \"Farbe\", \"Farbverlauf\"]\n---\nIn the :place[properties panel] of the :place[template editor], you give an element a color or a gradient: its fill, its outline or the background of a text. All color properties work the same way: each time, you choose between a solid color and a gradient.\n\nHere's how:\n\n1. Turn the color on in the :place[properties panel].\n2. Choose a solid color.\n3. Or create a gradient instead.\n4. For a gradient, adjust its blends.\n\n\n## Turn the color on\n\n1. :click[Click] the element on the :place[canvas] or in the :place[layers panel]. The :place[properties panel] on the left shows its properties.\n2. :click[Click] the checkbox in front of the color you want to set.\n\n   - :right For a shape, a text, a group or a mask:\n     - **Fill Color** in the **Appearance** section: the fill.\n     - **Stroke Color** in the **Appearance** section: the outline.\n   - :right For the background of a text:\n     - **Background Color** and **Background Stroke Color** in the **Appearance** section.\n   - :right For an image:\n     - **Stroke Color** in the **Appearance** section: the outline.\n     - **Color Masking** in the **Filters & Effects** section: colors the image. Images have no **Fill Color**.\n\n   The color fields appear below the checkbox. A new outline is black.\n\n   ::trouble{symptom=\"You can't find Fill Color?\"}\n   For groups and masks, the **Appearance** section starts collapsed, and **Filters & Effects** does for every element. :click[Click] the section title to expand it.\n   ::\n\n   ![Appearance section of a rectangle: Fill Color ticked with Color Type and Color below, Stroke Color not ticked; both checkboxes are highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-03\u002Fpublic){width=\"894\"}\n\n## Choose a solid color\n\nA color you just turned on is a solid color. **Color Type** shows **Solid**.\n\n1. Choose the color:\n\n   - :right In the color picker:\n     - :click[Click] the swatch next to **Color** and then your color in the color picker. With the transparency slider, you make it fully or partly see-through.\n   - :right With a color value:\n     - :type[Type] the color value into the field next to the swatch, for example #1E90FF.\n   - :right From your screen:\n     - :click[Click] the eyedropper (**Pick color**) on the right of the field, then the spot with the color.\n\n   The color is now set.\n\n   ::trouble{symptom=\"Nothing happens with the eyedropper?\"}\n   Not every browser supports the eyedropper; Chrome and Edge do, for example. :type[Type] the color value into the field instead.\n   ::\n\n   ![Color row with Color Type Solid: swatch, color value and the eyedropper on the right, highlighted as one area.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-04\u002Fpublic){width=\"894\"}\n\n2. :look[Look] at the :place[canvas] and check that the color fits.\n\n## Create a gradient\n\n1. :click[Choose] **Gradient** under **Color Type**. A linear gradient from red to blue with two colors appears.\n2. :click[Choose] the shape of the gradient under **Gradient Type**:\n\n   - **Linear**: the colors run along a straight line.\n   - **Radial**: the colors spread out from a center point.\n   - **Conic**: the colors sweep around a center point.\n\n3. :type[Type] the direction and the center. Each shape has its own fields for this:\n\n   - :right For **Linear** and **Conic**:\n     - **Angle**: the direction of the gradient, from 0 to 360°.\n   - :right For **Radial** and **Conic**:\n     - **Position**: the center point, with **X** and **Y**. 0 is the middle of the element, -100 and 100 are its edges.\n\n   ![Appearance section with Color Type set to Gradient: Gradient Type Linear, Angle, the stops bar with a midpoint diamond and the list of stops.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-01\u002Fpublic){width=\"343\"}\n\n4. :click[Click] a marker above the bar under **Stops**. Each marker is one color in the gradient, called a stop. A color picker opens, and you choose the stop's color. Stop colors can be transparent, so a gradient can fade out, for example.\n5. :drag[Drag] a marker along the bar to move its color to another spot. For an exact value, use the **%** field in its row of the list below.\n6. For another color, :click[click] the plus below the list (**Add color stop**). The new stop is white and sits at the right end. The other stops move closer together.\n7. To remove a color, :click[click] the minus in its row (**Remove color stop**). Two stops always remain; then the button is grayed out.\n8. :look[Look] at the :place[canvas] and check that the gradient fits.\n\n## Adjust the blends\n\nBetween two neighboring stops, the bar shows a small diamond, the midpoint. That's where the two colors mix half and half.\n\n1. :drag[Drag] the diamond toward one of the two stops. The color of the other stop now takes up more of the blend. A moved diamond turns blue.\n2. To make the blend even again, :click[double-click] the diamond.\n\nYou can drag the diamond between 5% and 95% of the space between the stops. If two stops sit very close together, there is no room for it, and it is hidden.\n\n![Stops bar with three stops and one midpoint diamond moved and highlighted blue.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-02\u002Fpublic){width=\"339\"}\n\n::tip\nUsers of your :place[design generator] can change a color themselves when you connect it to a color input field. For a gradient, this works for each stop on its own. See [Create a color input field: make a color changeable](\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable).\n::\n\n::more\nYou color the background of the whole canvas the same way: when no element is selected, the :place[properties panel] has the **Background fill** checkbox under **Fill**. Linear and radial gradients from InDesign keep their stops and midpoints when you import them, see [Import templates from InDesign (IDML)](\u002Fhelp\u002Ftemplate-management\u002Fimport-from-idml).\n::\n\n::related\n- [Create a color input field: make a color changeable](\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable)\n- [Appearance, effects and transforms](\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms)\n- [Image properties](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode)\n- [Design elements (images, text, shapes)](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n::\n",{"title":5,"description":523},"help\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients","2026-10-22","lUktbxOsTUW6yrgaJLrc0gAdu8Ym6O2WKt2Q77ZR0c8",1792680561168]