[{"data":1,"prerenderedAt":546},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients":3},{"id":4,"title":5,"body":6,"category":520,"description":521,"extension":522,"keywords":523,"meta":536,"navigation":537,"order":538,"path":539,"published":540,"rawbody":541,"seo":542,"stem":543,"updated":544,"__hash__":545},"helpDe\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients.de.md","Farben und Verläufe einstellen",{"type":7,"value":8,"toc":512},"minimark",[9,22,25,44,49,175,179,189,270,274,420,424,427,440,443,450,465,485],[10,11,12,13,17,18,21],"p",{},"Im ",[14,15,16],"place",{},"Properties-Panel"," des ",[14,19,20],{},"Template-Editor","s gibst du einem Element eine Farbe oder einen Farbverlauf: der Füllung, der Kontur oder dem Hintergrund eines Texts. Alle Farbeigenschaften funktionieren gleich: Du wählst jedes Mal zwischen einer Vollfarbe und einem Verlauf.",[10,23,24],{},"So gehst du vor:",[26,27,28,35,38,41],"ol",{},[29,30,31,32,34],"li",{},"Schalte die Farbe im ",[14,33,16],{}," ein.",[29,36,37],{},"Wähle eine Vollfarbe.",[29,39,40],{},"Oder erstelle stattdessen einen Verlauf.",[29,42,43],{},"Passe beim Verlauf die Übergänge an.",[45,46,48],"h2",{"id":47},"farbe-einschalten","Farbe einschalten",[26,50,51,69],{},[29,52,53,57,58,61,62,65,66,68],{},[54,55,56],"click",{},"Klicke"," auf dem ",[14,59,60],{},"Canvas"," oder im ",[14,63,64],{},"Layers-Panel"," auf das Element. Das ",[14,67,16],{}," links zeigt seine Eigenschaften.",[29,70,71,73,74,147,150,151,167,169],{},[54,72,56],{}," auf das Kästchen vor der Farbe, die du einstellen willst.",[75,76,77,104,123],"ul",{},[29,78,79,82,83],{},[80,81],"right",{}," Für eine Form, einen Text, eine Gruppe oder eine Maske:\n",[75,84,85,96],{},[29,86,87,91,92,95],{},[88,89,90],"strong",{},"Fill Color"," im Abschnitt ",[88,93,94],{},"Appearance",": die Füllung.",[29,97,98,91,101,103],{},[88,99,100],{},"Stroke Color",[88,102,94],{},": die Kontur.",[29,105,106,108,109],{},[80,107],{}," Für den Hintergrund eines Texts:\n",[75,110,111],{},[29,112,113,116,117,91,120,122],{},[88,114,115],{},"Background Color"," und ",[88,118,119],{},"Background Stroke Color",[88,121,94],{},".",[29,124,125,127,128],{},[80,126],{}," Für ein Bild:\n",[75,129,130,136],{},[29,131,132,91,134,103],{},[88,133,100],{},[88,135,94],{},[29,137,138,91,141,144,145,122],{},[88,139,140],{},"Color Masking",[88,142,143],{},"Filters & Effects",": färbt das Bild ein. Bilder haben keine ",[88,146,90],{},[148,149],"br",{},"Die Felder für die Farbe erscheinen unter dem Kästchen. Eine neue Kontur ist schwarz.",[152,153,155],"trouble",{"symptom":154},"Du findest Fill Color nicht?",[10,156,157,158,160,161,163,164,166],{},"Bei Gruppen und Masken ist der Abschnitt ",[88,159,94],{}," zuerst zugeklappt, ",[88,162,143],{}," ist es bei allen Elementen. ",[54,165,56],{}," auf den Titel des Abschnitts, um ihn aufzuklappen.",[148,168],{},[170,171],"img",{"alt":172,"src":173,"width":174},"Abschnitt Appearance eines Rechtecks: Fill Color angehakt, darunter Color Type und Color, Stroke Color nicht angehakt; beide Checkboxen sind markiert.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-03\u002Fpublic",894,[45,176,178],{"id":177},"vollfarbe-wählen","Vollfarbe wählen",[10,180,181,182,185,186,122],{},"Eine neu eingeschaltete Farbe ist eine Vollfarbe. Bei ",[88,183,184],{},"Color Type"," steht ",[88,187,188],{},"Solid",[26,190,191,260],{},[29,192,193,194,242,244,245,254,256],{},"Wähle die Farbe:",[75,195,196,212,226],{},[29,197,198,200,201],{},[80,199],{}," Im Farbwähler:\n",[75,202,203],{},[29,204,205,207,208,211],{},[54,206,56],{}," neben ",[88,209,210],{},"Color"," auf das Farbfeld und im Farbwähler auf deine Farbe. Mit dem Regler für die Transparenz machst du sie ganz oder teilweise durchsichtig.",[29,213,214,216,217],{},[80,215],{}," Mit einem Farbwert:\n",[75,218,219],{},[29,220,221,225],{},[222,223,224],"type",{},"Gib"," den Farbwert in das Feld neben dem Farbfeld ein, zum Beispiel #1E90FF.",[29,227,228,230,231],{},[80,229],{}," Vom Bildschirm:\n",[75,232,233],{},[29,234,235,237,238,241],{},[54,236,56],{}," rechts im Feld auf die Pipette (",[88,239,240],{},"Pick color",") und dann auf die Stelle mit der Farbe.",[148,243],{},"Die Farbe ist jetzt eingestellt.",[152,246,248],{"symptom":247},"Mit der Pipette passiert nichts?",[10,249,250,251,253],{},"Nicht jeder Browser unterstützt die Pipette, Chrome und Edge zum Beispiel schon. ",[222,252,224],{}," den Farbwert stattdessen in das Feld ein.",[148,255],{},[170,257],{"alt":258,"src":259,"width":174},"Zeile Color mit Color Type Solid: Farbfeld, Farbwert und rechts die Pipette, als ein Bereich markiert.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-04\u002Fpublic",[29,261,262,266,267,269],{},[263,264,265],"look",{},"Schau"," auf den ",[14,268,60],{}," und prüfe, ob die Farbe passt.",[45,271,273],{"id":272},"verlauf-erstellen","Verlauf erstellen",[26,275,276,289,317,372,381,392,403,413],{},[29,277,278,281,282,284,285,288],{},[54,279,280],{},"Wähle"," bei ",[88,283,184],{}," die Option ",[88,286,287],{},"Gradient",". Ein linearer Verlauf von Rot nach Blau mit zwei Farben erscheint.",[29,290,291,281,293,296,297],{},[54,292,280],{},[88,294,295],{},"Gradient Type"," die Form des Verlaufs:",[75,298,299,305,311],{},[29,300,301,304],{},[88,302,303],{},"Linear",": Die Farben laufen entlang einer geraden Linie.",[29,306,307,310],{},[88,308,309],{},"Radial",": Die Farben breiten sich von einem Mittelpunkt aus.",[29,312,313,316],{},[88,314,315],{},"Conic",": Die Farben laufen im Kreis um einen Mittelpunkt.",[29,318,319,321,322,365,367],{},[222,320,224],{}," Richtung und Mittelpunkt ein. Je nach Form gibt es dafür andere Felder:",[75,323,324,342],{},[29,325,326,328,329,116,331,333,334],{},[80,327],{}," Für ",[88,330,303],{},[88,332,315],{},":\n",[75,335,336],{},[29,337,338,341],{},[88,339,340],{},"Angle",": die Richtung des Verlaufs, von 0 bis 360°.",[29,343,344,328,346,116,348,333,350],{},[80,345],{},[88,347,309],{},[88,349,315],{},[75,351,352],{},[29,353,354,357,358,116,361,364],{},[88,355,356],{},"Position",": der Mittelpunkt, mit ",[88,359,360],{},"X",[88,362,363],{},"Y",". 0 ist die Mitte des Elements, -100 und 100 sind seine Ränder.",[148,366],{},[170,368],{"alt":369,"src":370,"width":371},"Appearance-Abschnitt mit Color Type Gradient: Gradient Type Linear, Angle, die Stops-Leiste mit Midpoint-Raute und die Liste der Stops.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-01\u002Fpublic",343,[29,373,374,376,377,380],{},[54,375,56],{}," unter ",[88,378,379],{},"Stops"," auf einen Marker über der Leiste. Jeder Marker ist eine Farbe im Verlauf, ein sogenannter Stop. Ein Farbwähler öffnet sich, und du wählst die Farbe des Stops. Stop-Farben können durchsichtig sein, so läuft ein Verlauf zum Beispiel ins Leere aus.",[29,382,383,387,388,391],{},[384,385,386],"drag",{},"Ziehe"," einen Marker an der Leiste entlang, um seine Farbe an eine andere Stelle zu setzen. Genauer geht es mit dem ",[88,389,390],{},"%","-Feld in seiner Zeile der Liste darunter.",[29,393,394,395,398,399,402],{},"Für eine weitere Farbe ",[54,396,397],{},"klicke"," unter der Liste auf das Plus (",[88,400,401],{},"Add color stop","). Der neue Stop ist weiß und sitzt ganz rechts. Die anderen Stops rücken zusammen.",[29,404,405,406,408,409,412],{},"Um eine Farbe zu entfernen, ",[54,407,397],{}," in ihrer Zeile auf das Minus (",[88,410,411],{},"Remove color stop","). Zwei Stops bleiben immer übrig, dann ist der Button ausgegraut.",[29,414,415,266,417,419],{},[263,416,265],{},[14,418,60],{}," und prüfe, ob der Verlauf passt.",[45,421,423],{"id":422},"übergänge-anpassen","Übergänge anpassen",[10,425,426],{},"Zwischen zwei benachbarten Stops zeigt die Leiste eine kleine Raute, den Midpoint. Dort mischen sich die beiden Farben zur Hälfte.",[26,428,429,434],{},[29,430,431,433],{},[384,432,386],{}," die Raute zu einem der beiden Stops. Die Farbe des anderen Stops nimmt jetzt mehr Platz im Übergang ein. Eine verschobene Raute wird blau.",[29,435,436,437,439],{},"Um den Übergang wieder gleichmäßig zu machen, ",[54,438,397],{}," doppelt auf die Raute.",[10,441,442],{},"Du kannst die Raute zwischen 5 % und 95 % des Abstands zwischen den Stops ziehen. Liegen zwei Stops sehr nah beieinander, ist kein Platz für sie. Sie wird dann ausgeblendet.",[10,444,445],{},[170,446],{"alt":447,"src":448,"width":449},"Stops-Leiste mit drei Stops und einer verschobenen, blau markierten Midpoint-Raute.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-02\u002Fpublic",339,[451,452,453],"tip",{},[10,454,455,456,459,460,122],{},"Nutzer deines ",[14,457,458],{},"Design-Generator","s können eine Farbe selbst ändern, wenn du sie mit einem Color-Input-Feld verbindest. Bei einem Verlauf geht das für jeden Stop einzeln. Wie das geht, steht in ",[461,462,464],"a",{"href":463},"\u002Fde\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable","Color-Input-Feld erstellen: Farbe änderbar machen",[466,467,468],"more",{},[10,469,470,471,376,473,476,477,480,481,122],{},"Den Hintergrund des ganzen Canvas färbst du genauso: Ist kein Element ausgewählt, findest du im ",[14,472,16],{},[88,474,475],{},"Fill"," das Kästchen ",[88,478,479],{},"Background fill",". Lineare und radiale Verläufe aus InDesign behalten beim Import ihre Stops und Midpoints, siehe ",[461,482,484],{"href":483},"\u002Fde\u002Fhelp\u002Ftemplate-management\u002Fimport-from-idml","Templates aus InDesign importieren (IDML)",[486,487,488],"related",{},[75,489,490,494,500,506],{},[29,491,492],{},[461,493,464],{"href":463},[29,495,496],{},[461,497,499],{"href":498},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","Aussehen, Effekte und Transformationen",[29,501,502],{},[461,503,505],{"href":504},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode","Bild-Eigenschaften",[29,507,508],{},[461,509,511],{"href":510},"\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements","Design-Elemente (Bilder, Text, Formen)",{"title":513,"searchDepth":514,"depth":514,"links":515},"",2,[516,517,518,519],{"id":47,"depth":514,"text":48},{"id":177,"depth":514,"text":178},{"id":272,"depth":514,"text":273},{"id":422,"depth":514,"text":423},"design-elements-and-tools","Gib Formen, Konturen, Texten und Bildern eine Vollfarbe oder einen linearen, radialen oder konischen Verlauf.","md",[524,525,526,527,528,90,100,184,188,287,295,529,530,531,340,379,532,533,534,240,535,140,479],"color","gradient","Farbe","Farbverlauf","Verlauf","linear","radial","conic","color stop","Midpoint","Pipette","Transparenz",{},true,25,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients.de","2026-10-13","---\ntitle: \"Farben und Verläufe einstellen\"\ndescription: \"Gib Formen, Konturen, Texten und Bildern eine Vollfarbe oder einen linearen, radialen oder konischen Verlauf.\"\ncategory: design-elements-and-tools\norder: 25\nkeywords: [\"color\", \"gradient\", \"Farbe\", \"Farbverlauf\", \"Verlauf\", \"Fill Color\", \"Stroke Color\", \"Color Type\", \"Solid\", \"Gradient\", \"Gradient Type\", \"linear\", \"radial\", \"conic\", \"Angle\", \"Stops\", \"color stop\", \"Midpoint\", \"Pipette\", \"Pick color\", \"Transparenz\", \"Color Masking\", \"Background fill\"]\n---\nIm :place[Properties-Panel] des :place[Template-Editor]s gibst du einem Element eine Farbe oder einen Farbverlauf: der Füllung, der Kontur oder dem Hintergrund eines Texts. Alle Farbeigenschaften funktionieren gleich: Du wählst jedes Mal zwischen einer Vollfarbe und einem Verlauf.\n\nSo gehst du vor:\n\n1. Schalte die Farbe im :place[Properties-Panel] ein.\n2. Wähle eine Vollfarbe.\n3. Oder erstelle stattdessen einen Verlauf.\n4. Passe beim Verlauf die Übergänge an.\n\n\n## Farbe einschalten\n\n1. :click[Klicke] auf dem :place[Canvas] oder im :place[Layers-Panel] auf das Element. Das :place[Properties-Panel] links zeigt seine Eigenschaften.\n2. :click[Klicke] auf das Kästchen vor der Farbe, die du einstellen willst.\n\n   - :right Für eine Form, einen Text, eine Gruppe oder eine Maske:\n     - **Fill Color** im Abschnitt **Appearance**: die Füllung.\n     - **Stroke Color** im Abschnitt **Appearance**: die Kontur.\n   - :right Für den Hintergrund eines Texts:\n     - **Background Color** und **Background Stroke Color** im Abschnitt **Appearance**.\n   - :right Für ein Bild:\n     - **Stroke Color** im Abschnitt **Appearance**: die Kontur.\n     - **Color Masking** im Abschnitt **Filters & Effects**: färbt das Bild ein. Bilder haben keine **Fill Color**.\n\n   Die Felder für die Farbe erscheinen unter dem Kästchen. Eine neue Kontur ist schwarz.\n\n   ::trouble{symptom=\"Du findest Fill Color nicht?\"}\n   Bei Gruppen und Masken ist der Abschnitt **Appearance** zuerst zugeklappt, **Filters & Effects** ist es bei allen Elementen. :click[Klicke] auf den Titel des Abschnitts, um ihn aufzuklappen.\n   ::\n\n   ![Abschnitt Appearance eines Rechtecks: Fill Color angehakt, darunter Color Type und Color, Stroke Color nicht angehakt; beide Checkboxen sind markiert.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-03\u002Fpublic){width=\"894\"}\n\n## Vollfarbe wählen\n\nEine neu eingeschaltete Farbe ist eine Vollfarbe. Bei **Color Type** steht **Solid**.\n\n1. Wähle die Farbe:\n\n   - :right Im Farbwähler:\n     - :click[Klicke] neben **Color** auf das Farbfeld und im Farbwähler auf deine Farbe. Mit dem Regler für die Transparenz machst du sie ganz oder teilweise durchsichtig.\n   - :right Mit einem Farbwert:\n     - :type[Gib] den Farbwert in das Feld neben dem Farbfeld ein, zum Beispiel #1E90FF.\n   - :right Vom Bildschirm:\n     - :click[Klicke] rechts im Feld auf die Pipette (**Pick color**) und dann auf die Stelle mit der Farbe.\n\n   Die Farbe ist jetzt eingestellt.\n\n   ::trouble{symptom=\"Mit der Pipette passiert nichts?\"}\n   Nicht jeder Browser unterstützt die Pipette, Chrome und Edge zum Beispiel schon. :type[Gib] den Farbwert stattdessen in das Feld ein.\n   ::\n\n   ![Zeile Color mit Color Type Solid: Farbfeld, Farbwert und rechts die Pipette, als ein Bereich markiert.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-04\u002Fpublic){width=\"894\"}\n\n2. :look[Schau] auf den :place[Canvas] und prüfe, ob die Farbe passt.\n\n## Verlauf erstellen\n\n1. :click[Wähle] bei **Color Type** die Option **Gradient**. Ein linearer Verlauf von Rot nach Blau mit zwei Farben erscheint.\n2. :click[Wähle] bei **Gradient Type** die Form des Verlaufs:\n\n   - **Linear**: Die Farben laufen entlang einer geraden Linie.\n   - **Radial**: Die Farben breiten sich von einem Mittelpunkt aus.\n   - **Conic**: Die Farben laufen im Kreis um einen Mittelpunkt.\n\n3. :type[Gib] Richtung und Mittelpunkt ein. Je nach Form gibt es dafür andere Felder:\n\n   - :right Für **Linear** und **Conic**:\n     - **Angle**: die Richtung des Verlaufs, von 0 bis 360°.\n   - :right Für **Radial** und **Conic**:\n     - **Position**: der Mittelpunkt, mit **X** und **Y**. 0 ist die Mitte des Elements, -100 und 100 sind seine Ränder.\n\n   ![Appearance-Abschnitt mit Color Type Gradient: Gradient Type Linear, Angle, die Stops-Leiste mit Midpoint-Raute und die Liste der Stops.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-01\u002Fpublic){width=\"343\"}\n\n4. :click[Klicke] unter **Stops** auf einen Marker über der Leiste. Jeder Marker ist eine Farbe im Verlauf, ein sogenannter Stop. Ein Farbwähler öffnet sich, und du wählst die Farbe des Stops. Stop-Farben können durchsichtig sein, so läuft ein Verlauf zum Beispiel ins Leere aus.\n5. :drag[Ziehe] einen Marker an der Leiste entlang, um seine Farbe an eine andere Stelle zu setzen. Genauer geht es mit dem **%**-Feld in seiner Zeile der Liste darunter.\n6. Für eine weitere Farbe :click[klicke] unter der Liste auf das Plus (**Add color stop**). Der neue Stop ist weiß und sitzt ganz rechts. Die anderen Stops rücken zusammen.\n7. Um eine Farbe zu entfernen, :click[klicke] in ihrer Zeile auf das Minus (**Remove color stop**). Zwei Stops bleiben immer übrig, dann ist der Button ausgegraut.\n8. :look[Schau] auf den :place[Canvas] und prüfe, ob der Verlauf passt.\n\n## Übergänge anpassen\n\nZwischen zwei benachbarten Stops zeigt die Leiste eine kleine Raute, den Midpoint. Dort mischen sich die beiden Farben zur Hälfte.\n\n1. :drag[Ziehe] die Raute zu einem der beiden Stops. Die Farbe des anderen Stops nimmt jetzt mehr Platz im Übergang ein. Eine verschobene Raute wird blau.\n2. Um den Übergang wieder gleichmäßig zu machen, :click[klicke] doppelt auf die Raute.\n\nDu kannst die Raute zwischen 5 % und 95 % des Abstands zwischen den Stops ziehen. Liegen zwei Stops sehr nah beieinander, ist kein Platz für sie. Sie wird dann ausgeblendet.\n\n![Stops-Leiste mit drei Stops und einer verschobenen, blau markierten Midpoint-Raute.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-colors-and-gradients-02\u002Fpublic){width=\"339\"}\n\n::tip\nNutzer deines :place[Design-Generator]s können eine Farbe selbst ändern, wenn du sie mit einem Color-Input-Feld verbindest. Bei einem Verlauf geht das für jeden Stop einzeln. Wie das geht, steht in [Color-Input-Feld erstellen: Farbe änderbar machen](\u002Fde\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable).\n::\n\n::more\nDen Hintergrund des ganzen Canvas färbst du genauso: Ist kein Element ausgewählt, findest du im :place[Properties-Panel] unter **Fill** das Kästchen **Background fill**. Lineare und radiale Verläufe aus InDesign behalten beim Import ihre Stops und Midpoints, siehe [Templates aus InDesign importieren (IDML)](\u002Fde\u002Fhelp\u002Ftemplate-management\u002Fimport-from-idml).\n::\n\n::related\n- [Color-Input-Feld erstellen: Farbe änderbar machen](\u002Fde\u002Fhelp\u002Finput-fields\u002Fmake-color-changeable)\n- [Aussehen, Effekte und Transformationen](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms)\n- [Bild-Eigenschaften](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fimage-cover-mode)\n- [Design-Elemente (Bilder, Text, Formen)](\u002Fde\u002Fhelp\u002Fdesign-elements-and-tools\u002Fdesign-elements)\n::\n",{"title":5,"description":521},"help\u002Fdesign-elements-and-tools\u002Fcolors-and-gradients.de","2026-10-22","am713A5ex_M4_Ef2WLAsu7gG4mrKzjxjbuv_oM8atVE",1792680563788]